mediaSession does not work with streaming

Question

I have mediaSession working great when it comes to simple video files. You can use your media keys pause and play.

let video = useRef(null)

useEffect(() => {

  video.current.play()
  .then(_ => {
    navigator.mediaSession.metadata = new window.MediaMetadata({
      title: 'first',
      artist: 'whatever video',
      album: 'none',
      artwork: [
        { src: 'https://i.imgur.com/fmYrG2N.png',  sizes: '96x96',   type: 'image/png' },
      ]
    });
    sayStuff()
  })
  .catch(error => console.log(error.message));

} , [video])

Here's the function to console log on pause and play

const sayStuff = () => {
  navigator.mediaSession.setActionHandler('play', async function() {
    console.log('> User clicked "Play" icon.');
    await video.current.play();
    navigator.mediaSession.playbackState = "playing";
  });
  
  navigator.mediaSession.setActionHandler('pause', function() {
    console.log('> User clicked "Pause" icon.');
    video.current.pause();
    navigator.mediaSession.playbackState = "paused";
  });
}

and here's the video element with a random video

 <video autoPlay controls src="https://i.imgur.com/RD2KjD0.mp4" ref={video} ></video>

But my issue is that it doesn't work for streams. Could it be because it uses srcObject instead? It would be nice to have access to pause/play with media keys for streaming like how youtube/twitch has for live videos.

Here's how I have it for desktop streaming working. Below is the element to trigger the stream:

<button onClick={() => initiateCam()}>initiate Stream</button>

And it will run this function below

const initiateCam = () => {
  navigator.mediaDevices.getDisplayMedia({video: true})
  .then((stream) => {
    navigator.mediaSession.metadata = new window.MediaMetadata({
      title: 'this',
      artist: 'stream',
      album: 'none',
      artwork: [
        { src: 'https://i.imgur.com/fmYrG2N.png',  sizes: '96x96',   type: 'image/png' },
      ]
    });
    let vidy = video.current;
    vidy.srcObject = stream
    vidy.play().then(() => {
      sayStuff();
    })
  })
}

Here's a live example: https://codesandbox.io/s/optimistic-thunder-zyoz4?file=/src/App.js

Right off the bat a video file will play (if not, press play) and you can access the media keys right away. Press initiate stream to start a stream of your desktop, but you lose the media keys.

I'm sorry this got quite long... In summary, I want to use media keys for stream.

Hope that was clear. Thank you in advance!