首页 文章

使用WebRTC将数据与视频同步

提问于
浏览 次
17

我正在使用 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提供的信息是准确的 .

最好的方法是什么，以及如何解决我提到的问题？

EDIT: 需要具有适当帧的精确同步（在不超过单帧的分辨率下）元数据 .

javascript html5 video video-streaming webrtc

2 回答

  • 1

    我怀疑每帧的数据量相当小 . 我会考虑将其编码为二维条码图像并将其放置在每个帧中，以便不通过压缩将其删除 . 或者只是像这样编码时间戳 .

    然后在播放器一侧，您可以查看特定帧中的图像并获取数据或是否存在 .

    回复于
  • 2

    好的，首先让我们使用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);
    回复于

相关问题