实例介绍
h5网页打开摄像头并截图
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<video id="video" width="480" height="320" autoplay></video>
<div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
<!-- <button id="open"> 开启摄像头 </button> -->
<button id="capture"> 截图 </button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
</body>
</html>
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript">
//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit内核浏览器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia){
//Firefox浏览器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
}
var video = document.getElementById("video");
var videoSelect = document.querySelector('select#videoSource');
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 获取设备摄像信息
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);
//成功的回调函数
function success(stream){
console.log('success');
window.stream = stream;
//兼容webkit内核浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
video.src = CompatibleURL.createObjectURL(stream);
//播放视频
video.play();
}
//异常的回调函数
function error(error){
console.log("访问用户媒体设备失败：",error.name,error.message);
}
function getStream(){
if (window.stream) {
window.stream.getTracks().forEach(function(track) {
track.stop();
})
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//调用用户媒体设备，访问摄像头
const constraints = {
audio: true,
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
frameRate: {
ideal: 10,
max: 15
},
deviceId: {exact: videoSelect.value}
}
};
console.log('获取视频流');
getUserMedia(constraints,success,error);
} else {
alert("你的浏览器不支持访问用户媒体设备");
}
}
function gotDevices(deviceInfos) {
console.log('deviceInfos')
console.log('deviceInfos:', deviceInfos);
for (let i = 0; i !== deviceInfos.length; i ) {
let deviceInfo = deviceInfos[i];
var option = document.createElement('option');
// console.log(deviceInfo)
if (deviceInfo.kind === 'videoinput') { // audiooutput , videoinput
option.value = deviceInfo.deviceId;
option.text = deviceInfo.label || 'camera ' (videoSelect.length 1);
videoSelect.appendChild(option);
}
}
}
function handleError(error) {
console.log('error:' , error)
}
videoSelect.onchange = getStream;
//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
//绘制画面
console.log('点击事件');
context.drawImage(video,0,0,480,320);
});
</script>
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论