WebRTC Renego

Mnimalistic conference built on top of Bistri WebRTC API

by bistri

HTML

<script src="https://cdn.jsdelivr.net/gh/bistri/bistri-conference-js/dist/bistri.conference-3.5.1.js"></script>
<div></div>
<button id="switch">Switch</button>
<button id="toggle">Toggle</button>
<button id="stop">Stop</button>

CSS

video {
    width: 320px;
}

JavaScript

let localStream,
  	  room = "v3-4-0";
    
  bc.init( {
    appId: "38077edb",
    appKey: "4f304359baa6d0fd1f9106aaeb116f33",
    debug: true
  } );

  bc.signaling.bind( "onConnected", () =>
	{
    bc.startStream ( { audio: true }, stream =>
    {
    	localStream = stream;

      bc.attachStream ( stream, document.body );
      bc.joinRoom ( room );
    } );
  } );

  bc.signaling.bind( "onJoinedRoom", result =>
  {
		result.members.forEach ( member =>
    {
    	bc.call ( member.id, result.room, { stream: localStream } );
    } );
  } );

	bc.streams.bind ( "onStreamAdded", remoteStream =>
  {
		bc.attachStream ( remoteStream, document.querySelector ( "div" ) );
 	});
  
	bc.streams.bind ( "onStreamUpdated", remoteStream =>
  {
		bc.updateStream ( remoteStream );
 	});
 
	bc.streams.bind ( "onStreamClosed", function ( stream )
  {
		bc.detachStream( stream );
  } );

 	document.querySelector ( "#switch" ).addEventListener ( "click", e =>
  {
      bc.startStream ( {
        video: {
        	aspectRatio: 4/3,
          width: { ideal: 320 },
          height: { ideal: 240 }/*,
          frameRate: { min: 1, max: 15 }*/
        }
      }, newStream =>
      { 
        bc.copyStreamTracks ( newStream, localStream );
      	bc.updateStream ( localStream, { mirror: true } );
        bc.getRoomMembers ( room ).forEach ( member =>
        {
        	bc.updateCall (  member.id, room, { stream: localStream } );
        } );
      } );
    } );

  
  document.querySelector ( "#toggle" ).addEventListener ( "click", e =>
  {
 		bc.toggleVideo ( localStream );
  } );
  
  document.querySelector ( "#stop" ).addEventListener ( "click", e =>
  {
  	bc.quitRoom ( room );
  } );
 
  bc.connect ();