我正在开发一个应用程序,用户可以使用前置/罕见的相机拍摄照片。它工作完美,但是当切换到前置摄像头/稀有 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, 0, 0, canvas.width, canvas.height);
});
// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});
</script>
如果您愿意,您还可以根据需要进行一些编辑,例如:
检查视频分辨率是否超过4k(3840x2160)。如果属实,请尝试缩小规模。