码迷,mamicode.com
首页 > Web开发 > 详细

web调用摄像头拍照

时间:2020-06-28 14:57:59      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:支持   拍照   isp   ice   getc   constrain   img   one   lse   

`<!doctype html>

拍照

<canvas id="canvas" style="display:none;"></canvas>
<script>


    !(function () {
	
	function takePhotos() {
            if (videoPlaying) {
                let canvas = document.getElementById(‘canvas‘);
                canvas.width = v.videoWidth;
                canvas.height = v.videoHeight;
                canvas.getContext(‘2d‘).drawImage(v, 0, 0);
                let data = canvas.toDataURL(‘image/webp‘);
				//base64
				//console.log(data);
				//保存图片
				
                //document.getElementById(‘photo‘).setAttribute(‘src‘, data);
				document.getElementById(‘imgList‘).innerHTML += ‘<img data-pro="img" src="‘ + data + ‘" id="photo" alt="" style="width:70px;height:60px;">‘;
            }
        }
		
			document.onkeydown = function (e) { // 回车提交表单
            document.getElementById(‘take‘).blur();

// 兼容FF和IE和Opera
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
takePhotos();
}
}

        // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先,如果有getUserMedia的话,就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error(‘getUserMedia is not implemented in this browser‘));
                }

                // 否则,为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        const constraints = {
            video: true,
            audio: false
        };
        let videoPlaying = false;
        let v = document.getElementById(‘v‘);
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(stream => {
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in v) {
                v.srcObject = stream;
            } else {
                // 防止再新的浏览器里使用它,应为它已经不再支持了
                v.src = window.URL.createObjectURL(stream);
            }
            v.onloadedmetadata = function (e) {
                v.play();
                videoPlaying = true;
            };
        }).catch(err => {
            console.error(err.name + ": " + err.message);
        })
        document.getElementById(‘take‘).addEventListener(‘click‘, takePhotos, false);
    })();
</script>
` 参考了:https://blog.csdn.net/weixin_34100227/article/details/88016462

web调用摄像头拍照

标签:支持   拍照   isp   ice   getc   constrain   img   one   lse   

原文地址:https://www.cnblogs.com/Jerrycjc/p/13202552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!