Я использую WebRTC для отправки видео с сервера на браузер клиента (используя собственный WebRTC API и MCU WebRTC сервер, например Kurento).
Прежде чем отправлять его клиентам, каждый кадр видео содержит метаданные (например, субтитры или любой другой аппликативный контент). Я ищу способ отправить эти метаданные клиенту, чтобы он оставался синхронизированным (до момента его фактического представления). Кроме того, я хотел бы иметь доступ к этим данным со стороны клиента (по Javascript).
Некоторые варианты, о которых я думал:
timeupdate, но я не знаю, будет ли он работать для точного уровня кадра, и я не уверен, что это значит в реальном видео, как в WebRTC.TextTrack. Затем используйте onenter и onexit, чтобы прочитать его синхронно: http://www.html5rocks.com/en/tutorials/track/basics/. Он по-прежнему требует точных временных меток, и я не уверен, как узнать, какие временные метки и если Куренто передает их как есть.getstats) и надейтесь, что информация, предоставленная этим API, будет точной.Каков наилучший способ сделать это и как решить проблемы, о которых я упомянул в любом случае?
EDIT: Требуется точная синхронизация (с разрешением не более одного кадра) метаданных с соответствующим фреймом.
Я подозреваю, что количество данных на кадр довольно мало. Я бы посмотрел на его кодирование в 2D-штрих-код и поместил его в каждый кадр таким образом, чтобы он не удалялся сжатием. Или просто кодируйте временную метку, как это.
Затем на стороне игрока вы просматриваете изображение в определенном кадре и извлекаете данные или, если хотите,
Хорошо, сначала давайте получим видео и аудио с помощью getUserMedia и дадим исходные данные с помощью
:
/*
*
* 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);