{"id":131,"date":"2016-11-02T02:20:38","date_gmt":"2016-11-02T02:20:38","guid":{"rendered":"https:\/\/testmozilla.wpengine.com\/webrtc\/?p=131"},"modified":"2016-11-16T11:43:57","modified_gmt":"2016-11-16T11:43:57","slug":"accomodate-cloning","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webrtc\/accomodate-cloning\/","title":{"rendered":"Changing Firefox MediaStreams to accommodate cloning"},"content":{"rendered":"

This article is a re-post of one that I wrote on the Telenor Blog<\/a> earlier this year. It explains how MediaStreams<\/a> work in Firefox and the changes I did to them to accommodate cloning.<\/p>\n

First of all. What is a MediaStreamTrack<\/a>, and how can you clone it?<\/p>\n

A MediaStreamTrack represents a realtime stream of audio or video data.<\/p>\n

It provides a common API to the multiple producers (getUserMedia<\/a>, WebAudio<\/a>, Canvas<\/a>, etc.) and consumers (WebRTC<\/a>, WebAudio, MediaRecorder<\/a>, etc.) of MediaStreamTracks.<\/p>\n

A MediaStream is simply put a grouping of MediaStreamTracks. A MediaStream also ensures that all tracks contained in it stay synchronized to each other, for instance when it gets played out in a media element<\/a>.<\/p>\n

Cloning a track means that you get a new MediaStreamTrack instance representing the same data as the original, but where the identifier is unique (consumers don\u2019t know it\u2019s a clone) and disabling and stopping works independently across the original and all its clones.<\/p>\n

Now, how does all this come together in Firefox? <\/p>\n

\n

My Background<\/h3>\n

For the last year and a half, I have been representing Telenor in the WebRTC Competency Center that Mozilla announced back in 2014<\/a>. The WebRTC Competency Center is a project where we as participants work together with Mozilla on driving the Firefox WebRTC stack and the relevant standards forward.<\/p>\n

Most of my work so far in this context has been on features and bug fixes in and around the MediaStream and MediaStreamTrack implementation. For instance I fixed transmitting WebAudio tracks over RTCPeerConnections<\/a>, the \u201cresize\u201d event for media elements<\/a>, capturing a canvas to a MediaStream<\/a>, MediaStream constructors<\/a>, MediaStream.addTrack()<\/code> and removeTrack()<\/code><\/a> and many many bug fixes<\/a>.<\/p>\n

Recently I landed a huge rewrite – 105 patches in one go<\/a> – rerouting most of the main thread communications between streams and their sources and sinks, leading to finally enabling MediaStream.clone()<\/code><\/a> and MediaStreamTrack.clone()<\/code><\/a> in Firefox 48.<\/p>\n

Outline<\/h3>\n

Since this article gets rather lengthy, here\u2019s an outline so that you can skip directly to the pieces that you find most interesting.<\/p>\n