javascript - grabar - Sincronización de datos con video a través de WebRTC.

webrtc grabar video

Question

Estoy usando WebRTC para enviar video desde un servidor al navegador del cliente (usando la WebRTC API nativa de WebRTC API y un servidor MCU WebRTC como Kurento).

Antes de enviarlo a los clientes, cada fotograma del video contenía metadatos (como subtítulos o cualquier otro contenido de aplicación). Estoy buscando una forma de enviar estos metadatos al cliente para que permanezcan sincronizados (hasta el momento en que se presentan ). Además, me gustaría poder acceder a estos datos desde el lado del cliente (mediante Javascript).

Algunas opciones que pensé:

• Enviando los datos por WebRTC DataChannel. Pero no sé cómo asegurar que los datos estén sincronizados por trama. Pero no pude encontrar una manera de asegurar que los datos enviados por el canal de datos y el canal de video estén sincronizados (nuevamente, espero obtener el nivel de precisión de un solo cuadro).
• Enviar los datos manualmente al cliente de alguna manera (WebRTC DataChannel, websockets, etc.) con marcas de tiempo que coincidan con las marcas de tiempo del video. Sin embargo, incluso si Kurento u otros servidores intermedios conservan la información de la marca de tiempo en el video, de acuerdo con la siguiente respuesta, no hay una forma aplicativa de obtener las marcas de tiempo del video desde el javascript: ¿Cómo se puede usar la API Javascript de webRTC para acceder a la marca de tiempo RTP de audio saliente? en el remitente y la marca de tiempo RTP de audio entrante en el receptor? . Pensé en usar el evento de timeupdate de timeupdate del elemento de video estándar, pero no sé si funcionará para el nivel de precisión del cuadro, y no estoy seguro de lo que significa en un video en vivo como en WebRTC.
• Enviando los datos manualmente y adjúntelos al video aplicativamente como otro TextTrack . Luego use onenter y onexit para leerlo de forma sincronizada: http://www.html5rocks.com/en/tutorials/track/basics/ . Todavía requiere sellos de tiempo precisos, y no estoy seguro de cómo saber cuáles son los sellos de hora y si Kurento los pasa como están.
• Uso de la API de estadísticas de WebRTC para contar manualmente los marcos (utilizando getstats ), y espero que la información proporcionada por esta API sea precisa.

¿Cuál es la mejor manera de hacerlo y cómo resolver los problemas que mencioné de cualquier manera?

EDITAR: Se requiere una sincronización precisa (en resolución de no más de un solo cuadro) de metadatos con el cuadro apropiado.

Answer 1

Bien, primero obtengamos el video y el audio usando getUserMedia y hagamos que sea datos en bruto usando

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);
}

Ahora puede enviar los datos a través de DataChannels y agregar sus metadatas, en el lado del receptor:

/*
*
* 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);

Answer 2

Sospecho que la cantidad de datos por cuadro es bastante pequeña. Me gustaría ver la codificación en una imagen de código de barras 2D y colocarla en cada cuadro de manera que no se elimine por compresión. Alternativamente, solo codifica la marca de tiempo como esta.

Luego, en el lado del jugador, miras la imagen en un marco particular y sacas los datos, o si es así.