JSFiddle - React, Tailwind, and code Playground

by andersb79

HTML

<div class="container" style="margin-top: 10px">
  <div class="row">
    <div class="col-sm-6">
      <p><button type="button" class="btn btn-lg btn-default" onclick="getStream('video')">Grab video</button></p>
      
      <video controls autoplay style="height:180px; width: 240px;"></video>
    </div>
    <div class="col-sm-6">
      <p><button type="button" class="btn btn-lg btn-default" onclick="getStream('audio')">Grab audio</button></p>
      
      <audio controls autoplay></audio>
    </div>
  </div>
</div>

JavaScript

function getUserMedia(options, successCallback, failureCallback) {
  var api = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
  if (api) {
    return api.bind(navigator)(options, successCallback, failureCallback);
  }
}

function getStream (type) {
  if (!navigator.getUserMedia && !navigator.webkitGetUserMedia &&
    !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
    alert('User Media API not supported.');
    return;
  }

  var constraints = {};
  constraints[type] = true;
  getUserMedia(constraints, function (stream) {
    var mediaControl = document.querySelector(type);
    if (navigator.mozGetUserMedia) {
      mediaControl.mozSrcObject = stream;
    } else {
      mediaControl.srcObject = stream;
      mediaControl.src = (window.URL || window.webkitURL).createObjectURL(stream);
    }
  }, function (err) {
    alert('Error: ' + err);
  });
}