ノックアウトでMediaStreamを表示

Question

私はメディアストリーム - https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamで作業しています。

私は次のことをしようとしている：

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

映像が表示されませんが。私も無駄（https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject）にsrcObject属性を試してみた

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

：私はこれを参照してください。ノックアウトを活用してダイナミックメディアストリームを表示することは可能ですか？ビデオは

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

をストリーミング表示する

Answer 1

使用computeds。これは、ストリームのプロパティがあり、あなたのモデルに追加されます。

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モデル自体のノックアウトの力を使用します。ブラウザは、指定されたオーディオ/ビデオを探し始めたときに

ビデオはもともとレンダリングされていない場合は、なぜ<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);