这篇文章主要介绍了js实现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>感谢你能够认真阅读完这篇文章，希望小编分享的“js实现web调用摄像头的方法”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
