I’m Trying To Add a background color to my webcam project
But when I add <WebcamCapture />
with
<div
style={{ backgroundColor: bgcolor, width: "100vw", height: "100vh" }}
className="App"> it get an error,
but when I run each one separately it runs (either background becomes blue or the camera without the blue background, I want to have both)
import React, { useState } from 'react';
import './App.css';
import WebcamCapture from './Webcam/webcam'
//import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
//import Home from './pages/pagesindex';
//import SigninPage from './pages/signin';
function App() {
var colors = [
{
value: 1,
label: "blue"
}
];
var [inputValue, setInputValue] = useState(colors[0].label);
var [bgcolor, setbgColor] = useState(colors[0].label);
return (
<WebcamCapture />
<div
style={{ backgroundColor: bgcolor, width: "100vw", height: "100vh" }}
className="App"
>
</div>
);
}
export default App;
This is how I want it look like