Add MSE in workers content

[chrisdavidmills]

Description

This PR adds content for the new MSE support in workers available in Chrome 108+. You can see details of what's been added in my research document: https://docs.google.com/document/d/1_zwIr7c9_O3_PEoAnaS5M7yExx9VtjMSUJ6U5yiEias/edit#

One thing that I wanted to mention — on the srcObject reference page, there is a note up top mentioning the lack of support for attaching MediaSources via srcObject:

As of March 2020, only Safari supports setting objects other than MediaStream. Until other browsers catch up, for MediaSource, Blob and File, consider falling back to creating a URL with URL.createObjectURL() and assign it to HTMLMediaElement.src.

I thought that since this is how MediaSourceHandles are attached to media elements, this must now be working, at least in Chrome, but it appears that I am wrong. I tried taking Nick's example at https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html and modifying it to use srcObject instead of src and URL.createObjectURL, but it didn't work!

So what's the deal here, and what do you think I should say on the srcObject page?

Motivation

People will want to know about these new web platform features.

Additional details

Related issues and pull requests

[github-actions[bot]]

Preview URLs (7 pages)

• /en-US/docs/Web/API/HTMLMediaElement/srcObject
• /en-US/docs/Web/API/MediaSource/canConstructInDedicatedWorker
• /en-US/docs/Web/API/MediaSource/handle
• /en-US/docs/Web/API/MediaSourceHandle
• /en-US/docs/Web/API/MediaSource
• /en-US/docs/Web/API/Media_Source_Extensions_API
• /en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers

Flaws (10)

Note! 2 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/MediaSource Title: MediaSource Flaw count: 6

• macros:
  • /en-US/docs/Web/API/MediaSource/sourceclose_event does not exist
  • /en-US/docs/Web/API/MediaSource/sourceended_event does not exist
  • /en-US/docs/Web/API/MediaSource/sourceopen_event does not exist
• bad_bcd_links:
  • no explanation!
  • no explanation!
  • no explanation!

---

URL: /en-US/docs/Web/API/MediaSource/canConstructInDedicatedWorker Title: MediaSource.canConstructInDedicatedWorker Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.MediaSource.canConstructInDedicatedWorker

---

URL: /en-US/docs/Web/API/MediaSource/handle Title: MediaSource.handle Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.MediaSource.handle

---

URL: /en-US/docs/Web/API/Media_Source_Extensions_API Title: Media Source API Flaw count: 1

• macros:
  • /en-US/docs/Web/API/TextTrack/sourceBuffer does not exist

---

URL: /en-US/docs/Web/API/MediaSourceHandle Title: MediaSourceHandle Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.MediaSourceHandle

External URLs (4)

URL: /en-US/docs/Web/API/MediaSource/canConstructInDedicatedWorker Title: MediaSource.canConstructInDedicatedWorker

• https://wolenetz.github.io/mse-in-workers-demo/mse-in-workers-demo.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/MediaSource/handle Title: MediaSource.handle

• https://wolenetz.github.io/mse-in-workers-demo/mse-in-workers-demo.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Media_Source_Extensions_API Title: Media Source API

• https://wolenetz.github.io/mse-in-workers-demo/mse-in-workers-demo.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/MediaSourceHandle Title: MediaSourceHandle

• https://wolenetz.github.io/mse-in-workers-demo/mse-in-workers-demo.html (1 time) (Note! This may be a new URL 👀)

[chrisdavidmills]

Great, thanks @sideshowbarker !

[wolenetz]

So what's the deal here, and what do you think I should say on the srcObject page?

In Chrome, srcObject on HTMLMediaElement is only currently usable for associating a MediaStream or a Dedicated Worker MediaSource's MediaSourceHandle. Main thread MediaSources cannot provide handles yet, nor does srcObject work for plain MediaSource objects in Chrome.

[wolenetz]

Preview URL verifications:

• srcOjbect: Should probably get some kind of note mentioning MediaSourceHandle (from a Dedicated Worker MediaSource's handle getter, transferred to the main thread) is the way to attach a Dedicated Worker MediaSource to a main thread HTMLMediaElement.
• canConstructInDedicatedWorker: LGTM
• MediaSource.handle: mostly LGTM, though the worker portion of the example script should probably indicate "// In a dedicated worker" near the top of that example snippet, and indicate something like "// Transfer the handle to the main context" before the postMessage line in that snippet (perhaps also with some clarification, since that postMessage sends to whichever context created the dedicated worker, and it might not be the main thread; MediaSourceHandles cannot be successfully transferred into or via a Shared Worker or Service Worker, so it could assist readers to point out the intended target is the main context in the snippet), and also indicate something like "// Await sourceopen on the MediaSource before creating SourceBuffers and populating them with fetched media" because the dedicated worker MediaSource won't accept creation of SourceBuffers until its readyState is "open" -- which can only happen once the MediaSource (in this case via the MediaSource's handle) is attached to the HTMLMediaElement.
• MediaSourceHandle: mostly LGTM, though MediaSourceHandle is currently only retrievable from a Dedicated Worker MediaSource, so technically the statement "Each MediaSource object has its own distinct MediaSourceHandle" is false, since there is no MediaSourceHandle for a main thread MediaSource object.
• MediaSource: mostly LGTM, though similar comments around example snippet of usage of dedicated worker MediaSource as noted above. Also would help to clarify that the handle getter is visible only on Dedicated Worker MediaSource instances. Also noticed a minor mispelling: "constructuring" should be "constructing".
• Media_Source_Extensions_API: worker part LGTM. I did notice above that, "MSE allows us to replace the usual single track src value fed to media elements..." would be more accurate if it instead said "MSE allows us to replace the usual single progressive src URI fed to media elements..." (this is because such progressive src URI can indeed have multiple tracks muxed inside them, they just provide no ability for the web app to do things like bitrate adaptation, splicing, codec switching, or advanced telemetry reporting).
• Functions and classes available to workers: LGTM

Finally, on at least one page (MediaSource.handle), the "Note: This feature is available in Web Workers" link is broken. Maybe this is due to the preview linkage or perhaps it's a real broken linkage.

Thank you for doing this work. Please let me know if you'd prefer issues filed for all or each of the above notes, since they are my review notes for an already-merged PR.

[wolenetz]

To track my comments, above, along with PR comments I noted in related add MSE in workers data #18189, I'll file an issue in each repo.