digitallysavvy/broadcaster.html

## broadcaster.html
<html lang="en">
    <head>
        <title>Agora.io AFrame [HOST] -  Live Stream WebVR</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- FontAwesome and Bootstrap CSS -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
        <!-- jQuery and Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <!-- AFrame -->
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
        <script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js"></script>
        <!-- Agora.io -->
        <script src="js/AgoraRTCSDK-3.0.2.js" type="text/javascript"></script>
        <script src="js/agora-rtm-sdk-1.2.2.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div class="container-fluid p-0">
            <div id="main-container">
                <div id="buttons-container" class="row justify-content-center mt-3">
                    <div id="audio-controls" class="col-md-2 text-center btn-group">
                        <button id="mic-btn" type="button" class="btn btn-block btn-dark btn-lg">
                        <i id="mic-icon" class="fas fa-microphone"></i>
                        </button>
                        <button id="mic-dropdown" type="button" class="btn btn-lg btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div id="mic-list" class="dropdown-menu dropdown-menu-right">
                        </div>
                    </div>
                    <div id="video-controls" class="col-md-2 text-center btn-group">
                        <button id="video-btn"  type="button" class="btn btn-block btn-dark btn-lg">
                        <i id="video-icon" class="fas fa-video"></i>
                        </button>
                        <button id="cam-dropdown" type="button" class="btn btn-lg btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div id="camera-list" class="dropdown-menu dropdown-menu-right">
                        </div>
                    </div>
                    <div class="col-md-2 text-center">
                        <button id="exit-btn"  type="button" class="btn btn-block btn-danger btn-lg">
                        <i id="exit-icon" class="fas fa-phone-slash"></i>
                        </button>
                    </div>
                </div>
                <div id="full-screen-video">
                    <a-scene>
                        <a-assets>
                            <a-asset-item id="broadcaster" src="/assets/broadcaster.glb"></a-asset-item>
                        </a-assets>
                        <a-sky color="#ECECEC"></a-sky>
                        <a-entity
                            id="camera"
                            camera
                            position="0 1 2.5"
                            orbit-controls="
                            autoRotate: false;
                            target: #target;
                            enableDamping: true;
                            dampingFactor: 0.25;
                            rotateSpeed:0.14;
                            minDistance:2;
                            maxDistance:15;"
                            mouse-cursor="">
                        </a-entity>
                        <a-entity id="target"></a-entity>
                    </a-scene>
                </div>
            </div>
        </div>
        </div>
    </body>
    <script>
        $("#mic-btn").prop("disabled", true);
        $("#video-btn").prop("disabled", true);
        $("#exit-btn").prop("disabled", true);
    </script>
    <script src="js/agora-broadcaster.js" type="text/javascript"></script>
</html>
	<html lang="en">
	<head>
	<title>Agora.io AFrame [HOST] - Live Stream WebVR</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- FontAwesome and Bootstrap CSS -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
	<!-- jQuery and Bootstrap JS -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
	<!-- AFrame -->
	<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
	<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
	<script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js"></script>
	<!-- Agora.io -->
	<script src="js/AgoraRTCSDK-3.0.2.js" type="text/javascript"></script>
	<script src="js/agora-rtm-sdk-1.2.2.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
	<div class="container-fluid p-0">
	<div id="main-container">
	<div id="buttons-container" class="row justify-content-center mt-3">
	<div id="audio-controls" class="col-md-2 text-center btn-group">
	<button id="mic-btn" type="button" class="btn btn-block btn-dark btn-lg">
	<i id="mic-icon" class="fas fa-microphone"></i>
	</button>
	<button id="mic-dropdown" type="button" class="btn btn-lg btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	<span class="sr-only">Toggle Dropdown</span>
	</button>
	<div id="mic-list" class="dropdown-menu dropdown-menu-right">
	</div>
	</div>
	<div id="video-controls" class="col-md-2 text-center btn-group">
	<button id="video-btn" type="button" class="btn btn-block btn-dark btn-lg">
	<i id="video-icon" class="fas fa-video"></i>
	</button>
	<button id="cam-dropdown" type="button" class="btn btn-lg btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	<span class="sr-only">Toggle Dropdown</span>
	</button>
	<div id="camera-list" class="dropdown-menu dropdown-menu-right">
	</div>
	</div>
	<div class="col-md-2 text-center">
	<button id="exit-btn" type="button" class="btn btn-block btn-danger btn-lg">
	<i id="exit-icon" class="fas fa-phone-slash"></i>
	</button>
	</div>
	</div>
	<div id="full-screen-video">
	<a-scene>
	<a-assets>
	<a-asset-item id="broadcaster" src="/assets/broadcaster.glb"></a-asset-item>
	</a-assets>
	<a-sky color="#ECECEC"></a-sky>
	<a-entity
	id="camera"
	camera
	position="0 1 2.5"
	orbit-controls="
	autoRotate: false;
	target: #target;
	enableDamping: true;
	dampingFactor: 0.25;
	rotateSpeed:0.14;
	minDistance:2;
	maxDistance:15;"
	mouse-cursor="">
	</a-entity>
	<a-entity id="target"></a-entity>
	</a-scene>
	</div>
	</div>
	</div>
	</div>
	</body>
	<script>
	$("#mic-btn").prop("disabled", true);
	$("#video-btn").prop("disabled", true);
	$("#exit-btn").prop("disabled", true);
	</script>
	<script src="js/agora-broadcaster.js" type="text/javascript"></script>
	</html>