Add Managed Media Source Extensions API

[jyavenard]

As proposed in #320.

---

Preview | Diff

[marcoscaceres]

Ok, I think we have addressed all outstanding feedback. Thanks again @wolenetz for the detailed review.

Can you check you are satisfied with the responses and give a tick ✅ if all looks good.

Please feel free to make any further suggesting directly in the pull request.

If we don't hear back in 2 weeks, we will assume everything is good and merge. We can always follow up with issues or more pull requests after we merge.

In the meantime, we will make sure to check the state of the WPTests and make sure we have covered as much we can for the purpose of interop.

[chrisn]

I have just one question: does ManagedMediaSource work with MediaSourceHandle, to enable use of ManagedMediaSource in a Worker, and are there test cases for this?

[jyavenard]

I have just one question: does ManagedMediaSource work with MediaSourceHandle, to enable use of ManagedMediaSource in a Worker, and are there test cases for this?

There's nothing specific about ManagedMediaSource when it comes to working in a Worker. All the apply for MediaSource should apply.

webkit doesn't support that feature at present.

[dzianis-dashkevich]

@jyavenard

There's nothing specific about ManagedMediaSource when it comes to working in a Worker. All the apply for MediaSource should apply.

It seems like MSE in workers should be available in Safari 18:

https://developer.apple.com/documentation/safari-release-notes/safari-18-release-notes#Media

Added support for MSE in workers. (123052315)

ManagedMediaSource.canConstructInDedicatedWorker returns true, but this code does not work as expected on Desktop and iOS for Safari 18. ManagedMediaSource never fires sourceopen event:

const workerString = `
let ms;
let mms;
if ('MediaSource' in self) {
  ms = new MediaSource();

  ms.onsourceopen = () => console.log('ms-open');
  ms.onsourceended = () => console.log('ms-ended');
  ms.onsourceclose = () => console.log('ms-close');

  postMessage({ type: 'ms-handle', handle: ms.handle }, [ms.handle]);
}

if ('ManagedMediaSource' in self) {
  mms = new ManagedMediaSource();

  mms.onsourceopen = () => console.log('mms-open');
  mms.onsourceended = () => console.log('mms-ended');
  mms.onsourceclose = () => console.log('mms-close');

  postMessage({ type: 'mms-handle', handle: mms.handle }, [mms.handle]);
}
`;

const blob = new Blob([workerString], { type: 'application/javascript' });
const workerUrl = URL.createObjectURL(blob);
const worker = new Worker(workerUrl);

const videoElement1 = document.createElement('video');
const videoElement2 = document.createElement('video');

worker.onmessage = (e) => {
  console.log('received message from worker: ', e.data.type);

  if (e.data.type === 'ms-handle') {
    videoElement1.srcObject = e.data.handle;
  }

  if (e.data.type === 'mms-handle') {
    videoElement2.srcObject = e.data.handle;
  }
};

Here is the output for Safari 18 Desktop:

[Log] received message from worker:  – "ms-handle" (main.js, line 33)
[Log] received message from worker:  – "mms-handle" (main.js, line 33)
[Log] ms-open (8f6b0cc7-ba5b-4825-b632-6a66e24e3083, line 7)

Here is the output for Safari 18 iOS:

[Log] received message from worker:  – "mms-handle" (main.js, line 33)

Do you know if this is expected?

[jyavenard]

This repo isn't for discussing implementation issues and should be restricted to specs talk only.

In WebKit, for MSE and MMS to move from closed to open readyState, you must provide an alternative source that supports AirPlay, or you must explicitly disable remote playback see https://jyavenard.github.io/htmltests/tests/ManagedMediaSource/bipbop.html

MSE isn't supported on iPhone, only MMS