I'm developing an app that uses machinelearning to detect yogaposes for a school project. I'm not experiences enough to work in React Native with the camera and my model and so on, so I made the functionality in a basic html page that's online and I use WebView to show it in my app. I'm testing on iOS, in Expo.
What happens is this: the screen opens, it loads the html page, it asks for my camera, I say yes, it opens the camera as it should but then an overlay opens like it's showing a live feed or a fullscreen video. When I swipe it away, I can see the camera working behind it, but once I click the X to close it, my camera also stops.
Weird question, I know, but does anyone have an idea about how to fix this?
HTML code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Yogism Tech Demo</title><link rel="icon" href="./src/media/logo.svg" sizes="32x32" /><link rel="stylesheet" href="src/style.css"></head><body onload="init()"><div class="container"><div id="label-container" class="label-container"></div><div id="webcam-container" class="webcam-container"></div><div class="record-button-container"><button type="button" class="record-button"></button></div></div><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script><script type="text/javascript"> const URL = "src/imageModel/"; let model, webcam, labelContainer, maxPredictions; async function init() { const modelURL = URL +"model.json"; const metadataURL = URL +"metadata.json"; model = await tmImage.load(modelURL, metadataURL); maxPredictions = model.getTotalClasses(); const flip = true; const webcamWidth = window.innerWidth; const webcamHeight = window.innerHeight; webcam = new tmImage.Webcam(webcamWidth, webcamHeight, flip); await webcam.setup(); await webcam.play(); window.requestAnimationFrame(loop); document.getElementById("webcam-container").appendChild(webcam.canvas); labelContainer = document.getElementById("label-container"); for (let i = 0; i < maxPredictions; i++) { labelContainer.appendChild(document.createElement("div")); } } let lastPredictionTime = 0; async function loop() { const currentTime = new Date().getTime(); if (currentTime - lastPredictionTime >= 2000) { await predict(); lastPredictionTime = currentTime; } webcam.update(); window.requestAnimationFrame(loop); } async function predict() { const prediction = await model.predict(webcam.canvas); let maxProbability = 0; let maxIndex = 0; for (let i = 0; i < maxPredictions; i++) { if (prediction[i].probability > maxProbability) { maxProbability = prediction[i].probability; maxIndex = i; } } const className = prediction[maxIndex].className; const probability = prediction[maxIndex].probability.toFixed(2); labelContainer.innerHTML = className; labelContainer.style.backgroundColor = ""; labelContainer.style.color = "#F5F5F5"; labelContainer.style.fontFamily = "Archivo"; labelContainer.style.opacity = "1"; labelContainer.style.border = "2px solid transparent"; labelContainer.style.borderRadius = "15px"; switch (className) { case "Not doing pose": labelContainer.style.backgroundColor = "rgba(165, 157, 154, 0.65)"; // 65% transparent grey labelContainer.style.borderColor = "#A59D9A"; // Grey border color break; case "Fair": labelContainer.style.backgroundColor = "rgba(255, 248, 91, 0.65)"; // 65% transparent yellow labelContainer.style.borderColor = "#FFF85B"; // Yellow border color break; case "Decent": labelContainer.style.backgroundColor = "rgba(250, 228, 203, 0.65)"; // 65% transparent orange labelContainer.style.borderColor = "#FAE4CB"; // Orange border color break; case "Excellent": labelContainer.style.backgroundColor = "rgba(61, 255, 92, 0.65)"; // 65% transparent green labelContainer.style.borderColor = "#3DFF5C"; // Green border color break; case "Perfect": labelContainer.style.backgroundColor = "rgba(61, 255, 243, 0.65)"; // 65% transparent blue labelContainer.style.borderColor = "#3DFFF3"; // Blue border color break; default: break; } }</script></body></html>import React, { Component } from "react";import { View } from "react-native";import { WebView } from "react-native-webview";export default class App extends Component { render() { // const runFirst = ; return (<View style={{ flex: 1 }}><WebView source={{ uri: "https://yogism-demo-formcheck.vercel.app/", }} onMessage={(event) => {}} /></View> ); }}Picture 1: opening the app
Picture 2: the overlay opens automatically and gives a black screen
Picture 3: what is behind the overlay (I can see my head moving so the camera works, but if I close the overlay, it freezes)
