<!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>
