Select device (webcam, mic) to use

Select a device to stream using bc.getMediaSources

by Dhanck

HTML

<script src="https://api.bistri.com/bistri.conference.min.js"></script>
<div class="container">
<label for="audioDevices">Select audio device</label>
<select id="audioDevices">
  <option value="none">None</option>
</select>
<br/>
<label for="videoDevices">Select video device</label>
<select id="videoDevices">
  <option value="none">None</option>
</select>

<p></p>
</div>

CSS

.container{
  
}

JavaScript

onBistriConferenceReady = function ()
{
    if ( !bc.isCompatible() )
    {
        alert( "your browser is not WebRTC compatible !" );
        return;
    }

    var selectAudio = document.querySelector ( '#audioDevices' ),
    		selectVideo = document.querySelector ( '#videoDevices' ),
    		div         = document.querySelector ( 'p' ),
    		localStream = null;
    
    bc.init( {
				appId: "38077edb",
				appKey: "4f304359baa6d0fd1f9106aaeb116f33"
    } ); 

    bc.signaling.bind( "onConnected", function ()
    {
    		bc.getMediaSources ( function ( devices )
      	{
      			devices.forEach ( function ( device )
        		{
        				if ( device.kind.indexOf ( 'input' ) != -1 )
          			{
            				var option = document.createElement ( 'option' );

            				option.value = device.deviceId;
            				option.innerText = device.label;
            				option.setAttribute ( 'data-kind', device.kind );
            
            				if ( device.kind.indexOf ( 'audio' ) == 0 )
            				{
            						selectAudio.appendChild ( option );
            				}
            				else
            				{
            						selectVideo.appendChild ( option );
            				}
          			}
       			} );
    		} );
   	} );
    
    var getConstraints = function ( type )
    {
    		var deviceId;
 
    		switch ( type )
        {
        		case 'audio':
            		deviceId = selectAudio.value;
            		break;
        		case 'video':
            		deviceId = selectVideo.value;
            		break;
        } 
        return deviceId == 'none' ? false : { optional: [ { sourceId: deviceId } ] };
    }
      
    var onDeviceChange = function ()
    {
				var deviceId    = this.value,
        		constraints = {
          			video: getConstraints ( 'video' ),
            	  audio: getConstraints ( 'audio' )
        		};
      
    		if ( localStream )
      	{
      			bc.stopStream ( localStream, function () {
        			bc.detachStream (...