WebRTC getUserMedia

An example of a WebRTC getUserMedia implementation

by Vladimir Vershinin

HTML

<video id="videoLocal" autoplay width=200></video>
<div id="vinfo"></div>
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
<button onclick="test()">Test adapter.js</button>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

var streamObj = null;
var videoTag = document.getElementById('videoLocal');

function start() {
  var constraints = {
    audio: false,
    video: {
      width: {exact: 1280},
      height: {exact: 720}
    }
  };
  navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
      //Play the media stream in the video element
      streamObj = stream;
      videoTag.srcObject = stream;
      //video.play();
      logStream(stream);
      videoTag.addEventListener("loadedmetadata", function(e) {
        console.log('loadedmetadata');
      });
      videoTag.addEventListener("loadeddata", function(e) {
        console.log('loadeddata');
        update(vinfo, videoTag.videoWidth + " x " + videoTag.videoHeight);
      });
    })
    .catch(function(error) {
      if (error.name === 'ConstraintNotSatisfiedError') {
        console.error('The resolution ' + constraints.video.width.exact + 'x' +
          constraints.video.width.exact + ' px is not supported by your device.');
      } else if (error.name === 'PermissionDeniedError') {
        console.error('Permissions have not been granted to use your camera and ' +
          'microphone, you need to allow the page access to your devices in ' +
          'order for the demo to work.');
      } else {
        console.error('getUserMedia error: ' + error.name, error);
      }
    });
}

function logStream(stream) {
  var tracks = stream.getTracks();
  console.log('stream ID:', stream.id);
  for (var i = 0; i < tracks.length; i++) {
    console.log("track ID:", tracks[i].id, "track label:", tracks[i].label, "kind:", tracks[i].kind);
  }
}

function stop() {
  //streamObj.stop();
  var tracks = streamObj.getTracks();
  for (var i = 0; i < tracks.length; i++) {
    tracks[i].stop();
  }
  videoTag.srcObject = null; //set video tag src to null
}

function test() {
  console.log('adapter:', adapter);
  console.log('browserDetails:', adapter.browserDetails);
  console.log('extractVersion:',...