Как исправить проблему потоковой передачи React Native WebSocket с данными изображения Base64 (мигающий черный экран) ⇐ Html

[Anonymous]

Я работаю над приложением React Native, которое передает изображения с сервера WebSocket с высокой частотой кадров. Сервер отправляет данные изображения в формате:
image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD....
Реализация HTML I Created работает отлично и без проблем передает кадры:

Код: Выделить всё

const WS_URL = "ws://192.168.38.61:8080";
const frameElement = document.getElementById("frame");
const ws = new WebSocket(WS_URL);

ws.onmessage = (event) => {
frameElement.src = event.data; // Set the img src to the incoming frame
};

но в моем приложении React Native у меня возникла пара проблем:
Приложение мигает черным между кадрами
Кадры не обновляются плавно, кажется, они зависают или обновляются очень медленно.
Вот мой код React Native:

Код: Выделить всё

import React, { useEffect, useState } from "react";
import { View, Image, StyleSheet, Text } from "react-native";

const PROXY_SERVER_PORT = "ws://192.168.38.61:8080";

export default function App() {
const [frame, setFrame] = useState(null);

useEffect(() => {
const ws = new WebSocket(PROXY_SERVER_PORT);

ws.onopen = () => {
console.log("Connected to WebSocket server");
};

ws.onmessage = (event) => {
setFrame(event.data); // Incoming base64 image data
};

ws.onerror = (error) => {
console.error("WebSocket error:", error);
};

ws.onclose = () => {
console.log("WebSocket connection closed");
};

return () => ws.close();
}, []);

return (

{frame ? (

) : (
Waiting for frame data...
)}

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#000",
justifyContent: "center",
alignItems: "center",
},
imageStyle: {
width: "100%",
height: "100%",
},
});

Как добиться плавного и последовательного обновления потоковых изображений в приложении React Native, как в реализации HTML?

Подробнее здесь: https://stackoverflow.com/questions/793 ... ata-flashi