So beheben Sie das React Native WebSocket-Streaming-Problem mit Base64-Bilddaten (blinkender schwarzer Bildschirm) ⇐ JavaScript

[Guest]

Ich arbeite an einer React Native-App, die Bilder von einem WebSocket-Server mit einer hohen Bildrate streamt. Der Server sendet die Bilddaten im Format:
image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD....
Die HTML-Implementierung I erstellt funktioniert einwandfrei und überträgt die Frames reibungslos und ohne Probleme:

Code: Select all

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
};

aber in meiner React Native-App treten ein paar Probleme auf:
Die App blinkt zwischen den Frames schwarz
Die Frames werden nicht reibungslos aktualisiert, obwohl sie scheinbar stecken bleiben oder sehr langsam aktualisiert werden.
Hier ist mein React Native-Code:

Code: Select all

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%",
},
});

Wie kann ich reibungslose und konsistente Aktualisierungen für die gestreamten Bilder in der React Native-App erreichen, wie in der HTML-Implementierung?