How can I get this working with React Native? Any suggestions?

[adityaxp]

I'm trying to display an RTSP stream in React Native using a basic approach with WebViews, but I'm unable to load the stream.

Backend:

const express = require('express')
const app = express()

const {proxy, scriptUrl} = require('rtsp-relay')(app)

const handler = proxy({
  url: STREAM_URL,

  verbose: false
})

// the endpoint our RTSP uses
app.ws('/api/stream', handler)


app.get('/', (req, res) =>
  res.send(`
  <canvas id='canvas'></canvas>

  <script src='${scriptUrl}'></script>
  <script>
    loadPlayer({
      url: 'ws://' + location.host + '/api/stream',
      canvas: document.getElementById('canvas')
    });
  </script>
`)
)

app.listen(2000)

React-Native code:

import React, {useState, useEffect} from 'react'
import {View, Text} from 'react-native'
import {WebView} from 'react-native-webview'

export default function App() {
  const [html, sethtml] = useState('')
  const [error, setError] = useState('')

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://10.1.3.4:2000/')
        const html = await response.text()
        console.log('Fetched HTML:', html)
        sethtml(html)
      } catch (err) {
        console.error('error:', err)
        setError(err.message)
      }
    }

    fetchData()
  }, [])

  return (
    <View style={{flex: 1}}>
      {error ? (
        <Text>Error: {error}</Text>
      ) : (
        <WebView
          originWhitelist={['*']}
          source={{html: html}}
          style={{flex: 1}}
          javaScriptEnabled={true}
        />
      )}
    </View>
  )
}