JSFiddle - React, Tailwind, and code Playground

by dsbonev

HTML

<video autoplay>
</video>
<button type="button">Stop</button>
<div id="info"></div>

<script>
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e});for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return x(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var...

JavaScript

(function webRTC(window) {
    "use strict";
    (function localMediaStream(window) {
        var infoNode = document.querySelector('#info'),
            getUserMedia = Modernizr.prefixed('getUserMedia', navigator),
            video = document.querySelector('video'),
            button = document.querySelector('button'),
            hollaback = function(stream) {                
                console.dir(stream);
                video.src = URL.createObjectURL(stream);
                var info = [];
                var newLine = '<br />';
                var audioTracks = stream.audioTracks;
                
                info.push('Audio:' + newLine);
                for (var i = 0; i < audioTracks.length; i += 1) {
                    info.push(i + ': ' + audioTracks[i].label + newLine);               
                };
                info.push(newLine);
                
                var videoTracks = stream.videoTracks;
                
                info.push('Video:' + newLine);
                for (var i = 0; i < videoTracks.length; i += 1) {
                    info.push(i + ': ' + videoTracks[i].label + newLine);               
                };
                infoNode.innerHTML = info.join('');
                button.addEventListener('click', function stopStream(event) {
                    stream.stop();
                }, false);
            },
            errback = function(error) {
                document.body.innerHTML = '<h1>Something went wrong!(' + error.code + ')</h1>';
            };
        
        if (getUserMedia) {
            getUserMedia({ video: true, audio: false }, hollaback, errback);
        } else {
            infoNode.innerHTML = '<h1>Your browser is not supported!</h1>';
        }

    }(window));
    
    (function remoteMediaStream() {
    
    }());
}(window));