问题描述
我正在开发一款应用,让用户可以使用前置/稀有摄像头拍摄照片。它工作得很好,但是当切换相机前/罕见 var playPromise = videoStream.play() 时,它处于挂起状态。有时承诺得到解决,相机有时不工作。
此问题仅在 chrome 浏览器中出现,在 mozila 和 firefox 中没有
try {
stopWebCam(); // stop media stream when toggle over camera
stream = await navigator.mediaDevices.getUserMedia({video: true});
/* use the stream */
let videoStream = document.getElementById('captureCandidateId');
videoStream.srcObject = stream;
// videoStream.play();
var playPromise = videoStream.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
};
} catch(err) {
/* handle the error */
console.log(err.name + ": " + err.message);
}
let stopWebCam = function (pictureType) {
setTimeout(()=>{
let videoStream = document.getElementById('captureCandidateId');
const stream = videoStream.srcObject;
if (stream && stream.getTracks) {
const tracks = stream.getTracks();
tracks.forEach(function(track) {
track.stop();
});
}
videoStream.srcObject = null;
},0)
}
解决方法
在这里,我为您起草了一段代码,这比您尝试做的要简单得多,也更小。我只是从视频元素中获取流并将其绘制到画布上。图片可以右键下载。 注意:示例在 StackOverflow 中不起作用
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<script>
const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
const constraints = {
video: true,};
captureButton.addEventListener('click',() => {
// Draw the video frame to the canvas.
context.drawImage(player,canvas.width,canvas.height);
});
// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});
</script>
如果你愿意,你也可以根据自己的需要进行一些编辑,比如:
- 选择要使用的相机
- 隐藏视频流
- 添加一种更简单的方法在您的设备上下载照片
- 如果您有照片,您还可以添加将照片直接上传到服务器的功能