本文介绍了如何使用JavaScript在Web页面中调用用户摄像头，并通过Canvas元素实时截取视频帧。代码包含打开、关闭及截取画面的按钮交互，利用navigator.mediaDevices获取媒体流，并将视频画面绘制到Canvas上，适用于需要视频快照功能的场景。
JS调用摄像头并截取视频画面
本文分享了一段使用JavaScript实现Web端调用摄像头并截取视频画面的完整代码，供读者参考学习。
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>以上是本文介绍的全部内容，希望这段代码能对读者的学习有所帮助，同时也欢迎大家继续支持本站获取更多技术资源。