3

当涉及到简单的视频文件时，我的 mediaSession 工作得很好。您可以使用媒体键暂停和播放。

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])

这是控制台登录暂停和播放的功能

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";
  });
}

这是带有随机视频的视频元素

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

但我的问题是它不适用于流。可能是因为它使用了 srcObject 吗？很高兴能够使用媒体键暂停/播放流媒体，就像 youtube/twitch 对直播视频一样。

这就是我如何使用它来进行桌面流式传输。下面是触发流的元素：

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

它会在下面运行这个函数

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();
    })
  })
}

这是一个活生生的例子： https ://codesandbox.io/s/optimistic-thunder-zyoz4?file=/src/App.js

立即播放视频文件（如果没有，请按播放），您可以立即访问媒体键。按启动流启动桌面流，但您丢失了媒体密钥。

对不起，这很长...... 总之，我想使用媒体键进行流媒体。

希望这很清楚。先感谢您！

4

0 回答 0