Jak zmodyfikować zawartość ścieżki wideo WebRTC MediaStream?

Question

Używam WebRTC w scenariuszu, w którym strumień wideo klienta jest nagrywany na serwerze innej firmy https://tokbox.com/. Chciałbym umieścić jakiś znak wodny w nagranym wideo.

Investigation przyniósł mi do tej strony http://w3c.github.io/webrtc-pc/#mediastreamtrack i wydaje się, że jest to technicznie możliwe, ponieważ twierdzi, że:

MediaStream uzyskiwano stosując getUserMedia() jest domyślnie dostępne dla aplikacji. Oznacza to, że aplikacja może uzyskać dostęp do zawartości utworów, modyfikować ich zawartość i wysyłać je do dowolnego wybranego przez siebie uczestnika.

Dokładnie tego potrzebuję, ale nie znalazłem żadnych przykładów ani wyjaśnień dotyczących tej funkcji. Chciałbym zasięgnąć porady ekspertów WebRTC.

Answer 1

Musisz użyć obszaru roboczego, aby przekierować wideo z getUserMedia do, zmodyfikować je tam, a następnie użyć canvas.captureStream(), aby przekształcić go z powrotem w MediaStream. To świetnie - poza tym, że canvas.captureStream(), mimo że zgodził się na WG, nie został jeszcze uwzględniony w specyfikacji. (Istnieje żądanie ściągnięcia z proponowanym słowem pisanym przez Mozillę.)

Jeśli chodzi o implementacje: początkowa implementacja captureStream() właśnie wylądowała w Firefox Nightly (41), i nadal jest za pre, dopóki nie pojawi się błąd lub dwa jest naprawiony. Możesz go włączyć za pomocą canvas.capturestream.enabled w about: config. Możesz zobaczyć wersję demo pod numerem Mozilla's test page for captureStream().

Wykonanie bez canvas.captureStream() byłoby trudne; najlepszym sposobem byłoby zrobienie getUserMedia-> canvas->, a następnie użycie video.captureStream() (lub captureStreamUntilEnded()) - jednak video.captureStream czeka również na formalną akceptację. Mozilla ma jednak wideo.captureStream() od jakiegoś czasu i myślę, że działa w FF 38 (wersja aktualna).