How do I deactivate camera when I leave page?

[Chehan-nethsara]

When I move to the record page and allow the permission then without recording if I go to the different page still camera get active. So How do I deactivate camera when I go to the another page?

[Chehan-nethsara]

@0x006F FYI

[DeltaCircuit]

Hey, sorry, got busy a bit. Does the component gets unmounted while navigating?

I'm on the road, just thinking out loud. I will check this once I get to the desk..

[mateomotriz]

I'm having this issue using the media recorder as a hook;

when I navigate to other pages the webcam is still active, sometimes stops after 30s-1min and sometimes not; it only stops if the user refreshes the page

[kazzkiq]

It seems that useReactMediaRecorder() hook promptly requests for audio/video recording, whilst it should only call for it upon startRecording() calls.

This means whenever you have this hook in your component, even before recording anything, the browser/OS will show mic/camera activity.

[rockyhuber]

I hacked it for now, not a great solution, but works. const video = document.querySelector('video'); // A video's MediaStream object is available through its srcObject attribute const mediaStream = video.srcObject; // Through the MediaStream, you can get the MediaStreamTracks with getTracks(): const tracks = mediaStream.getTracks(); tracks.forEach(track => track.stop());

[DeltaCircuit]

@Chehan-nethsara can you pull the latest version 1.5.0 and check whether the problem persists?

[neilnahid]

@0x006F currently using 1.5.0 and the problem still persists.

@Chehan-nethsara can you pull the latest version 1.5.0 and check whether the problem persists?

[laurynas-wn]

Any update on the issue? @0x006F

[DeltaCircuit]

hmm... this wasn't happening for me when I tested. Let me try this one more time

[laurynas-wn]

For some additional explanation, If this isn't what OP meant. When I navigate away and the component gets unmounted. The red dot in the tab view still stays.

[DeltaCircuit]

@laurynas-wn can you check this Codesandbox?

[tylim88]

I have similar issue

I want to start the camera as soon as the camera mounted so i can preview the stream immediately

import { ReactMediaRecorder } from "react-media-recorder";

const Initialize = ({ callback }: { callback: () => void }) => {
    useEffect(() => {
        callback()
    },[])

    return null
}

const RecordView = () => (
  <div>
    <ReactMediaRecorder
      video
      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
        <div>
          <Initialize callback={startRecording}/>
          <button onClick={stopRecording}>Stop Recording</button>
          <video src={mediaBlobUrl} controls />
        </div>
      )}
    />
  </div>
);

this causes a serious issue, because react useEffect run twice in development mode, it bugged the start recording I can stop the recording and turn the status to 'stopped' but I cannot not shut down the camera

In production, it has no issue