问基于WebRTC的视频数据同步
EN

Stack Overflow用户

提问于 2015-05-22 00:32:25

回答 2查看 12K关注 0票数 22

我使用WebRTC将视频从服务器发送到客户端浏览器(使用本机WebRTC API和Kurento这样的MCU WebRTC服务器)。

在发送到客户端之前，视频的每一帧都包含元数据(比如字幕或任何其他应用内容)。我正在寻找一种将此元数据发送到客户端的方法，使其保持同步(直到它实际出现的时间)。此外，我希望能够从客户端(通过Javascript)访问这些数据。

我想过的一些选择：

通过WebRTC DataChannel发送数据。但我不知道如何确保数据在每帧的基础上是同步的。但是我没有办法确保数据通道发送的数据和视频通道是同步的(同样，我希望获得单个帧的精度水平)。
以某种方式(WebRTC DataChannel、websockets等)手动向客户端发送数据带有与视频时间戳相匹配的时间戳。然而，即使Kurento或其他中间服务器保留视频中的时间戳信息，根据以下答案，也没有从javascript获得视频时间戳的应用方法：How can use the webRTC Javascript API to access the outgoing audio RTP timestamp at the sender and the incoming audio RTP timestamp at the receiver?。我考虑过使用标准视频元素的timeupdate事件，但我不知道它是否适用于帧的精确级别，我不知道它在实时视频中的意义，就像在WebRTC中那样。
手动发送数据，并将其作为另一个TextTrack应用于视频。然后使用onenter和onexit同步读取它：http://www.html5rocks.com/en/tutorials/track/basics/。它仍然需要精确的时间戳，我不知道如何知道什么是时间戳，以及Kurento是否把它们按原样传递。
使用WebRTC的统计API手动计数帧(使用getstats)，并希望该API提供的信息是精确的。

做这件事的最好方法是什么，以及如何解决我提到的任何一种问题？

编辑:需要使用适当的框架对元数据进行精确同步(分辨率不超过一帧)。

webrtc

javascript

html

video

video-streaming

人脸核身产品特惠

用户政务民生、金融、通信运营商等场景，接入全面，安全可靠新用户3折起

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-23 00:17:20

我怀疑每帧的数据量是相当小的。我会把它编码成一个二维条形码图像，并将它以一种方式放置在每一个帧中，这样它就不会被压缩删除。或者，只需要像这样编码时间戳。

然后，在播放器方面，您可以查看特定帧中的图像，然后获取数据，或者如果是这样的话。

票数 4

Stack Overflow用户

发布于 2015-12-02 05:21:30

好的，首先让我们使用getUserMedia获取视频和音频，然后使用

https://github.com/streamproc/MediaStreamRecorder

/*
 *
 *  Video Streamer
 *
 */


<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>

// FIREFOX

var mediaConstraints = {
    audio: !!navigator.mozGetUserMedia, // don't forget audio!
    video: true                         // don't forget video!
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2

    };
    mediaRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}
</script>



// CHROME

var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var multiStreamRecorder = new MultiStreamRecorder(stream);
    multiStreamRecorder.video = yourVideoElement; // to get maximum accuracy
    multiStreamRecorder.audioChannels = 1;
    multiStreamRecorder.ondataavailable = function (blobs) {
        // blobs.audio
        // blobs.video
    };
    multiStreamRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}

现在您可以通过DataChannels发送数据，并在接收端添加元数据：

/*
 *
 *  Video Receiver
 *
 */


 var ms = new MediaSource();

 var video = document.querySelector('video');
 video.src = window.URL.createObjectURL(ms);

 ms.addEventListener('sourceopen', function(e) {
   var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
   sourceBuffer.appendBuffer(/* Video chunks here */);
 }, false);