重新连接网络摄像头时，WebRTC会继续播放视频流

Question

我有简单的视频流通过getUserMedia工作，但我想处理webCam我流式传输的情况变得断开或不可用。 所以我发现传递给successCallback函数的stream对象上的oninactive事件。 此外，我想在插入完全相同的webcam / mediaDevice时重新启动视频流。

代码示例：

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. 检查它是我从哪个设备传输的

Answer 1

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

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，您需要启用“实验性Web平台功能”标志。