React Native中如何禁用画中画并防止全屏/画中画截图录屏？

针对你遇到的WebView内Vimeo/YouTube视频全屏、画中画时防截图失效，以及iOS PIP无法禁用的问题，以下是针对性的解决思路和代码修改方案：

核心问题分析 #

1. 全屏视频脱离WebView控制：iOS/Android的全屏视频会调用系统原生播放器，脱离React Native视图层级，导致Expo Screen Capture和RNScreenshotPrevent的局部防护失效。
2. 动态加载的视频元素未被处理：原注入脚本仅在页面初始加载时执行，无法覆盖后续动态渲染的YouTube/Vimeo iframe。
3. PIP参数未适配平台播放器：YouTube和Vimeo有各自的URL参数控制PIP，仅设置HTML属性无法彻底禁用。

解决方案 #

1. 监听全屏状态，全局切换Secure View #

在WebView中添加全屏状态监听，进入全屏时强制开启全局Secure View（覆盖系统播放器），退出时按需保持防护：

// 在ContentWebView组件中添加WebView的onFullscreenChange事件
<WebView
  // ...原有属性
  onFullscreenChange={async ({ nativeEvent: { fullscreen } }) => {
    if (fullscreen) {
      // 进入全屏时强制开启防截图
      await screenCapturePrevent();
      if (Platform.OS === 'ios') {
        RNScreenshotPrevent.enableSecureView();
      }
    }
    // 退出全屏可选择保持防护，或根据业务需求恢复
    // else await screenCaptureAllow();
  }}
/>

2. 升级注入脚本，动态处理视频元素 #

使用MutationObserver监听页面动态元素变化，同时针对YouTube/Vimeo添加专属PIP禁用参数：

const injectedJavaScript = `
// 统一处理视频元素的PIP禁用逻辑
function disablePIPForAllElements() {
  // 处理原生video标签
  const videos = document.getElementsByTagName('video');
  for (const video of videos) {
    video.setAttribute('disablePictureInPicture', 'true');
    video.setAttribute('controlslist', 'nodownload noplaybackrate disablepictureinpicture');
  }

  // 处理YouTube iframe
  const ytIframes = document.querySelectorAll('iframe[src*="youtube.com/embed"]');
  ytIframes.forEach(iframe => {
    if (!iframe.src.includes('disablepictureinpicture')) {
      const separator = iframe.src.includes('?') ? '&' : '?';
      iframe.src += separator + 'disablepictureinpicture=1';
    }
    iframe.setAttribute('disablePictureInPicture', 'true');
    iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; web-share');
  });

  // 处理Vimeo iframe
  const vimeoIframes = document.querySelectorAll('iframe[src*="player.vimeo.com"]');
  vimeoIframes.forEach(iframe => {
    if (!iframe.src.includes('disable_pip')) {
      const separator = iframe.src.includes('?') ? '&' : '?';
      iframe.src += separator + 'disable_pip=1';
    }
  });
}

// 初始执行一次
disablePIPForAllElements();

// 监听页面动态元素变化
const observer = new MutationObserver(() => disablePIPForAllElements());
observer.observe(document.body, { childList: true, subtree: true });

// 页面重载时重新执行
window.addEventListener('load', disablePIPForAllElements);

return true;
`;

3. iOS端强制拦截画中画状态 #

安装react-native-picture-in-picture库（Expo项目可直接expo install），监听PIP状态并强制退出：

// 导入库
import PictureInPicture from 'react-native-picture-in-picture';

// 在组件的useEffect中添加监听
useEffect(() => {
  const handlePIPChange = async () => {
    const isInPIP = await PictureInPicture.isPictureInPictureActive();
    if (isInPIP) {
      await PictureInPicture.exitPictureInPicture();
      // 退出后重新开启防截图
      await screenCapturePrevent();
    }
  };

  const pipListener = PictureInPicture.addEventListener('pictureInPictureStatusChanged', handlePIPChange);

  return () => pipListener.remove();
}, []);

4. Android端全局配置Secure Window #

在Expo项目的app.json中添加Android全局安全窗口配置，确保全屏时也生效：

{
  "expo": {
    "android": {
      "androidManifest": {
        "application": {
          "android:windowSecure": "true"
        }
      }
    }
  }
}

关键注意事项 #

• iOS Secure View限制：开启后系统会禁止所有截图/录屏，包括通知中心控制栏的截图按钮，需确保业务场景允许此强限制。
• YouTube/Vimeo参数兼容性：部分旧版播放器可能不支持URL参数禁用PIP，需测试对应版本的播放器兼容性。
• Expo环境适配：若使用Expo Managed Workflow，需确保所有依赖库兼容Expo SDK版本，避免构建失败。

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