React Native基于视频链接生成缩略图：Android SDK33兼容问题求助

针对Android SDK 33环境下react-native-create-thumbnail失效的问题，以下是几个可行的替代方案：

方案一：使用react-native-video截取视频帧 #

react-native-video支持通过快照功能生成视频缩略图，适配Android 33的媒体权限规则。

1. 安装依赖

npm install react-native-video
# 或
yarn add react-native-video

2. 实现代码

import React, { useRef, useEffect, useState } from 'react';
import Video from 'react-native-video';

const VideoThumbnailGenerator = ({ videoUrl }) => {
  const [thumbnail, setThumbnail] = useState(null);
  const videoRef = useRef(null);

  useEffect(() => {
    if (!videoUrl) return;

    const generateThumbnail = async () => {
      try {
        // 加载视频后截取第一帧作为缩略图
        const snapshot = await videoRef.current?.takeSnapshot({
          format: 'png',
          quality: 0.8,
        });
        if (snapshot && !thumbnail) {
          setThumbnail(snapshot.uri);
        }
      } catch (err) {
        console.warn('生成缩略图失败:', err);
      }
    };

    generateThumbnail();
  }, [videoUrl, thumbnail]);

  // 隐藏视频组件，仅用于生成缩略图
  return (
    <Video
      ref={videoRef}
      source={{ uri: videoUrl }}
      style={{ width: 0, height: 0 }}
      resizeMode="cover"
      paused={true} // 保持暂停状态
    />
  );
};

// 使用示例
// <VideoThumbnailGenerator videoUrl={item.links![4].url} />

3. Android权限配置
   在AndroidManifest.xml中添加适配SDK33的权限：

<!-- 适配Android 13+ -->
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<!-- 兼容Android 12及以下 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

方案二：原生Android模块实现 #

直接通过Android原生代码调用MediaMetadataRetriever生成缩略图，适配SDK33的媒体访问策略。

1. 创建原生模块文件VideoThumbnailModule.java

package com.yourappname;

import android.media.MediaMetadataRetriever;
import android.net.Uri;
import androidx.annotation.NonNull;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

public class VideoThumbnailModule extends ReactContextBaseJavaModule {
    public VideoThumbnailModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @NonNull
    @Override
    public String getName() {
        return "VideoThumbnailModule";
    }

    @ReactMethod
    public void generateThumbnail(String videoUrl, Promise promise) {
        MediaMetadataRetriever retriever = new MediaMetadataRetriever();
        try {
            retriever.setDataSource(getReactApplicationContext(), Uri.parse(videoUrl));
            // 优先获取内嵌封面，无则截取第一帧
            byte[] thumbnailBytes = retriever.getEmbeddedPicture();
            if (thumbnailBytes == null) {
                thumbnailBytes = retriever.getFrameAtTime(0, MediaMetadataRetriever.OPTION_CLOSEST_SYNC);
            }

            if (thumbnailBytes != null) {
                // 保存到应用缓存目录
                File cacheDir = getReactApplicationContext().getCacheDir();
                File thumbnailFile = new File(cacheDir, "video_thumbnail_" + System.currentTimeMillis() + ".png");
                FileOutputStream fos = new FileOutputStream(thumbnailFile);
                fos.write(thumbnailBytes);
                fos.close();
                promise.resolve(thumbnailFile.getAbsolutePath());
            } else {
                promise.reject("ERROR", "无法生成视频缩略图");
            }
        } catch (Exception e) {
            promise.reject("ERROR", e.getMessage());
        } finally {
            retriever.release();
        }
    }
}

2. 注册模块VideoThumbnailPackage.java

package com.yourappname;

import androidx.annotation.NonNull;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class VideoThumbnailPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new VideoThumbnailModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

3. 在React Native中调用

import { NativeModules } from 'react-native';
const { VideoThumbnailModule } = NativeModules;

// 使用示例
if (item.fileType === "video") {
  VideoThumbnailModule.generateThumbnail(item.links![4].url)
    .then((path) => {
      if (!thumbnail) {
        setThumbnail(path);
      }
    })
    .catch((err) => console.warn('生成缩略图失败:', err));
}

方案三：先下载视频到本地再生成缩略图 #

如果上述方案不适用，可以先将远程视频下载到应用缓存目录，再使用react-native-image-picker生成缩略图：

import RNFS from 'react-native-fs';
import { generateThumbnail } from 'react-native-image-picker';

// 下载视频到缓存
const downloadVideo = async (url) => {
  const cachePath = `${RNFS.CachesDirectoryPath}/${Date.now()}.mp4`;
  return new Promise((resolve, reject) => {
    const { jobId } = RNFS.downloadFile({
      fromUrl: url,
      toFile: cachePath,
      progressCallback: (res) => {
        if (res.statusCode === 200) resolve(cachePath);
      },
      errorCallback: (err) => reject(err)
    });
  });
};

// 生成缩略图
if (item.fileType === "video") {
  downloadVideo(item.links![4].url)
    .then((localPath) => generateThumbnail({ path: localPath }))
    .then((response) => {
      if (!thumbnail) {
        setThumbnail(response.path);
      }
    })
    .catch((err) => console.warn('生成缩略图失败:', err));
}

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