重新连接网络摄像头时，WebRTC 继续视频流答案

【问题标题】：WebRTC continue video stream when webcam is reconnected重新连接网络摄像头时，WebRTC 继续视频流
【发布时间】：2015-09-03 09:43:28
【问题描述】：

我有通过getUserMedia 工作的简单视频流，但我想处理当我从中流式传输的网络摄像头断开连接或不可用的情况。所以我在stream 对象上发现oninactive 事件传递给successCallback 函数。我还想在插入完全相同的网络摄像头/媒体设备时重新启动视频流。

代码示例：

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 () {});

根据上面的例子我可以：

检测最近连接的媒体设备
检查是否与我正在流式传输的设备相同

【问题讨论】：

标签： javascript html video webrtc getusermedia

【解决方案1】：

更好的方法是使用MediaDevices.ondevicechange()，如该线程的另一个答案中所述，但它仍然落后于 Chrome 上的标志。不要使用ondevicechange() 来枚举设备，而是在您开始呼叫时定期轮询MediaDevices.enumerateDevices()，在每个轮询间隔结束时比较您从上次轮询中的设备获得的设备列表。这样您就可以知道通话过程中添加/删除的新设备。

【讨论】：

【解决方案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对象的类型描述为here

浏览器支持 在写这篇文章时，它看起来很不完整。请参阅此相关问题：Audio devices plugin and plugout event on chrome browser 以进行进一步讨论，但简短的故事是对于 Chrome，您需要启用“实验性 Web 平台功能”标志。

【讨论】：