3

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!

PepperAddict
  • 888
  • 2
  • 10
  • 16
  • 1
    Interesting, there is no mention of MediaStreams in the specs, and I could only find [this issue](https://github.com/w3c/mediasession/issues/81) about it. Sounds like they only considered it as a "telephony" mean... You might want to open an issue there making your point, though I can see how some parts of the API like `setPositionState` can not work with streams. – Kaiido Dec 10 '20 at 02:30
  • 1
    Thank you for your comment, @Kaiido! I created a ticket so hopefully I'll hear back from them. _crosses fingers_ . – PepperAddict Dec 10 '20 at 17:05
  • 1
    For reference: https://github.com/w3c/mediasession/issues/261 was opened by PepperAddict and I opened https://bugs.chromium.org/p/chromium/issues/detail?id=1181214 – HolgerJeromin Feb 23 '21 at 09:06

0 Answers0