H5调用手机的前后摄像头,canvas显示,自带截图,兼容ios和android
注意1.下面的HTML需要在HTTPS下访问方可正常工作,对应的localhost或者本地地址访问不能支持;2. facingMode: { exact: 'environment' } // -- 后置facingMode: 'user ' // -- 前置3. 如果你想在已经播放视频的情况下更换摄像机,你需要先停止当前的视频流,然后再将其替换成另一台摄像机的视频流。videoStream.ge
·
注意
1.下面的HTML需要在HTTPS下访问方可正常工作,对应的localhost或者本地地址访问不能支持;
2. facingMode: { exact: 'environment' } // -- 后置
facingMode: 'user ' // -- 前置
3. 如果你想在已经播放视频的情况下更换摄像机,你需要先停止当前的视频流,然后再将其替换成另一台摄像机的视频流。videoStream.getTracks().forEach((track) => { track.stop(); });
4. 视频流的获取必须授权,pc上禁止后不会再次弹出授权的,需要手动开启;
5. 下面代码直接粘贴可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
</head>
<body>
<!-- video 标签中的自动播放属性 autoplay,没有它,你需要调用 video.play() 才能真正开始显示图像 -->
<video autoplay id="video" controls="controls"></video>
<canvas id="canvas"></canvas>
<div id="imageData"></div>
<button onclick="playPause()">播放/暂停</button>
<button onclick="screenshot()">截图</button>
<button onclick="useFrontCamera = !useFrontCamera , switchDirection()">切换</button>
</body>
<script>
// JavaScript访问设备前后摄像头
const constraints = { // 初始值
video: {
width: {
min: 300,
ideal: 1920,
max: 500
},
height: {
min: 250,
ideal: 1080,
max: 400
},
facingMode: { exact: 'environment' } // user -- 前置 、environment -- 后置
} // 流以正确的宽度和高度比例进入,如果它是处于纵向模式的手机,则需要进行尺寸反转
};
const myVideo = document.querySelector('#video');
let videoStream = null; // 视频流对象
let useFrontCamera = true; // 前置摄像头
if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) { // 检查浏览器是否支持此API
switchDirection(); // 浏览器支持
} else {
console.log('暂不支持');
}
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
// 绘制canvas画布、获取data
function screenshot() {
canvas.width = myVideo.videoWidth;
canvas.height = myVideo.videoHeight;
canvas.getContext('2d').drawImage(myVideo, 0, 0);
const img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
let divImage = document.getElementById('#imageID');
divImage.appendChild(img);
}
// 你想在已经播放视频的情况下更换摄像机的前后摄像头,需要先停止当前的前置或者后置的视频流,再将其替换成摄像机的前置或者后置的视频流。
async function switchDirection() {
if (videoStream) {
videoStream.getTracks().forEach((track) => {
track.stop();
});
}
constraints.video.facingMode = useFrontCamera ? 'user' : { exact: 'environment' };
try {
videoStream = await navigator.mediaDevices.getUserMedia(constraints); // 调用将询问用户是否允许访问摄像机。如果用户拒绝,它将引发异常并且不返回流。因此,必须在 try/catch 块内处理这种情况,它返回一个Promise,必须使用 async/await 或 then 块
myVideo.srcObject = videoStream;
} catch (error) {
console.log(error)
}
}
</script>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)