使用 Knockout 显示 MediaStream

Question

我正在处理媒体流 - https://developer.mozilla.org/en-US/docs/Web/API/MediaStream。

我正在尝试以下方法：

<video data-bind="attr: {src: displayedDeviceSession().stream()}"></video>

但是视频没有显示。我看到了这个：

<video data-bind="attr: {src: displayedDeviceSession().stream()}" src="[object MediaStream]"></video>

我也试过 srcObject 属性无济于事（https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject）。是否可以利用挖空显示动态媒体流？

Answer 1

使用计算来显示视频流

 <video id="displayedDeviceSessionVideo"></video>

这被添加到流属性所在的模型中：

self.stream = ko.observable();

self.streamWatch = ko.computed(function () {
    var video = document.getElementById("displayedDeviceSessionVideo");
    if (self.stream() != null) {
        // Start Stream
        video.srcObject = self.stream();

    } else {
       // Stop
    }
}, self);

我相信你所做的是正确的，但复杂的内联html，因此在js模型本身中使用knockout的力量。

如果视频最初没有渲染，那么为什么不使用<video onloadstart="loadStream()">

function loadStream() {
    var video = document.getElementById("displayedDeviceSessionVideo");
    if (viewModel.stream() != null) {
        // Start Stream
        video.srcObject = viewModel.stream();

    } else {
       // Stop
    }
}

当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。这是加载过程开始的时候。

重构代码，使其在一处并计算后仍会在更改时更新流。

尚未对此进行测试，但理论上这也应该有效，因此所有淘汰赛：

 <video data-bind="event: { onloadstart: loadStream }">

型号：

self.stream = ko.observable();

self.loadStream = function () {
    var video = document.getElementById("displayedDeviceSessionVideo");
    if (self.stream() != null) {
        // Start Stream
        video.srcObject = self.stream();
     } else {
       // Stop
     }
}

self.streamWatch = ko.computed(function () {
    var stream = self.stream();
    self.loadStream();
}, self);