本文介绍了如何为通过 Canvas 渲染并显示的画中画（Picture-in-Picture）窗口添加交互功能。通常，直接监听画中画窗口的鼠标事件是不可行的。本文将介绍如何利用 MediaSession API，通过注册相应的 action handler，在画中画窗口上添加音视频静音/取消静音以及挂断按钮等控制功能，从而实现基本的交互需求。
当我们需要为画中画窗口添加交互功能时，直接监听窗口的鼠标事件通常是行不通的。PictureInPictureWindow 接口主要提供 resize 事件，无法直接捕获鼠标操作。但是，我们可以借助 MediaSession API 来实现一些基本的功能控制。
MediaSession API 提供了一种与浏览器媒体会话交互的方式，允许网页应用注册各种媒体操作的处理函数。这些操作包括播放、暂停、快进、后退等。更重要的是，它还允许我们自定义一些操作，比如音视频静音和挂断。
使用 MediaSession API 添加控制按钮
以下代码展示了如何使用 MediaSession API 在画中画窗口中添加音视频静音/取消静音和挂断按钮：
navigator.mediaSession.setActionHandler('togglemicrophone', toggleAudioMuted);
navigator.mediaSession.setActionHandler('togglecamera', toggleVideoMuted);
navigator.mediaSession.setActionHandler('hangup', hangup);
function toggleAudioMuted() {
// 实现音频静音/取消静音的逻辑
console.log('Toggle Audio Muted');
}
function toggleVideoMuted() {
// 实现视频静音/取消静音的逻辑
console.log('Toggle Video Muted');
}
function hangup() {
// 实现挂断的逻辑
console.log('Hangup');
}代码解释：
- navigator.mediaSession.setActionHandler(action, handler): 这个方法用于注册特定 action 的处理函数。action 是一个字符串，表示要处理的媒体操作，handler 是一个函数，当用户触发该 action 时会被调用。
- 'togglemicrophone', 'togglecamera', 'hangup': 这些是自定义的 action 名称，分别对应音频静音/取消静音、视频静音/取消静音和挂断操作。
- toggleAudioMuted(), toggleVideoMuted(), hangup(): 这些是处理函数，需要在其中实现具体的逻辑。
同步状态
除了添加控制按钮，我们还可以使用 navigator.mediaSession.setMicrophoneActive 和 navigator.mediaSession.setCameraActive 来同步麦克风和摄像头的状态，确保画中画窗口中的状态显示与实际状态一致：
navigator.mediaSession.setMicrophoneActive(isMicrophoneMuted); navigator.mediaSession.setCameraActive(isCameraMuted);
注意事项：
- MediaSession API 的支持程度可能因浏览器而异，建议在使用前进行兼容性检查。
- 画中画窗口的交互功能有限，主要用于控制媒体播放和一些基本操作。更复杂的交互可能需要考虑其他方案。
- MediaSession API 主要适用于音视频相关的应用场景。
总结
虽然我们无法直接监听画中画窗口的鼠标事件，但通过 MediaSession API，我们可以为画中画窗口添加一些基本的控制功能，例如音视频静音和挂断。这为用户提供了一种简单便捷的交互方式，提升了用户体验。 这种方法适用于需要在画中画窗口中提供基本控制功能的场景，例如视频会议应用。通过注册相应的 action handler，我们可以轻松地在画中画窗口上添加控制按钮，并同步状态，从而实现基本的交互需求。
