309 lines
9.0 KiB
HTML
Executable File
309 lines
9.0 KiB
HTML
Executable File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
<head>
|
|
<title></title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
<style type="text/css" media="screen">
|
|
|
|
#headsetButton {
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(images/headset.png)
|
|
}
|
|
|
|
#headsetButton:hover {
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(images/headset_open.png)
|
|
}
|
|
|
|
#controls {
|
|
float:left;
|
|
width:20%;
|
|
height:100%;
|
|
background:#9c9;
|
|
}
|
|
#client {
|
|
float:right;
|
|
width:80%;
|
|
height:100%;
|
|
background:#c9c;
|
|
}
|
|
#footer {
|
|
clear:both;;
|
|
background:#c9c;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="swfobject/swfobject.js"></script>
|
|
<script type="text/javascript">
|
|
swfobject.registerObject("BigBlueButton", "11", "expressInstall.swf");
|
|
</script>
|
|
<script src="lib/jquery-1.5.1.min.js" language="javascript"></script>
|
|
<script src="lib/bigbluebutton.js" language="javascript"></script>
|
|
<script src="lib/bbb_localization.js" language="javascript"></script>
|
|
<script src="lib/bbb_blinker.js" language="javascript"></script>
|
|
<script src="lib/bbb_deskshare.js" language="javascript"></script>
|
|
<script type="text/javascript" src="lib/bbb_api_bridge.js"></script>
|
|
<script src="lib/sip.js?v=VERSION" language="javascript"></script>
|
|
<script src="lib/weburl_regex.js?v=VERSION" language="javascript"></script>
|
|
<script src="lib/bbb_webrtc_bridge_sip.js" language="javascript"></script>
|
|
<script>
|
|
|
|
$(document).ready();
|
|
|
|
var joinedVoice = false;
|
|
var myUserID = "";
|
|
|
|
function log_message(msg) {
|
|
var obj=document.getElementById('log');
|
|
|
|
if (msg != null && obj != null) {
|
|
obj.value += "\n"+msg;
|
|
obj.scrollTop = obj.scrollHeight
|
|
}
|
|
}
|
|
|
|
window.displayBBBClient = function() {
|
|
var bbbc = document.getElementById("flashclient");
|
|
bbbc.style.display = "block";
|
|
}
|
|
|
|
//
|
|
// Syncrhonous query functions
|
|
//
|
|
var getMyUserID = function() {
|
|
if (myUserID == "" ) {
|
|
BBB.getMyUserID(function(userID) {
|
|
myUserID=userID;
|
|
});
|
|
}
|
|
}
|
|
|
|
var getMyRole = function() {
|
|
BBB.getMyRole(function(myRole) {
|
|
log_message("My role = " + myRole);
|
|
});
|
|
}
|
|
|
|
var getMyUserInfo = function() {
|
|
BBB.getMyUserInfo(function(bbbEvent) {
|
|
log_message("User info response [myUserID=" + bbbEvent.myUserID
|
|
+ ",myUsername=" + bbbEvent.myUsername + ",myAvatarURL=" + bbbEvent.myAvatarURL
|
|
+ ",myRole=" + bbbEvent.myRole + ",amIPresenter=" + bbbEvent.amIPresenter
|
|
+ ",dialNumber=" + bbbEvent.dialNumber + ",voiceBridge=" + bbbEvent.voiceBridge + "].");
|
|
|
|
for(var key in bbbEvent.customdata){
|
|
log_message(key + " " + bbbEvent.customdata[key]);
|
|
}
|
|
});
|
|
}
|
|
|
|
var getMeetingID = function() {
|
|
BBB.getMeetingID(function(meetingID) {
|
|
log_message("Meeting ID = [" + meetingID + "]");
|
|
});
|
|
}
|
|
|
|
//
|
|
// Asynchronous query functions
|
|
//
|
|
var getMyRoleAsynch = function() {
|
|
BBB.listen("GetMyRoleResponse", function(bbbEvent) {
|
|
log_message("Received GetMyRoleResponse event [" + bbbEvent.myRole + "]");
|
|
});
|
|
|
|
BBB.getMyRole();
|
|
}
|
|
|
|
//
|
|
// Commands
|
|
//
|
|
|
|
var muteMe = function() {
|
|
// BBB.muteMe();
|
|
alert ("No yet implemented.");
|
|
}
|
|
|
|
var unmuteMe = function() {
|
|
// BBB.unmuteMe();
|
|
alert ("No yet implemented");
|
|
}
|
|
|
|
var muteAll = function() {
|
|
// BBB.muteAll();
|
|
alert ("No yet implemented");
|
|
}
|
|
|
|
var unmuteAll = function() {
|
|
// BBB.unmuteAll();
|
|
alert ("No yet implemented");
|
|
}
|
|
|
|
var switchLayout = function(newLayout) {
|
|
log_message( "switchLayout: " + newLayout );
|
|
BBB.switchLayout(newLayout);
|
|
}
|
|
|
|
var sendPublicChatMessage = function(message) {
|
|
log_message( "sentPublicChatMessage: " + message );
|
|
BBB.sendPublicChatMessage("0x7A7A7A", "en", message)
|
|
}
|
|
|
|
var shareVideoCamera = function() {
|
|
log_message( "shareVideoCamera" );
|
|
BBB.shareVideoCamera();
|
|
}
|
|
|
|
var stopSharingCamera = function() {
|
|
log_message( "stopSharingCamera" );
|
|
BBB.stopSharingCamera();
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//
|
|
// Listen for events
|
|
//
|
|
|
|
BBB.listen("UserJoinedVoiceEvent", function(bbbEvent) {
|
|
log_message( "UserJoinedVoiceEvent: " + bbbEvent.userID );
|
|
|
|
getMyUserID();
|
|
if (bbbEvent.userID == myUserID) {
|
|
headsetButton_On();
|
|
}
|
|
});
|
|
|
|
BBB.listen("UserLeftVoiceEvent", function(bbbEvent) {
|
|
log_message( "UserLeftVoiceEvent: " + bbbEvent.userID );
|
|
|
|
getMyUserID();
|
|
if (bbbEvent.userID == myUserID) {
|
|
headsetButton_Off()
|
|
}
|
|
});
|
|
|
|
BBB.listen("BroadcastingCameraStartedEvent", function(bbbEvent) {
|
|
log_message( "BroadcastingCameraStartedEvent: camIndex=" + bbbEvent.camIndex +
|
|
" camWidth=" + bbbEvent.camWidth +
|
|
" camHeight=" + bbbEvent.camHeight +
|
|
" camKeyFrameInterval=" + bbbEvent.camKeyFrameInterval +
|
|
" camModeFps=" + bbbEvent.camModeFps +
|
|
" camQualityBandwidth=" + bbbEvent.camQualityBandwidth +
|
|
" camQualityPicture=" + bbbEvent.camQualityPicture +
|
|
" isPresenter=" + bbbEvent.isPresenter +
|
|
" isPublishing=" + bbbEvent.isPublishing +
|
|
" streamName=" + bbbEvent.streamName
|
|
);
|
|
//for(var key in bbbEvent){
|
|
// log_message(key + " " + bbbEvent.customdata[key]);
|
|
//}
|
|
});
|
|
|
|
BBB.listen("BroadcastingCameraStoppedEvent", function(bbbEvent) {
|
|
log_message( "BroadcastingCameraStoppedEvent" );
|
|
});
|
|
|
|
|
|
function clickHeadsetButton() {
|
|
if (joinedVoice) {
|
|
BBB.leaveVoiceConference()
|
|
} else {
|
|
BBB.joinVoiceConference();
|
|
}
|
|
}
|
|
|
|
function headsetButton_On() {
|
|
document.getElementById('headsetButton').style.backgroundImage="url('images/headset_open.png')";
|
|
//Need to figure out how to set the hover state via JS
|
|
joinedVoice = true;
|
|
}
|
|
|
|
function headsetButton_Off() {
|
|
document.getElementById('headsetButton').style.backgroundImage="url('images/headset.png')";
|
|
//Need to figure out how to set the hover state via JS
|
|
joinedVoice = false;
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<audio id="remote-media" autoplay="autoplay"></audio>
|
|
</div>
|
|
|
|
<div id="controls">
|
|
<button type="button" onclick="getMeetingID()">Get MeetingID</button>
|
|
<button type="button" onclick="getMyUserInfo()">Get MyUserInfo </button>
|
|
<button type="button" onclick="getMyRoleAsynch()">Get Role Asynch</button>
|
|
<button type="button" onclick="getMyRole()">Get Role Synch</button>
|
|
<button type="button" onclick="shareVideoCamera()">Start Webcam</button>
|
|
<button type="button" onclick="stopSharingCamera()">Stop Webcam</button>
|
|
<!--
|
|
<button type="button" onclick="muteMe()">Mute</button>
|
|
<button type="button" onclick="unmuteMe()">Unmute</button>
|
|
<button type="button" onclick="muteAll()">Mute All</button>
|
|
<button type="button" onclick="unmuteAll()">Unmute All</button>
|
|
-->
|
|
|
|
|
|
</p>
|
|
Layout: <select name="Layout" onChange="switchLayout(this.options[this.selectedIndex].value);return false">
|
|
<option value="Default">Default</option>
|
|
<option value="Video Chat">Video Chat</option>
|
|
<option value="Meeting">Meeting</option>
|
|
<option value="Webinar">Webinar</option>
|
|
</select>
|
|
</p>
|
|
Chat: <FORM NAME="chat" onsubmit='BBB.sendPublicChatMessage("0x7A7A7A", "en", this.elements["chat-message"].value); return false;'>
|
|
<input id="chat-message" type="text" autofocus name="text" /></td>
|
|
<input id="submit-button" type="submit" value="Send Chat Message" /></td>
|
|
</FORM>
|
|
</p>
|
|
|
|
Audio:<a id="headsetButton" onclick='clickHeadsetButton()' href="#" title="Join Audio"><span></span></a>
|
|
|
|
Events:
|
|
<form>
|
|
<textarea id="log" cols=40 rows=20 readonly>
|
|
|
|
</textarea>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="client" style="background-color:#EEEEEE;height:900px;width:1200px;float:left;">
|
|
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="90%" id="BigBlueButton" name="BigBlueButton" align="middle">
|
|
<param name="movie" value="http://192.168.0.36/client/BigBlueButton.swf?v=VERSION" />
|
|
<param name="quality" value="high" />
|
|
<param name="allowfullscreen" value="true" />
|
|
<param name="bgcolor" value="#869ca7" />
|
|
<param name="wmode" value="window" />
|
|
<param name="allowScriptAccess" value="always" />
|
|
<!--[if !IE]>-->
|
|
<object type="application/x-shockwave-flash" data="BigBlueButton.swf?v=VERSION" width="100%" height="90%" align="middle">
|
|
<param name="quality" value="high" />
|
|
<param name="bgcolor" value="#869ca7" />
|
|
<param name="allowScriptAccess" value="always" />
|
|
<!--<![endif]-->
|
|
<a href="http://www.adobe.com/go/getflashplayer">
|
|
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
|
|
</a>
|
|
<!--[if !IE]>-->
|
|
</object>
|
|
<!--<![endif]-->
|
|
</object>
|
|
</div>
|
|
<!-- div id="footer">
|
|
<div id="update-display"/>
|
|
<div id="notifications" aria-live="polite" role="region" aria-label="Chat Notifications"></div>
|
|
</div-->
|
|
</body>
|
|
</html>
|