Unable to stop the camera when route chaned (help!!!!)

[shayan-developer]

No description provided.

[svendudink]

adding ReactDOM.unmountComponentAtNode(QrReader) works for me, hope it will work for you guys as well

`
import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
import { ReactDOM } from "react";

const Test = (props) => {
const [data, setData] = useState('No result');

return (
<>
<QrReader
onResult={(result, error) => {
if (!!result) {
setData(result?.text);
ReactDOM.unmountComponentAtNode(QrReader)
}

      if (!!error) {
        console.info(error);
      }
    }}
    style={{ width: '100%' }}
  />
  <p>{data}</p>
</>

);
};
`

[isneverdead]

adding ReactDOM.unmountComponentAtNode(QrReader) works for me, hope it will work for you guys as well

` import React, { useState } from 'react'; import { QrReader } from 'react-qr-reader'; import { ReactDOM } from "react";

const Test = (props) => { const [data, setData] = useState('No result');

return ( <> <QrReader onResult={(result, error) => { if (!!result) { setData(result?.text); ReactDOM.unmountComponentAtNode(QrReader) }

      if (!!error) {
        console.info(error);
      }
    }}
    style={{ width: '100%' }}
  />
  <p>{data}</p>
</>

); }; `

nope, I also have the same problem, then I tried your method but i can see the component is gone but the camera is still on

[iceboy07]

is there any solution?

[isneverdead]

is there any solution?

Here there is some temporary library #279 (comment) I hope this can solve your problem

[iceboy07]

is there any solution?

Here there is some temporary library #279 (comment) I hope this can solve your problem

Thanks but it isnt working...

[isneverdead]

is there any solution?

Here there is some temporary library #279 (comment) I hope this can solve your problem

Thanks but it isnt working...

ok then 😂, i know its not a good idea it can destroy the UX but for me instead of burning my camera because it keep running in the background,
I used this bandage solution, I used this code to reload the application window.location.reload(false); and I added some animations in it so that the user can't really notice if the page is being reloaded.

[iceboy07]

is there any solution?

Here there is some temporary library #279 (comment) I hope this can solve your problem

Thanks but it isnt working...

ok then 😂, i know its not a good idea it can destroy the UX but for me instead of burning my camera because it keep running in the background, I used this bandage solution, I used this code to reload the application window.location.reload(false); and I added some animations in it so that the user can't really notice if the page is being @reloaded.

I cant do that. i will erase all my data which was stored before scanning. Anyway, thank a lot @isneverdead

[isneverdead]

is there any solution?

Here there is some temporary library #279 (comment) I hope this can solve your problem

Thanks but it isnt working...

ok then 😂, i know its not a good idea it can destroy the UX but for me instead of burning my camera because it keep running in the background, I used this bandage solution, I used this code to reload the application window.location.reload(false); and I added some animations in it so that the user can't really notice if the page is being @reloaded.

I cant do that. i will erase all my data which was stored before scanning. Anyway, thank a lot @isneverdead

no problem, maybe you can store the data first to the local storage? yea i know it will a lot of work, but if you have any other library that working please let me know 🙂

[guidoabelleira]

I have the same problem in my localhost, although when I send to production this inconvenience does not happen and it works correctly.

[mariusiscoding]

Me too, localhost it does not stop fire the event if it had a result, even if the qr code area is not displayed any more because of a true/false value for showing the camera image.
In Production it works (version 3.0.0-beta-1)

[Patrick-Sherlund]

You can stop the video track while the component is unmounting - the useEffect also ensures the video track isn't stopped upon first render of the component. See the following PR for details #357

[tmb-01]

I removed <React.StrictMode> and it worked.