What are your media track handling tips?

Lazer

In preparing my latest track handling blog post I ran into so many gotchas and caveats to consider (especially in Safari), that I'm fully expecting to evolve my approach (and likely the post) as time goes on. Do you have any tips for juggling media tracks on DOM elements? A few I'd point out are:

* Be sure to set media DOM element `srcObject` to `null` on disposal to avoid leaky WebMediaPlayers

* Avoid re-setting tracks more than necessary (eg when they haven't actually changed)

* Account for `"NotAllowedError"` blocking autoplay, and present a button to the user that allows them to click a button to play media manually if they encounter this

* Prepare a big cup of coffee and a bowl for your tears when testing your implementation in Safari

karl

Legitimate question: does srcObject not auto update if you switch around tracks on the MediaStream you assign to srcObject? Other than the cleanup you mention (which is super smart and true), I generally set-and-forget srcObject and do track manipulation on the MediaStream. The trade-off there is I'm also often wrangling a collection of MediaStream objects that are available on the global namespace.

Lazer

@karl I'm not 100% sure what behavior you include in "auto update" past updating the added/removed tracks on the stream, but that is the recommendation we went with in the post: just switching around tracks and not resetting `srcObject` each time, aside from setting it to null for teardown. Which I think is also what you're describing, or am I confused (I am on my first coffee :D)

karl

@Lazer yes, that's it :) so someplace you'd have, in pseudo-code, videoEl.srcObject = myMediaStream; just the once. And you'd then just add, replace, or remove tracks on myMediaStream, meaning there is no need to do any subsequent reassignment to srcObject to the same media stream.