React-Webcam Starts webcam but stops automatically

Hello All !!

I was recently working with react-webcam and noticed a problem

I followed

https://medium.com/nerd-for-tech/using-react-webcam-in-a-function-component-448fa8de4fd9

and noticed that when i click start webcam the webcam light turns on and within 2–3 seconds the light turns off and during this whole time there was webcam output on the screen

This post gives the solution of how to fix this and believe me the solution is super simple, this solution works if you created the react app using

npx create-react-app my-app

Solution:

1. Open src > index.js

Ignore the IMAGEDETECTION folder name that was the project i was working on

It should look something like:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2. Remove <React.StrictMode>

remove the <React.StrictMode> wrapper

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Conclusion: There you go by removing <React.StrictMode> wrapper the webcam should start working fine