Come modificare il contenuto della traccia video WebRTC MediaStream?

Question

Uso WebRTC in uno scenario in cui il flusso video client è registrato su un server di terze parti https://tokbox.com/. Vorrei inserire una specie di filigrana nel video registrato.

Investigation mi ha portato a questa pagina http://w3c.github.io/webrtc-pc/#mediastreamtrack e sembra che è tecnicamente possibile in quanto si dice che:

Un MediaStream acquisite utilizzando getUserMedia() è, per impostazione predefinita, accessibili a un'applicazione. Ciò significa che l'applicazione è in grado di accedere ai contenuti delle tracce, modificarne il contenuto e inviarli a qualsiasi peer che sceglie.

Questo è esattamente ciò di cui ho bisogno, ma non ho trovato esempi o spiegazioni di questa funzione. Mi piacerebbe avere qualche consiglio dagli esperti di WebRTC.

Answer 1

È necessario utilizzare una tela per indirizzare il video da getUserMedia a, modificarlo e quindi utilizzare canvas.captureStream() per trasformarlo in un MediaStream. Questo è grandioso - eccetto che canvas.captureStream(), mentre concordato nel WG non è stato ancora incluso nelle specifiche. (C'è una richiesta pull con la verbosità proposta che Mozilla ha scritto.)

Per quanto riguarda le implementazioni: l'implementazione iniziale di captureStream() è appena atterrato in Firefox Nightly (41), ed è ancora dietro un pref fino a un bug o due è aggiustato. Puoi abilitarlo con canvas.capturestream.enabled in about: config. Puoi vedere una demo allo Mozilla's test page for captureStream().

Facendolo senza canvas.captureStream() sarebbe difficile; il modo migliore sarebbe fare getUserMedia-> canvas-> e quindi utilizzare video.captureStream() (o captureStreamUntilEnded()) - tuttavia, video.captureStream è in attesa di accettazione formale. Mozilla ha avuto video.captureStream() per qualche tempo, tuttavia, e penso che funzioni in FF 38 (versione corrente).