html5 media api

[uniquejava]

关键词: navigator.getUserMedia

ios的 WKWebView未实现该接口。

Article

https://www.arungudelli.com/html5/html5-getusermedia/ https://blog.addpipe.com/audio-constraints-getusermedia/

html5示例代码

  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var image = document.querySelector('img');
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  window.URL = window.URL || window.webkitURL;

  function snapshot() {
      var cw = video.clientWidth;
      var ch = video.clientHeight;
      ctx.drawImage(video, 0, 0, cw, ch, 0, 0, cw / 2, ch / 3);
      image.src = canvas.toDataURL();
      image.height = ch;
      image.width = cw;
  }

  video.addEventListener('click', snapshot, false);

if (navigator.getUserMedia) {
    navigator.getUserMedia({ video: true,audio:true},
      function(stream) {
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occured: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}