HTML5-Video-Tag로 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 프로토콜을 지원하지 않습니다. 브라우저가 지원하는 형식으로 다시 패키징해야합니다.