JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="video"><video></video></div>
<label for="video">
    <span>Video Sources:</span>
    <select id="video"></select>
</label>
<label for="audio">
    <span>Audio Sources:</span>
    <select id="audio"></select>
</label>
<button class="start">Start Stream</button>
<button class="stop">Stop Stream</button>

CSS

body {
    font: 14px/18px sans-serif;
    color: #333;
}
.video {
    background: black;
    width: 100%;
    height: 0;
    padding: 56.25% 0 0 0;
    position: relative;
}

video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

label, button {
    width: 100%;
    padding: 15px;
    display: block;
    border: 1px solid #efefef;
}

label {
    clear: both;
    border-bottom: none;
}

button {
    float: left;
    text-align: center;
    border: none;
    color: white;
    width: 50%;
}
button:hover {
    cursor: pointer;
}
.start {
    background: green;   
}
.stop {
    background: red;   
}

JavaScript

// ------------------------------------
// Polyfills
// ------------------------------------

MediaStreamTrack = ( typeof MediaStreamTrack === 'undefined' || typeof MediaStreamTrack.getSources === 'undefined' ) ? null : MediaStreamTrack;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

// ------------------------------------
// Setup
// ------------------------------------

var feed = null;
var video = document.querySelector( 'video' );
var startButton = document.querySelector( '.start' );
var stopButton = document.querySelector( '.stop' );
var videoSelect = document.querySelector( '#video' );
var audioSelect = document.querySelector( '#audio' );

// Stream successs handler
var success = function ( stream ) {

    // Store stream reference
    feed = stream;
	if ( 'mozSrcObject' in video ) {
    	video.mozSrcObject = feed;
  	} else if ( window.URL ) {
    	video.src = window.URL.createObjectURL( feed );
  	} else {
    	video.src = feed;
	}	
	video.play();
};

// Stream error handler
var error = function ( err ) {

    console.log( err );

};

// Start stream handler
var startStream = function () {

    if ( navigator.getUserMedia ) {

        // Define Video/Audio Constraints
        var constraints = { 
            video: { optional: [ { sourceId: videoSelect.value } ] },
            audio: { optional: [ { sourceId: audioSelect.value } ] }
        };

        // Ask for access to start
        navigator.getUserMedia( constraints, success, error );

    }
};

// Handle stopping the stream
var stopStream = function () {

    feed.getVideoTracks()[ 0 ].stop();
    feed.getAudioTracks()[ 0 ].stop();  

};

// ------------------------------------
// Setup Video/Audio Dropdowns
// ------------------------------------

if ( MediaStreamTrack ) {

    // Get sources
    MediaStreamTrack.getSources( function ( sources ) {
        sources.forEach( function ( source ) {
            
            var option =...