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）。是否有可能利用knockout来显示动态媒体流？

Answer 1

使用computeds显示视频流

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

这将添加到您的模型中，其中stream属性为：

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事件。这是加载过程开始的时候。

重构代码，因此它在一个地方并且计算后如果更改仍会更新流。

Haven没有对此进行过测试，但理论上这也应该有效，因此所有淘汰赛都是如此：

 <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);

使用Knockout显示MediaStream

1 个答案: