Skip to content

Instantly share code, notes, and snippets.

@chintamanand
Created June 26, 2017 12:46
Show Gist options
  • Save chintamanand/28533c1851ea8d4e9121d6c7b9280c3c to your computer and use it in GitHub Desktop.
Save chintamanand/28533c1851ea8d4e9121d6c7b9280c3c to your computer and use it in GitHub Desktop.
WebRTC Video Conference Demo // source https://jsbin.com/jifituk
<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