JSFiddle - React, Tailwind, and code Playground

by bistri

HTML

<script src="https://api.bistri.com/bistri.conference-3.3.3.js"></script>
<canvas class="d-none"></canvas>

CSS

.d-none {
  display: none;
}

video {
  height: 225px;
  width: 225px;
}

JavaScript

var canvasRefresh, localStream,
	  imageUrl = "https://image.shutterstock.com/image-vector/webcam-icon-vector-illustration-design-600w-1848755524.jpg";

function startFakeStream ( callback ) {
	var stream,
			canvas = document.querySelector ( 'canvas' ),
			ctx = canvas.getContext ( '2d' ),
			image = new Image ();

  image.onload = () => {
  
    canvasRefresh = setInterval ( () => {
      ctx.drawImage ( image, 0, 0 );
    }, 1000/12 );

    stream = canvas.captureStream ( 12 );

    stream.type = "video";
    stream.localStream = true;

		callback ( stream );
	};
  
  image.src = imageUrl;
}

function stopFakeStream ()
{
  if ( canvasRefresh )
  {
    clearInterval ( canvasRefresh );
  }
}

onBistriConferenceReady = () =>
{  
	bc.init ( {
		appId: "38077edb",
		appKey: "4f304359baa6d0fd1f9106aaeb116f33",
		debug: true
	} );

	bc.signaling.bind( "onConnected", () => {
		bc.joinRoom ( "conference_demo" );
	} );

	bc.signaling.bind( "onJoinedRoom", data => {
  
    startFakeStream ( fakeStream => {

    	localStream = fakeStream;
    
      bc.attachStream ( localStream, document.body );

      /*data.members.forEach ( member =>
      {
        bc.call ( member.id, data.room, { stream: localStream, mirror: true } );
      } );*/
     } );
	} );
 
 	bc.signaling.bind ( "onPeerQuittedRoom", data => {
  	bc.detachStream ( localStream ); 
		stopFakeStream ();
	} );

	bc.streams.bind ( "onStreamAdded", remoteStream => {
		bc.attachStream ( remoteStream, document.body );
	} );

	bc.streams.bind ( "onStreamClosed", stream => {
		bc.detachStream ( stream );
	} );

	bc.connect ();
}