HTML5ビデオタグを使用したRTPビデオストリームの再生

Question

Android携帯からRTPビデオデータをコンピュータに送信しています。 RTPストリーミングは、ffplayで証明されています。

今、Chromeのストリーム（63.0.3239.84、Win10、64Bit）を受信して​​表示しようとしています。私はnode.jsでRTPパケットを受信し、socket.ioの助けを借りてすべての接続されたユーザーに渡します。

動画をHTML5 <video>タグで表示するには、MediaSource APIのthe example in the docsと同様のアプローチを試しました。

var socket = io(); 
 
var ms  = new MediaSource(); 
 
var mimeCodec = 'video/mp4; codecs="avc1.42C01E"'; 
 
var queue  = []; 
 
var video  = document.querySelector('video'); 
 

 
// receiving the rtp-packets from android, forwarded by nodes socket.io 
 
socket.on('video-fragment', function(fragment) { 
 
    queue.push(fragment.slice(11)); // cutting of rtp header to get plain NAL units 
 
}); 
 

 
video.src = URL.createObjectURL(ms); 
 

 
var timeout = 500; 
 
var appendChunk = function() { 
 
    if(queue.length > 0) { 
 
    timeout = 500; 
 
    var append = function() { 
 
     var sb = ms.addSourceBuffer(mimeCodec); 
 
     sb.appendBuffer(queue.shift()); 
 
     sb.addEventListener('updateend', function() { 
 
     if(video.paused) { 
 
      console.log("try to start video"); 
 
      video.play(); 
 
     } 
 

 
     appendChunk(); 
 
     }); 
 
     ms.removeSourceBuffer(sb); 
 
    }; 
 
    if(ms.readyState == "open") { 
 
     append(); 
 
    } else { 
 
     ms.addEventListener('sourceopen', function() { 
 
     appendChunk(); 
 
     }); 
 
    } 
 
    } else { 
 
    setTimeout(appendChunk, timeout); // try again after some timeout... 
 
    timeout *= 2; 
 
    } 
 
} 
 
appendChunk(); // start recursive call

<video></video>

しかし、私は私のビデオ・オブジェクトからすべてのエラーを得ることはありません：これは私がその場で映像データを追加しようとしてきたもの、です。ある時点でMediaSourceをms.endOfStream()で終了し、そのビデオを開始しようとすると、コード4: DEMUXER_ERROR_COULD_NOT_OPENのMediaErrorが返されます。

提案がありますか？私は何とか正しい方法でいますか？または、Chromeでこの種のビデオストリーミングが不可能で、「ライブストリーミング」の唯一の方法は、プレイリストとビデオファイルチャンクを使用することでしょうか？

Answer 1

ブラウザはmp4（またはwebm）コンテナのビデオのみをサポートしています。これはrtpプロトコルをサポートしていません。ブラウザがサポートする形式に再パッケージ化する必要があります。