Created
June 26, 2017 12:46
-
-
Save chintamanand/28533c1851ea8d4e9121d6c7b9280c3c to your computer and use it in GitHub Desktop.
WebRTC Video Conference Demo // source https://jsbin.com/jifituk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
<meta name="robots" content="noindex, nofollow"> | |
<meta name="googlebot" content="noindex, nofollow"> | |
<script type="text/javascript" src="/js/lib/dummy.js"></script> | |
<script type="text/javascript" src="https://api.bistri.com/bistri.conference.min.js"></script> | |
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> | |
<style type="text/css"> | |
.pane { | |
margin: 20px; | |
text-align: center; | |
} | |
video { | |
width: 100%; | |
} | |
</style> | |
<title>WebRTC Video Conference Demo</title> | |
<script type="text/javascript">//<![CDATA[ | |
window.onload=function(){ | |
/* | |
JS library reference: | |
http://developers.bistri.com/webrtc-sdk/js-library-reference | |
*/ | |
var room; | |
var members; | |
var localStream; | |
// when Bistri API client is ready, function | |
// "onBistriConferenceReady" is invoked | |
onBistriConferenceReady = function () { | |
// test if the browser is WebRTC compatible | |
if ( !bc.isCompatible() ) { | |
// if the browser is not compatible, display an alert | |
alert( "your browser is not WebRTC compatible !" ); | |
// then stop the script execution | |
return; | |
} | |
// initialize API client with application keys | |
// if you don't have your own, you can get them at: | |
// https://api.developers.bistri.com/login | |
bc.init( { | |
"appId": "38077edb", | |
"appKey": "4f304359baa6d0fd1f9106aaeb116f33" | |
} ); | |
/* Set events handler */ | |
// when local user is connected to the server | |
bc.signaling.bind( "onConnected", function () { | |
// show pane with id "pane_1" | |
showPanel( "pane_1" ); | |
} ); | |
// when an error occured on the server side | |
bc.signaling.bind( "onError", function ( error ) { | |
// display an alert message | |
alert( error.text + " (" + error.code + ")" ); | |
} ); | |
// when the user has joined a room | |
bc.signaling.bind( "onJoinedRoom", function ( data ) { | |
// set the current room name | |
room = data.room; | |
members = data.members; | |
// ask the user to access to his webcam | |
bc.startStream( "webcam-sd", function( stream ){ | |
// affect stream to "localStream" var | |
localStream = stream; | |
// when webcam access has been granted | |
// show pane with id "pane_2" | |
showPanel( "pane_2" ); | |
// insert the local webcam stream into div#video_container node | |
bc.attachStream( stream, q( "#video_container" ), { mirror: true } ); | |
// then, for every single members present in the room ... | |
for ( var i=0, max=members.length; i<max; i++ ) { | |
// ... request a call | |
bc.call( members[ i ].id, room, { "stream": stream } ); | |
} | |
} ); | |
} ); | |
// when an error occurred while trying to join a room | |
bc.signaling.bind( "onJoinRoomError", function ( error ) { | |
// display an alert message | |
alert( error.text + " (" + error.code + ")" ); | |
} ); | |
// when the local user has quitted the room | |
bc.signaling.bind( "onQuittedRoom", function( room ) { | |
// stop the local stream | |
bc.stopStream( localStream, function(){ | |
// remove the stream from the page | |
bc.detachStream( localStream ); | |
// show pane with id "pane_1" | |
showPanel( "pane_1" ); | |
} ); | |
} ); | |
// when a new remote stream is received | |
bc.streams.bind( "onStreamAdded", function ( remoteStream ) { | |
// insert the new remote stream into div#video_container node | |
bc.attachStream( remoteStream, q( "#video_container" ) ); | |
} ); | |
// when a remote stream has been stopped | |
bc.streams.bind( "onStreamClosed", function ( stream ) { | |
// remove the stream from the page | |
bc.detachStream( stream ); | |
} ); | |
// when a local stream cannot be retrieved | |
bc.streams.bind( "onStreamError", function( error ){ | |
switch( error.name ){ | |
case "PermissionDeniedError": | |
alert( "Webcam access has not been allowed" ); | |
bc.quitRoom( room ); | |
break | |
case "DevicesNotFoundError": | |
if( confirm( "No webcam/mic found on this machine. Process call anyway ?" ) ){ | |
// show pane with id "pane_2" | |
showPanel( "pane_2" ); | |
for ( var i=0, max=members.length; i<max; i++ ) { | |
// ... request a call | |
bc.call( members[ i ].id, room ); | |
} | |
} | |
else{ | |
bc.quitRoom( room ); | |
} | |
break | |
} | |
} ); | |
// bind function "joinConference" to button "Join Conference Room" | |
q( "#join" ).addEventListener( "click", joinConference ); | |
// bind function "quitConference" to button "Quit Conference Room" | |
q( "#quit" ).addEventListener( "click", quitConference ); | |
// open a new session on the server | |
bc.connect(); | |
} | |
// when button "Join Conference Room" has been clicked | |
function joinConference(){ | |
var roomToJoin = q( "#room_field" ).value; | |
// if "Conference Name" field is not empty ... | |
if( roomToJoin ){ | |
// ... join the room | |
bc.joinRoom( roomToJoin ); | |
} | |
else{ | |
// otherwise, display an alert | |
alert( "you must enter a room name !" ) | |
} | |
} | |
// when button "Quit Conference Room" has been clicked | |
function quitConference(){ | |
// quit the current conference room | |
bc.quitRoom( room ); | |
} | |
function showPanel( id ){ | |
var panes = document.querySelectorAll( ".pane" ); | |
// for all nodes matching the query ".pane" | |
for( var i=0, max=panes.length; i<max; i++ ){ | |
// hide all nodes except the one to show | |
panes[ i ].style.display = panes[ i ].id == id ? "block" : "none"; | |
}; | |
} | |
function q( query ){ | |
// return the DOM node matching the query | |
return document.querySelector( query ); | |
} | |
}//]]> | |
</script> | |
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/undefined"></head> | |
<body> | |
<div class="pane" id="pane_0" style="display: none;"> | |
<img src="http://static.tumblr.com/uzwqx7a/8VIm8jofz/logo.png"> | |
</div> | |
<input type="text" placeholder="Conference Name" id="room_field" class="form-control"><div class="pane" id="pane_1" style="display: block;"> | |
<br> | |
<input type="button" value="Join Conference Room" id="join" class="btn btn-info btn-default btn-block"> | |
</div> | |
<div class="pane" id="pane_2" style="display: none"> | |
<div id="video_container"></div> | |
<input type="button" value="Quit Conference Room" id="quit" class="btn btn-danger btn-default btn-block"> | |
</div> | |
<script> | |
// tell the embed parent frame the height of the content | |
if (window.parent && window.parent.parent){ | |
window.parent.parent.postMessage(["resultsFrame", { | |
height: document.body.getBoundingClientRect().height, | |
slug: "SjQ6T" | |
}], "*") | |
} | |
</script> | |
<script id="jsbin-source-html" type="text/html"><html> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
<meta name="robots" content="noindex, nofollow"> | |
<meta name="googlebot" content="noindex, nofollow"> | |
<script type="text/javascript" src="/js/lib/dummy.js"><\/script> | |
<script type="text/javascript" src="https://api.bistri.com/bistri.conference.min.js"><\/script> | |
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> | |
<style type="text/css"> | |
.pane { | |
margin: 20px; | |
text-align: center; | |
} | |
video { | |
width: 100%; | |
} | |
</style> | |
<title>WebRTC Video Conference Demo</title> | |
<script type="text/javascript">//<![CDATA[ | |
window.onload=function(){ | |
/* | |
JS library reference: | |
http://developers.bistri.com/webrtc-sdk/js-library-reference | |
*/ | |
var room; | |
var members; | |
var localStream; | |
// when Bistri API client is ready, function | |
// "onBistriConferenceReady" is invoked | |
onBistriConferenceReady = function () { | |
// test if the browser is WebRTC compatible | |
if ( !bc.isCompatible() ) { | |
// if the browser is not compatible, display an alert | |
alert( "your browser is not WebRTC compatible !" ); | |
// then stop the script execution | |
return; | |
} | |
// initialize API client with application keys | |
// if you don't have your own, you can get them at: | |
// https://api.developers.bistri.com/login | |
bc.init( { | |
"appId": "38077edb", | |
"appKey": "4f304359baa6d0fd1f9106aaeb116f33" | |
} ); | |
/* Set events handler */ | |
// when local user is connected to the server | |
bc.signaling.bind( "onConnected", function () { | |
// show pane with id "pane_1" | |
showPanel( "pane_1" ); | |
} ); | |
// when an error occured on the server side | |
bc.signaling.bind( "onError", function ( error ) { | |
// display an alert message | |
alert( error.text + " (" + error.code + ")" ); | |
} ); | |
// when the user has joined a room | |
bc.signaling.bind( "onJoinedRoom", function ( data ) { | |
// set the current room name | |
room = data.room; | |
members = data.members; | |
// ask the user to access to his webcam | |
bc.startStream( "webcam-sd", function( stream ){ | |
// affect stream to "localStream" var | |
localStream = stream; | |
// when webcam access has been granted | |
// show pane with id "pane_2" | |
showPanel( "pane_2" ); | |
// insert the local webcam stream into div#video_container node | |
bc.attachStream( stream, q( "#video_container" ), { mirror: true } ); | |
// then, for every single members present in the room ... | |
for ( var i=0, max=members.length; i<max; i++ ) { | |
// ... request a call | |
bc.call( members[ i ].id, room, { "stream": stream } ); | |
} | |
} ); | |
} ); | |
// when an error occurred while trying to join a room | |
bc.signaling.bind( "onJoinRoomError", function ( error ) { | |
// display an alert message | |
alert( error.text + " (" + error.code + ")" ); | |
} ); | |
// when the local user has quitted the room | |
bc.signaling.bind( "onQuittedRoom", function( room ) { | |
// stop the local stream | |
bc.stopStream( localStream, function(){ | |
// remove the stream from the page | |
bc.detachStream( localStream ); | |
// show pane with id "pane_1" | |
showPanel( "pane_1" ); | |
} ); | |
} ); | |
// when a new remote stream is received | |
bc.streams.bind( "onStreamAdded", function ( remoteStream ) { | |
// insert the new remote stream into div#video_container node | |
bc.attachStream( remoteStream, q( "#video_container" ) ); | |
} ); | |
// when a remote stream has been stopped | |
bc.streams.bind( "onStreamClosed", function ( stream ) { | |
// remove the stream from the page | |
bc.detachStream( stream ); | |
} ); | |
// when a local stream cannot be retrieved | |
bc.streams.bind( "onStreamError", function( error ){ | |
switch( error.name ){ | |
case "PermissionDeniedError": | |
alert( "Webcam access has not been allowed" ); | |
bc.quitRoom( room ); | |
break | |
case "DevicesNotFoundError": | |
if( confirm( "No webcam/mic found on this machine. Process call anyway ?" ) ){ | |
// show pane with id "pane_2" | |
showPanel( "pane_2" ); | |
for ( var i=0, max=members.length; i<max; i++ ) { | |
// ... request a call | |
bc.call( members[ i ].id, room ); | |
} | |
} | |
else{ | |
bc.quitRoom( room ); | |
} | |
break | |
} | |
} ); | |
// bind function "joinConference" to button "Join Conference Room" | |
q( "#join" ).addEventListener( "click", joinConference ); | |
// bind function "quitConference" to button "Quit Conference Room" | |
q( "#quit" ).addEventListener( "click", quitConference ); | |
// open a new session on the server | |
bc.connect(); | |
} | |
// when button "Join Conference Room" has been clicked | |
function joinConference(){ | |
var roomToJoin = q( "#room_field" ).value; | |
// if "Conference Name" field is not empty ... | |
if( roomToJoin ){ | |
// ... join the room | |
bc.joinRoom( roomToJoin ); | |
} | |
else{ | |
// otherwise, display an alert | |
alert( "you must enter a room name !" ) | |
} | |
} | |
// when button "Quit Conference Room" has been clicked | |
function quitConference(){ | |
// quit the current conference room | |
bc.quitRoom( room ); | |
} | |
function showPanel( id ){ | |
var panes = document.querySelectorAll( ".pane" ); | |
// for all nodes matching the query ".pane" | |
for( var i=0, max=panes.length; i<max; i++ ){ | |
// hide all nodes except the one to show | |
panes[ i ].style.display = panes[ i ].id == id ? "block" : "none"; | |
}; | |
} | |
function q( query ){ | |
// return the DOM node matching the query | |
return document.querySelector( query ); | |
} | |
}//]]> | |
<\/script> | |
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/undefined"></head> | |
<body> | |
<div class="pane" id="pane_0" style="display: none;"> | |
<img src="http://static.tumblr.com/uzwqx7a/8VIm8jofz/logo.png"> | |
</div> | |
<input type="text" placeholder="Conference Name" id="room_field" class="form-control"><div class="pane" id="pane_1" style="display: block;"> | |
<br> | |
<input type="button" value="Join Conference Room" id="join" class="btn btn-info btn-default btn-block"> | |
</div> | |
<div class="pane" id="pane_2" style="display: none"> | |
<div id="video_container"></div> | |
<input type="button" value="Quit Conference Room" id="quit" class="btn btn-danger btn-default btn-block"> | |
</div> | |
<script> | |
// tell the embed parent frame the height of the content | |
if (window.parent && window.parent.parent){ | |
window.parent.parent.postMessage(["resultsFrame", { | |
height: document.body.getBoundingClientRect().height, | |
slug: "SjQ6T" | |
}], "*") | |
} | |
<\/script> | |
</body></html></script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment