将不同的流分配给视频元素的`srcObject`

Question

我有一个video元素。我有streams抓取的多个navigator.getUserMedia。

我可以第一次成功分配srcObject：

previewVideoElement.srcObject = stream;

但是，如果我稍后将一个不同的流重新分配给srcObject（相同的元素），那么该流不起作用（没有错误，空白视频）。如何在不重新创建视频元素的情况下执行此操作？

编辑：尝试此操作也失败了：

const previewVideoElement = document.getElementById("new-device-preview");
previewVideoElement.pause();
previewVideoElement.srcObject = stream;
previewVideoElement.play();

编辑：调用此功能几次，但随后The play() request was interrupted by a call to pause()失败。如果没有pause，我会获得The play() request was interrupted by a new load request.。

previewVideoElement.pause();
previewVideoElement.srcObject = stream;
previewVideoElement.load();
previewVideoElement.play();

编辑：即使这堆垃圾也不起作用：

const previewVideoElement = document.getElementById("new-device-preview");
//previewVideoElement.pause();
previewVideoElement.srcObject = stream;
previewVideoElement.load();
const isPlaying = previewVideoElement.currentTime > 0 && !previewVideoElement.paused && !previewVideoElement.ended && previewVideoElement.readyState > 2;
if (!isPlaying)
    setTimeout(function () {
         previewVideoElement.play();
    }, 500);

我唯一可以可靠地工作：

var previewVideoElement = document.getElementById("new-device-preview");
if (previewVideoElement.srcObject) {
      $("#new-device-preview-container").empty();
      $("#new-device-preview-container").html('<video autoplay class="new-device-preview" id="new-device-preview"></video>')
}
previewVideoElement = document.getElementById("new-device-preview");
previewVideoElement.srcObject = stream;