Browser is out of memory when a page with Instascan is opened for a big amount of time

[dropsonic]

I have a simple page with Instascan. This page is shown in the vending machine, so it is open 24/7. After a couple of hours, the browser is out of memory (tested on latest Chrome / Firefox, Windows 10).

Could you please advise how can I fix this issue?

My code is pretty straight-forward:

let scanner = new Instascan.Scanner({ video: document.getElementById("preview") }); // <video id="preview"/>
scanner.addListener("scan",
    function (content) {
        document.getElementById("edOrderCode").value = content; // input element inside the form
        document.getElementById("formOrder").submit(); // form itself
    });

Instascan.Camera.getCameras().then(function(cameras) {
    // Choose the front camera if there is any
    if (cameras.length > 0) {
        var camera = cameras.find(c => c.name && c.name.match(/front/gi));
        if (!camera) {
            if (cameras.length > 1)
                camera = cameras[1];
            else
                camera = cameras[0];
        }
        scanner.start(camera);
    } else {
        console.error("No cameras found.");
    }
}).catch(function(e) {
    console.error(e);
});

[kibagami-jubei]

There's a listener for inactivity, I think your're supposed to stop the scanner when it hits. You set it up like how you do the scan listener. I'm not having that problem right now, maybe I might try it out.

[dropsonic]

@kibagami-jubei README states that there is inactive callback (scanner.addListener('inactive', callback)). But it is emitted when the scanner becomes inactive as the result of scanner.stop or the tab losing focus. In my case, nothing calls scanner.stop, and the tab doesn't lose focus because my web page is opened on a Windows-based tablet 24/7.

[kibagami-jubei]

@kibagami-jubei README states that there is inactive callback (scanner.addListener('inactive', callback)). But it is emitted when the scanner becomes inactive as the result of scanner.stop or the tab losing focus. In my case, nothing calls scanner.stop, and the tab doesn't lose focus because my web page is opened on a Windows-based tablet 24/7.

Ah, okay, I misread that. My apologies.

I'm thinking it's probably a good idea to stop the scanner at some point. During my development, I was having scanner issues when going back and forth between pages. I solved that by stopping the the scanner and clearing out all listeners.

You might also want to consider that there may that web RTC adapter they're using as well.

With that said, do you have any specific logged errors you can show us?

Also, cameras eat up a lot hardware resources. Leaving the camera active on my phone drains battery, I can imagine the same, if not worse, when the browser is using the camera with a website.

[dropsonic]

You might also want to consider that there may that web RTC adapter they're using as well.

The demo imports WebRTC adapter explicitly: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"></script> I did it the same way, and also tried to use more modern version, but with no success: <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.min.js"></script>

With that said, do you have any specific logged errors you can show us?

It shows me two warnings:

1. Invalid asm.js: Type mismatch in assignment (instascan.min.js:18)
2. URL.createObjectURL(stream) is deprecated, please use elem.srcObject = stream instead. (adapter.min.js:1)

I'm thinking it's probably a good idea to stop the scanner at some point. Also, cameras eat up a lot hardware resources. Leaving the camera active on my phone drains battery, I can imagine the same, if not worse, when the browser is using the camera with a website.

My tablet is embedded into the vending machine, and it has the power cable connected all the time, so there are no issues with hardware resources or battery. The tablet shows a web page that scans the order code encoded in QR code, so I'd prefer not disabling the auto-scan because it decreases the user experience.

[ashfame]

I am noticing the same behavior in firefox running on Raspberry Pi 2B (1GB RAM). Scanner once opened, starts consuming few MBs every second until it has consumed all of the free memory (230M) & crashes the browser tab, after which the entire memory is released right away.

I noticed sometimes it tries to free up some memory, which would be Garbage Collector running & free memory shoots up but eventually it exhausts free memory.

I am going to try to stop and restart scanner as a workaround to prevent it from crashing, but there is definitely a memory leak here.

[ashfame]

As a workaround, I stop the scanner after few seconds which prevents it from eating all the free memory and eventually allows enough time for the GC to run and recover memory. But should be fixed in the library nonetheless.