切换前置罕见摄像头时,HTML5 视频元素请求将永远处于待处理状态(在移动设备上的 chrome 上) [英] HTML5 video element request stay pending forever (on chrome in mobile) when toggle over front-rare camera
问题描述
我正在开发一款应用,让用户可以使用前置/稀有摄像头拍摄照片.它工作得很好,但是当切换相机前/罕见 var playPromise = videoStream.play() 时,它处于挂起状态.有时承诺得到解决,相机有时不工作.
<块引用>此问题仅在 chrome 浏览器中出现,在 mozila 和 firefox 中没有
<块引用>
试试 {停止网络摄像头();//切换相机时停止媒体流流 = 等待 navigator.mediaDevices.getUserMedia({video: true});/* 使用流 */让 videoStream = document.getElementById('captureCandidateId');videoStream.srcObject = 流;//videoStream.play();var playPromise = videoStream.play();如果(播放承诺!== 未定义){playPromise.then(_ => {//自动播放开始!//显示正在播放的 UI.}).catch(错误=> {//自动播放被阻止//显示暂停的 UI.});}};} 抓住(错误){/* 处理错误 */console.log(err.name + ": " + err.message);}
<块引用>
let stopWebCam = function (pictureType) {setTimeout(()=>{让 videoStream = document.getElementById('captureCandidateId');const 流 = videoStream.srcObject;如果(流&&stream.getTracks){const track = stream.getTracks();轨道.forEach(功能(轨道){track.stop();});}videoStream.srcObject = null;}, 0)}
在这里,我为你起草了一段代码,这比你想要做的更简单、更小.我只是从视频元素中获取流并将其绘制到画布上.图片可以右键下载.注意:示例在 StackOverflow 中不起作用
如果你愿意,你也可以根据自己的需要进行一些编辑,比如:
- 选择要使用的相机
- 隐藏视频流
- 添加一种更简单的方法在您的设备上下载照片
- 如果您有照片,您还可以添加将照片直接上传到服务器的功能
I'm developing an app where users can capture photo using a front/rare camera. it working perfectly but when toggle over camera front/rare var playPromise = videoStream.play() is gone in pending state. some times promise get resolve, the camera is working sometimes not.
this issue occurs only in chrome browser not in mozila and 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) }
Here, I drafted a piece of code for you, this is much more simple and smaller approach than what you are trying to do. I am just taking the stream from the video element and drawing it to canvas. Image can be downloaded by right clicking. NOTE: Example does not work in 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>
If you want, you can also make some edits according to your needs, like:
- Choose which camera to use
- Hide the video stream
- Add a easier method to download the photo on your device
- You can also add a functionality to upload the photo straight to the server if you have one
这篇关于切换前置罕见摄像头时,HTML5 视频元素请求将永远处于待处理状态(在移动设备上的 chrome 上)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!