javaScript调用电脑摄像头

xiaoxiao2021-02-28  2

<!DOCTYPE html> <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>web RTC 测试</title> <style> .booth { width:400px; background:#ccc; border: 10px solid #ddd; margin: 0 auto; } </style> </head> <body> <div class="booth"> <video id="video" width="400" height="300"></video> <button id='tack'> snap shot</button> <canvas id='canvas' width='400' height='300'></canvas> <img id='img' src=''> </div> <script> var video = document.getElementById('video'), canvas = document.getElementById('canvas'), snap = document.getElementById('tack'), img = document.getElementById('img'), vendorUrl = window.URL || window.webkitURL; //媒体对象 navigator.getMedia = navigator.getUserMedia || navagator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia({ video: true, //使用摄像头对象 audio: false //不适用音频 }, function(strem){ console.log(strem); video.src = vendorUrl.createObjectURL(strem); video.play(); }, function(error) { //error.code console.log(error); }); snap.addEventListener('click', function(){ //绘制canvas图形 canvas.getContext('2d').drawImage(video, 0, 0, 400, 300); //把canvas图像转为img图片 img.src = canvas.toDataURL("image/png"); }) </script> </body> </html>

在此记录主要方便自己 以后的使用

部分浏览器可能无法调用摄像头

需通过服务器调用 ,直接以文件形式无法打开

代码演示:https://bingxl.cn/webrtc.html(页面允许音频打开,可能会有噪音)

详情请查看 :

转载处:https://www.cnblogs.com/scarecrowlxb/p/6804747.html

转载请注明原文地址: https://www.6miu.com/read-2349985.html

最新回复(0)