如何在React项目中基于Jitsi Meet实现画中画功能

核心问题原因 #

Jitsi Meeting组件本质是渲染了一个iframe加载会议界面，并非原生video元素。直接用video标签包裹组件会破坏iframe的正常渲染逻辑，导致会议无法显示；而div包裹的话，因为没有关联到可触发PiP的video元素，自然无法启用画中画功能。

实现步骤 #

1. 保存Jitsi External API实例：通过onApiReady回调获取API实例，方便后续操作iframe内部元素
2. 给iframe添加PiP权限：设置iframe的allow属性为picture-in-picture，确保浏览器允许该操作
3. 添加画中画触发按钮：实现点击按钮切换PiP状态的逻辑
4. 操作iframe内部的video元素：获取Jitsi会议中的video标签，调用浏览器原生的PiP API

修改后的完整代码 #

import React, { useRef } from "react";
import { JitsiMeeting } from "@jitsi/react-sdk";

const Appointments = () => {
  const jitsiApiRef = useRef(null);

  const togglePiP = async () => {
    // 检查浏览器是否支持画中画
    if (!document.pictureInPictureEnabled) {
      alert('当前浏览器不支持画中画功能，请升级浏览器后重试');
      return;
    }

    try {
      const iframe = jitsiApiRef.current?.getIFrame();
      if (!iframe) return;

      // 获取iframe内部的视频元素
      const videoElement = iframe.contentDocument.querySelector('video');
      if (!videoElement) {
        alert('未找到会议视频元素，请确保会议已连接');
        return;
      }

      // 切换画中画状态
      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
      } else {
        await videoElement.requestPictureInPicture();
      }
    } catch (err) {
      console.error('画中画操作失败:', err);
      alert(`画中画操作失败：${err.message}`);
    }
  };

  return (
    <div className="h-full" id="pip-meet">
      {/* 添加画中画触发按钮 */}
      <button onClick={togglePiP} className="fixed top-4 right-4 z-10 bg-blue-500 text-white px-4 py-2 rounded">
        切换画中画
      </button>
      
      <JitsiMeeting
        roomName="Temple Appointment"
        configOverwrite={{
          startWithAudioMuted: true,
          disableModeratorIndicator: true,
          startScreenSharing: false,
          enableEmailInStats: false
        }}
        interfaceConfigOverwrite={{
          DISABLE_JOIN_LEAVE_NOTIFICATIONS: false
        }}
        userInfo={{
          displayName: "name",
          email: details.email
        }}
        onApiReady={(externalApi) => {
          jitsiApiRef.current = externalApi;
        }}
        onReadyToClose={() => {
          setJoinCall(false);
        }}
        getIFrameRef={(iframeRef) => {
          iframeRef.style.height = "100%";
          // 添加画中画权限
          iframeRef.setAttribute('allow', 'picture-in-picture');
        }}
      />
    </div>
  );
};

export default Appointments;

注意事项 #

• 确保用户浏览器支持Picture-in-Picture API（主流现代浏览器如Chrome、Firefox、Edge均支持）
• 操作iframe内部元素需要遵循同源策略，Jitsi会议地址需与你的应用域名同源，或Jitsi服务器配置了允许跨域访问
• 如果会议中有多个video元素（比如多人视频），可以根据需要选择特定的video标签（比如本地视频或主讲人视频）
• 可以监听document.pictureinpicturechange事件，来处理PiP状态变化后的UI更新

内容的提问来源于stack exchange，提问作者Martins