在HTML5视频元素中设置WebRTC流有时不会显示图像并创建奇怪的构件

我正在制作一个小型的chatroulette克隆，其中实现了交换机摄像头功能。大多数时候它都有效，但有时我根本没有图像，包括整个页面上的奇怪的文物，而不仅仅是视频元素。在HTML5视频元素中设置WebRTC流有时不会显示图像并创建奇怪的构件

图片：https://i.gyazo.com/87d089807c17314ff79cda2e8eaea454.png

视频：https://drive.google.com/file/d/0B3h9E32u9L9aU0lZZ0l1bUd5bDQ/view

演示：https://codepen.io/grymer/pen/gxWzvw

有时，当我改变相机，即。重新设置video.srcObject，我根本没有图像，对角黑色线条在页面整体上变得可见。

这看起来像Chrome中的错误。我已经为一个有两个摄像头测试的人组合了一个小样本（我有一个真正的摄像头和一个virtual）。

编辑：更新了演示。我正在记录视频元素上的所有事件。当一切工作像预期的，我接受这些事件：

事件：清空
事件：loadstart
事件：durationchange
事件：等待loadedmetadata
事件：loadeddata
事件：canplay
event：canplaythrough

当我没有得到任何图像，这些事件已经执行：

事件：清空
事件：loadstart

那么，为什么它停止在loadstart？

这里是演示源代码： stackoverflow代码片段显然不能与webrtc一起使用。转到codepen链接

let deviceIds, currentDeviceId, 
 
    videoEl = document.getElementById('video'), 
 
    buttonEl = document.getElementById('button'); 
 

 
buttonEl.addEventListener('click',() => getUserMedia()) 
 
navigator.mediaDevices.enumerateDevices().then(devices => { 
 

 
    // get all video inputs 
 
    deviceIds = devices.filter(device => device.kind === 'videoinput').map(device => device.deviceId); 
 
    currentDeviceId = deviceIds.length > 0 ? 0 : -1; 
 
}).then(() => { 
 
    getUserMedia(); 
 
}); 
 

 
function getUserMedia() { 
 
    const constraints = { 
 
    audio: true, 
 
    video: { 
 
     deviceId: deviceIds[currentDeviceId] 
 
    } 
 
    }; 
 
    currentDeviceId = currentDeviceId === 0 ? 1 : 0; 
 
    navigator.mediaDevices.getUserMedia(constraints).then(stream => { 
 
    videoEl.srcObject = null; 
 
    videoEl.srcObject = stream; 
 
    }); 
 
}

body { 
 
    background: black; 
 
    color: white; 
 
}

<video id="video" width=200 height=200></video> 
 
<button id="button">change</button> 
 
<p>You need two webcams for this demo.</p>

来源

2017-08-09 Doodlemeat

添加'.catch（e =>控制台。错误（e））'给getUserMedia调用。可能该设备无法打开，如果我记得正确的结果TrackStartError –

您可能还想停止当前视频对象的所有轨道，即'videoEl.srcObject.getTracks.forEach（t => t.stop（））' –

@ PhilippHancke停止轨道似乎工作！将它添加为答案，我将其标记为正确。 – Doodlemeat

添加.catch(e => console.error(e))到getUserMedia通话。可能该设备无法打开，如果我记得正确的话会导致TrackStartError。

您可能还需要停止当前的视频对象中的所有曲目，即videoEl.srcObject.getTracks.forEach(t => t.stop())

避免过于频繁地打开设备。

来源

2017-08-10 11:53:20

在HTML5视频元素中设置WebRTC流有时不会显示图像并创建奇怪的构件

回答

相关问题