Screen-sharing broadcast + chat

Viewer side

by bistri

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://api.bistri.com/bistri.conference-3.2.1.js"></script>
    <div class="pane" id="pane_1">
        <input type="text" placeholder="User name" id="nick_field" class="form-control">
        <br>
        <input type="button" value="Connect as viewer" id="nick" class="btn btn-info btn-default btn-block">
    </div>
   
    <div class="pane" id="pane_2" style="display: none">
        <div id="remote-video"></div>
        <div id="messages_container"></div>
        <p>
            <input type="text" placeholder="Message" id="message_field" class="form-control">
        </p>
        <input type="button" value="Send Message" id="send" class="btn btn-success btn-default btn-block">
        <input type="button" value="Quit" id="quit" class="btn btn-danger btn-default btn-block">
    </div>

CSS

.pane {
    margin: 20px;
    text-align: center;
}

.message {
    text-align: left;
}

#messages_container {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #dedede;
    padding: 10px;
	  margin-top: 12px;
    margin-bottom: 2px;
}

video {
    width: 100%;
}

#remote-video  {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background-color: #c0c0c0;
}

JavaScript

/*
    JS library reference:
    http://developers.bistri.com/webrtc-sdk/js-library-reference
*/

var room = "_broadcast_test_chat";
var localStream;
var users = {};
var dataChannels = {};

onBistriConferenceReady = function ()
{
	if ( !bc.isCompatible() )
	{
  	alert ( "your browser is not WebRTC compatible !" );
    return;
  }
   
  bc.signaling.bind ( "onError", function ()
	{
    alert ( error.text + " (" + error.code + ")" );
  } );

  bc.signaling.bind ( "onConnected", function ()
	{
  	bc.joinRoom( room );
  } );

  bc.signaling.bind( "onJoinedRoom", function ( data )
	{
	  if ( isAudioRoom ( data.room ) )
    {
			showPanel( "pane_2" );

			data.members.forEach ( function ( member )
			{
				users[ member.id ] = member.name;
			} );
	  }
    else
    {
      bc.joinRoom( data.room + '__audio' );
    }
  } );

  bc.signaling.bind ( "onJoinRoomError", function ( error )
	{
    alert( error.text + " (" + error.code + ")" );
  } );
       
  bc.signaling.bind( "onQuittedRoom", function ( data )
	{
		if ( isAudioRoom ( data.room ) )
    {
			q( "#messages_container" ).innerHTML = "";

			showPanel( "pane_1" );

			bc.disconnect ();
	  }
		else
		{
      bc.quitRoom ( room + '__audio' );
		}
	} );
	
	bc.signaling.bind ( "onPeerJoinedRoom", function ( data )
  {
		users[ data.pid ] = data.name;
	} );
    
  bc.signaling.bind ( "onPeerQuittedRoom", function ( data )
  {
		delete users[ data.pid ];
  } );

  bc.streams.bind ( "onStreamAdded", function ( stream, pid )
  {
		bc.attachStream ( stream, q( "#remote-video" ), { fullscreen: true } );
  } );

  bc.streams.bind ( "onStreamClosed", function ( stream, pid )
  {
		bc.detachStream ( stream );
  } );
    
  bc.channels.bind ( "onDataChannelCreated", onDataChannel ); 
  bc.channels.bind ( "onDataChannelRequested", onDataChannel );

  q( "#nick" ).addEventListener ( "click", setNickname );
  q( "#quit" ).addEventListener ( "click", quitChatRoom );
  q( "#send" ).addEventListener ( "click", sendChatMessage...