Camera not displaying after reloading app or running npx react-native start for the 2nd time

Question

I have implemented tensor-flow camera functionalities for pose detection on a website and then hosted it on netlify. Link: https://uactivsite-mobile.netlify.app/.Also github link of the same: https://github.com/viveksgonal/uactivsite/blob/main/src/App.js

I am using this as webview on react-native app. The first time the app builds perfectly and the camera starts. But whenever I try to reload it or run npx react-native start the second time, the camera never opens.

If anyone knows where I'm going wrong, it would be pleasure if you provide the solution. Thank you.

Code is attached below for the react-native app part:

/* eslint-disable react-native/no-inline-styles */
import React, { useRef, useState } from 'react';

const exercises = [
  {
    name: 'High Knees',
    total: 20,
    index: 0
  },
  {
    name: 'Jumping Jacks',
    total: 25,
    index: 1
  },
  {
    name: 'Squats',
    total: 20,
    index: 2
  },
]

import WebView from 'react-native-webview'

import {
  View,
  StyleSheet,
  Text,
  Image,
  TouchableWithoutFeedback,
  Modal
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

const ExerciseCamera = () => {
  const webviewRef = useRef(null)
  const navigation = useNavigation();
  const [speed, setSpeed] = useState(0)
  const [reps, setReps] = useState(0)
  const ex = 1
  function getInjectableJSMessage(message) {
    return `
      (function() {
        window.dispatchEvent(new MessageEvent('message', {
          data: ${JSON.stringify(message)}
        }));
      })();
    `;
  }
  function onMessage(data) {
    let val = JSON.parse(data.nativeEvent.data)
    if (val.type === 'reps') {
      setReps(val.data.rep)
      if (val.data.speed !== 0) {
        setSpeed(val.data.speed)
      }
    }
    else if (val.type === 'completed') {
      navigation.navigate('dashboard', {
        screen: 'completeddailyexercise',
      });
    }
    else {
      console.log(val.data.rep)
    }
  }
  function sendDataToWebView(msg) {
    webviewRef.current.injectJavaScript(
      getInjectableJSMessage(msg)
    );
  }
  return (
    <View style={styles.container}>
      <Modal
        transparent={true}
        visible={true}
      >
        <View style={styles.top_container}>
          <TouchableWithoutFeedback
            onPress={() => {
              navigation.navigate('dashboard', {
                screen: 'completeddailyexercise',
              });
            }}>
            <Image
              style={styles.icons_container}
              source={require('../../Assets/play.png')}
            />
          </TouchableWithoutFeedback>
          <View style={styles.exercise_name_container}>
            <Text style={styles.exercise_name}>Side lunges</Text>
          </View>
          <TouchableWithoutFeedback
            onPress={() => {
              navigation.navigate('dashboard', { screen: 'dailychallange' });
            }}>
            <View style={styles.icons_container}>
              <Image
                style={styles.icon}
                source={require('../../Assets/close.png')}
              />
            </View>
          </TouchableWithoutFeedback>
        </View>

        <View style={styles.bottom_container}>
          <View style={styles.timer_container}>
            <Text style={styles.timer_text}>02:47</Text>
          </View>
          {reps > 0 ? (
            <View
              style={[
                styles.number_container,
                { justifyContent: speed > 0 ? 'space-between' : 'center' },
              ]}>
              {speed > 0 ? <Text style={styles.number}>{speed} RS</Text> : null}
              <Text style={styles.number}>{reps}/{exercises[ex].total}</Text>
            </View>
          ) : null}
        </View>
      </Modal>

      <WebView
        ref={webviewRef}
        mediaPlaybackRequiresUserAction={false}
        source={{ uri: 'https://uactivsite-mobile.netlify.app/' }}
        scalesPageToFit={false}
        mixedContentMode="compatibility"
        onMessage={onMessage}
        onLoad={event => {
          sendDataToWebView({
            data: exercises[ex],
            type: 'exercise'
          })
        }}
      />

    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  preview: {
    flex: 1,
  },
  top_container: {
    zIndex: 1,
    position: 'absolute',
    top: 43,
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
  },
  bottom_container: {
    zIndex: 1,
    position: 'absolute',
    bottom: 0,
    width: '100%',
  },
  number: { color: 'white', fontSize: 28 },
  exercise_name_container: {
    height: 40,
    width: 155,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 20,
    backgroundColor: 'rgba(255,255,255,0.2)',
  },
  number_container: {
    height: 62,
    backgroundColor: 'black',
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 19,
  },
  timer_container: {
    width: '100%',
    height: 78,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    backgroundColor: 'rgba(255,255,255,0.45)',
    alignItems: 'center',
  },
  timer_text: { color: 'black', fontSize: 48, fontFamily: 'Poppins-Bold' },
  icons_container: {
    height: 40,
    width: 40,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 50,
    backgroundColor: 'rgba(255,255,255,0.8)',
  },
  icon: { width: 16, height: 16, resizeMode: 'contain' },
  exercise_name: { color: 'black', fontFamily: 'Poppins-SemiBold', fontSize: 23 },
});
export default ExerciseCamera;