如何在反应本机视图中捕获正在播放的视频（例如：youtube 视频）

Question

我目前正在使用react-native-view-shot来捕获我的react-native应用程序的可见屏幕。 除了视频之外，它效果很好。当我在 YouTube 视频播放时进行拍摄时，图像出来时视频会变黑。有什么解决办法吗？

我正在使用此功能进行捕捉

  import {captureScreen} from 'react-native-view-shot';
  
  const captureScreenAsBase64 = async () => {
    /*
      This function captures the screen and returns the base64 string of the image
    */
    try {
      const uri = await captureScreen({
        format: 'png',
        quality: 0.8,
      });

      const response = await fetch(uri);
      const imageData = await response.blob();
      const base64Data = await new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => {
          resolve(reader.result);
        };
        reader.onerror = reject;
        reader.readAsDataURL(imageData);
      });
      return base64Data;
    } catch (error) {
      console.error('Failed to capture screen:', error);
      return null;
    }
  };

Answer 1

我尝试过，但发现无法直接在 React Native 应用程序中执行此操作。

但是，由于您要求解决问题，因此您可以通过设置接收 YouTube URL 和时间戳并将图像返回到您的 React Native 应用程序的后端服务来捕获应用程序中 YouTube 视频的屏幕截图。 （您也可以将其上传到像 s3 这样的云存储桶并返回前端 React Native 应用程序的 url）

在后端，您可以使用像

yt-dlp

和

ffmpeg

这样的库来下载您需要的视频部分，然后进行屏幕截图，而不是下载整个视频。它在提供的时间戳处。

yt-dlp 帮助您获取 URL。 ffmpeg 负责下载其中的一小部分并捕获以生成屏幕截图。

在后端的 python 中：

import  subprocess

def capture_youtube_video_image(video_id, timestamp, output_file):
     video_url = f"https://www.youtube.com/watch?v={video_id}"
     command = f"yt-dlp -f 'best[ext=mp4][protocol!*=dash]' --youtube-skip-dash-manifest -g {video_url}"
     output = subprocess.check_output(command,shell=True, text=True)
     video_capture_url = output.strip().split("\n")
     command = f"ffmpeg -ss {timestamp} -i '{video_capture_url}' -frames:v 1 {output_file}"
     subprocess.call(command, shell=True)

我们有两个命令：第一个命令获取使用 ffmpeg 捕获视频所需的 URL，第二个命令从 video_capture_url 生成屏幕截图。最后，您的屏幕截图应该出现在输出文件路径中。

确保您在计算机/服务器上安装了 yt-dlp 和 ffmpeg。