构建小程序流程商城_js完成web调用摄像头 js截取

js实现web调用摄像头 js截取视频画面       这篇文章主要为大家详细介绍了JS web调用摄像头，截取视频画面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

Html

 button 打开 /button 
 button 关闭 /button 
 button 截取 /button 
 video id="video" /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"
 // 回调
 essFunc(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).essFunc).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 

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