React Native中WebSocket Base64图像流的帧率与闪烁问题求助

针对你用WebSocket获取Base64图像、通过ImageBackground模拟视频时遇到的帧率卡顿和图像闪烁问题，以下是具体优化方案：

一、解决帧率卡顿问题 #

1. 优化二进制转Base64效率 #

原代码的循环拼接字符串是性能瓶颈，替换为一次性生成二进制字符串，大幅减少JS线程计算开销：

// 替换原循环拼接逻辑
const bytes = new Uint8Array(data);
const binary = String.fromCharCode.apply(null, bytes);
const image = "data:image/jpg;base64," + btoa(binary);

2. 帧节流与渲染时机对齐 #

• 用requestAnimationFrame包裹更新逻辑，确保图像更新与原生渲染周期对齐，避免丢帧：

if (liveFrameRef.current) {
  requestAnimationFrame(() => {
    const bytes = new Uint8Array(data);
    const binary = String.fromCharCode.apply(null, bytes);
    const image = "data:image/jpg;base64," + btoa(binary);
    liveFrameRef.current.setNativeProps({ src: [{ uri: image }] });
  });
}

• 如果WebSocket推送帧率超过目标（如30fps），添加节流逻辑，每33ms仅处理一次帧数据：

let lastUpdateTime = 0;
// 处理WebSocket数据时
const now = Date.now();
if (now - lastUpdateTime > 33) { // 30fps对应约33ms每帧
  lastUpdateTime = now;
  // 执行图像更新逻辑
}

3. 原生层处理（最优解） #

将二进制图像数据直接传递给自定义原生组件，让原生负责解码和显示，完全避开JS线程的Base64转换开销：

• Android：创建自定义View，接收字节数组解码为Bitmap并渲染；
• iOS：创建自定义UIView，接收NSData转换为UIImage并渲染；
• React Native端：通过桥接传递二进制数据给原生组件，无需处理Base64。
  这种方式能支持30fps以上帧率且无卡顿。

二、解决图像闪烁问题 #

双缓冲交替显示方案 #

使用两个Image组件，一个显示当前帧，另一个预加载下一帧，加载完成后切换显示状态，确保始终有已加载的图像展示：

import React, { useState, useRef, useEffect } from 'react';
import { View, Image, StyleSheet } from 'react-native';

const LiveStream = () => {
  const [currentUri, setCurrentUri] = useState(require("../../../../assets/images/camera_preview.jpg"));
  const [nextUri, setNextUri] = useState(null);
  const [showCurrent, setShowCurrent] = useState(true);
  const lastUpdateTime = useRef(0);
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = new WebSocket('ws://your-stream-url');
    socketRef.current.binaryType = 'arraybuffer';

    socketRef.current.onmessage = (event) => {
      const now = Date.now();
      if (now - lastUpdateTime.current > 33) {
        lastUpdateTime.current = now;
        const bytes = new Uint8Array(event.data);
        const binary = String.fromCharCode.apply(null, bytes);
        const imageUri = "data:image/jpg;base64," + btoa(binary);
        
        // 更新预加载帧
        showCurrent ? setNextUri(imageUri) : setCurrentUri(imageUri);
      }
    };

    return () => socketRef.current?.close();
  }, [showCurrent]);

  const handleNextFrameLoad = () => {
    // 切换显示帧
    setShowCurrent(!showCurrent);
  };

  return (
    <View style={styles.container}>
      <Image
        style={[styles.frame, showCurrent ? styles.visible : styles.hidden]}
        source={currentUri}
        resizeMode="cover"
      />
      <Image
        style={[styles.frame, !showCurrent ? styles.visible : styles.hidden]}
        source={nextUri || currentUri}
        resizeMode="cover"
        onLoad={handleNextFrameLoad}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    position: 'relative',
  },
  frame: {
    position: 'absolute',
    width: '100%',
    height: '100%',
  },
  visible: { opacity: 1 },
  hidden: { opacity: 0 },
});

export default LiveStream;

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