WebRTC在网络摄像头重新连接时如何继续视频流？

Question

我已经通过getUserMedia实现了简单的视频流，但我希望处理当我正在流传的网络摄像头断开或不可用时的情况。因此，我在传递给successCallback函数的stream对象上找到了oninactive事件。并且我想在完全相同的网络摄像头/媒体设备插入时重新启动视频流。

代码示例：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.getUserMedia(constrains, function successCallback(stream) {
        this.video.src = URL.createObjectURL(stream);
        stream.oninactive = function (error) {
            //this handler runs when device becomes unavailable.
            this.onStreamInactive(error, stream);
        }.bind(this);
    }.bind(this), function errorCallback () {});

根据上面的例子，我该如何：

1. 检测最近连接的媒体设备
2. 检查它是否是我正在流媒体的同一设备

- Nodarii

Answer 1

更好的方法是使用另一个答案中提到的MediaDevices.ondevicechange()，但在Chrome上仍然需要打开标志。不要使用ondevicechange()枚举设备，而是在开始通话时定期轮询MediaDevices.enumerateDevices()，在每个轮询间隔结束时将获取的设备列表与上一次轮询中的设备进行比较。这样可以知道通话过程中新增或删除的设备。

- prerak

Answer 2

有点晚回答，但看起来你可以使用 MediaDevices.ondevicechange 来附加事件处理程序，然后在事件处理程序中查询 MediaDevices.enumerateDevices() 以获取完整列表。然后您检查设备列表，通过与您缓存的列表进行比较并将属性与当前设备的属性记录进行比较，以识别最近添加的设备。链接提供了更详细的示例。

改编自 ondevicechange 参考页面

navigator.mediaDevices.ondevicechange = function(event) {
  navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
      devices.forEach(function(device) {
        console.log(device);
        // check if this is the device that was disconnected
      });
    });
}

请注意，enumerateDevices 返回的device对象类型在 这里 描述。 浏览器支持 截至撰写本文时，浏览器支持情况似乎相当不稳定。有关更多讨论，请参见此相关问题：chrome浏览器上的音频设备插入/拔出事件插件，但简短的故事是您需要启用“实验性网络平台功能”标志才能在Chrome中使用。

- alexanderbird