js实现web调用摄像头 js截取视频画面

本文实例为大家分享了js实现截取视频画面的具体代码，供大家参考，具体内容如下 html

本文实例为大家分享了js实现截取视频画面的具体代码，供大家参考，具体内容如下

html

<p>
 <button onclick="openmedia()">打开</button>
 <button onclick="closemedia()">关闭</button>
 <button onclick="drawmedia()">截取</button>
</p>
<video id="video" class="bg"></video>
<canvas id="qr-canvas"></canvas>

javascript

<script type="text/javascript">
 var video = document.queryselector('video');
 var text = document.getelementbyid('text');
 var canvas1 = document.getelementbyid('qr-canvas');
 var context1 = canvas1.getcontext('2d');
 var mediastreamtrack;

 // 一堆兼容代码
 window.url = (window.url || window.webkiturl || window.mozurl || window.msurl);
 if (navigator.mediadevices === undefined) {
 navigator.mediadevices = {};
 }
 if (navigator.mediadevices.getusermedia === undefined) {
 navigator.mediadevices.getusermedia = function(constraints) {
  var getusermedia = navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia;
  if (!getusermedia) {
  return promise.reject(new error('getusermedia is not implemented in this browser'));
  }
  return new promise(function(resolve, reject) {
  getusermedia.call(navigator, constraints, resolve, reject);
  });
 }
 } 

 //摄像头调用配置
 var mediaopts = {
 audio: false,
 video: true,
 video: { facingmode: "environment"} // 或者 "user"
 // video: { width: 1280, height: 720 }
 // video: { facingmode: { exact: "environment" } }// 或者 "user"
 }

 // 回调
 function successfunc(stream) {
 mediastreamtrack = stream;
 video = document.queryselector('video');
 if ("srcobject" in video) {
  video.srcobject = stream
 } else {
  video.src = window.url && window.url.createobjecturl(stream) || stream
 }
 video.play();
 }
 function errorfunc(err) {
 alert(err.name);
 }

 // 正式启动摄像头
 function openmedia(){
 navigator.mediadevices.getusermedia(mediaopts).then(successfunc).catch(errorfunc);
 }

 //关闭摄像头
 function closemedia(){
 mediastreamtrack.getvideotracks().foreach(function (track) {
  track.stop();
  context1.clearrect(0, 0,context1.width, context1.height);//清除画布
 });
 }

 //截取视频
 function drawmedia(){
 canvas1.setattribute("width", video.videowidth);
 canvas1.setattribute("height", video.videoheight);
 context1.drawimage(video, 0, 0, video.videowidth, video.videoheight);
 }

</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。