通过MediaSession API在画中画窗口实现交互控制

理解画中画窗口的交互限制

当一个html video 元素通过 requestpictureinpicture() 方法进入画中画模式时，它会生成一个独立的浮动窗口。开发者可能希望在这个窗口中实现自定义的交互功能，例如点击画布上渲染的按钮。然而，浏览器对画中画窗口的交互能力有严格的限制，这主要是出于安全和用户体验的考虑。

根据现有规范，从 requestPictureInPicture() 返回的 PictureInPictureWindow 对象目前仅支持 resize 事件，这意味着无法直接通过传统的 addEventListener 方法捕获鼠标点击、移动等事件。因此，如果您的目标是实现任意的、基于画布像素的复杂交互，例如在画布上绘制多个可点击区域并响应其鼠标事件，那么当前的浏览器API尚不支持此类直接操作。

利用 MediaSession API 实现媒体控制

尽管通用鼠标事件受限，但对于视频会议、媒体播放等常见场景，浏览器提供了 MediaSession API，允许开发者为画中画窗口添加标准化的媒体控制功能。MediaSession API旨在提供一个统一的接口，使Web应用能够与操作系统的媒体UI（如通知栏、锁屏界面、耳机按钮以及画中画窗口的控制条）进行交互。

通过 MediaSession API，您可以为画中画窗口添加以下常见的媒体操作：

• 麦克风静音/取消静音 (togglemicrophone)
• 摄像头开启/关闭 (togglecamera)
• 挂断电话/结束会议 (hangup)
• 播放/暂停 (play/pause)
• 快进/快退 (seekforward/seekbackward)
• 切换曲目 (nexttrack/previoustrack) 等

这些操作会在用户鼠标悬停在画中画窗口上时，以系统原生控件的形式显示出来，提供一致的用户体验。

实现步骤与示例代码

要为画中画窗口添加媒体控制功能，您需要使用 navigator.mediaSession.setActionHandler() 方法来注册对应的回调函数。

万兴爱画

万兴爱画AI绘画生成工具

52

查看详情

1. 定义操作处理函数： 首先，定义当用户点击画中画窗口上的控制按钮时，需要执行的JavaScript函数。

   function toggleAudioMuted() {
       console.log('麦克风状态切换');
       // 实际逻辑：切换音频静音状态，例如：
       // myAudioTrack.enabled = !myAudioTrack.enabled;
       // 更新MediaSession的麦克风活跃状态
       navigator.mediaSession.setMicrophoneActive(myAudioTrack.enabled);
   }
   
   function toggleVideoMuted() {
       console.log('摄像头状态切换');
       // 实际逻辑：切换视频静音状态，例如：
       // myVideoTrack.enabled = !myVideoTrack.enabled;
       // 更新MediaSession的摄像头活跃状态
       navigator.mediaSession.setCameraActive(myVideoTrack.enabled);
   }
   
   function hangup() {
       console.log('挂断电话');
       // 实际逻辑：执行挂断操作，例如：
       // disconnectFromCall();
       // 关闭画中画窗口
       // document.exitPictureInPicture();
   }

   登录后复制

2. 注册 MediaSession 操作处理函数： 在您的应用中，当媒体内容准备就绪或进入画中画模式后，注册这些处理函数。

   // 注册麦克风切换事件
   navigator.mediaSession.setActionHandler('togglemicrophone', toggleAudioMuted);
   
   // 注册摄像头切换事件
   navigator.mediaSession.setActionHandler('togglecamera', toggleVideoMuted);
   
   // 注册挂断事件
   navigator.mediaSession.setActionHandler('hangup', hangup);

   登录后复制

3. 同步媒体状态： 为了确保画中画窗口上的控制按钮能正确显示当前麦克风或摄像头的状态（例如，静音图标是否亮起），您还需要使用 navigator.mediaSession.setMicrophoneActive() 和 navigator.mediaSession.setCameraActive() 方法来同步状态。这些方法接受一个布尔值，表示麦克风或摄像头是否处于活跃状态（即未静音/已开启）。

   // 假设您有一个变量来跟踪当前麦克风和摄像头的状态
   let isMicrophoneActive = true; // 初始状态
   let isCameraActive = true;     // 初始状态
   
   // 在初始化时或状态改变时更新
   navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
   navigator.mediaSession.setCameraActive(isCameraActive);
   
   // 当 toggleAudioMuted 被调用时，更新 isMicrophoneActive 并再次调用 setMicrophoneActive
   // 当 toggleVideoMuted 被调用时，更新 isCameraActive 并再次调用 setCameraActive

   登录后复制

通过以上设置，当用户将鼠标悬停在画中画窗口上时，将显示一个包含麦克风、摄像头和挂断按钮的控制条。点击这些按钮将触发您注册的相应JavaScript函数。

注意事项与总结

• 功能范围： MediaSession API 主要用于控制媒体播放和通信相关的标准化操作。它不能用于实现任意的自定义UI交互，例如在画布上绘制复杂的表单元素或游戏控制。
• 浏览器支持： MediaSession API 的支持情况可能因浏览器而异。建议查阅MDN Web Docs或W3C规范以获取最新的兼容性信息。
• 用户体验： 使用 MediaSession API 提供的原生控件，能够为用户提供熟悉且一致的媒体控制体验，这通常比自定义UI更受欢迎。
• 状态同步： 务必使用 setMicrophoneActive 和 setCameraActive 等方法及时更新媒体会话的状态，以确保画中画窗口上的UI与您的应用内部状态保持同步。

总之，虽然直接获取画中画窗口的鼠标事件在当前浏览器API中是受限的，但对于视频会议和媒体播放等核心场景，MediaSession API 提供了一个强大且标准化的解决方案，能够有效地为画中画窗口添加必要的交互控制。开发者应优先考虑使用此API来增强用户体验，而不是尝试实现非标准或受限的通用鼠标事件捕获。

更多关于 MediaSession API 的详细信息，您可以参考：

• W3C MediaSession 接口规范
• MDN Web Docs - MediaSession API

以上就是通过MediaSession API在画中画窗口实现交互控制的详细内容，更多请关注php中文网其它相关文章！