调用本地摄像头实现拍照拍照截取照片 jqjs 、 vue

vue实现方式如下：

原文链接：vue调用本地摄像头实现拍照_浩星-CSDN博客_vue调用摄像头拍照

jqjs实现方式如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<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>

<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>
</html>

 

posted @ 2021-07-05 17:17  塞巴斯酱  阅读(551)  评论(0)  编辑  收藏  举报