Live Stream leaves a black screen

I’ve incorporated Quaggajs successfully into my node project however after the scan is complete and Quagga.stop() is called a black screen fills the area of the scanner and doesn’t close out. I am using the LiveStream function. Has anyone else had to deal with this problem?

Here is my code:

Index.html:

<section id="UPC Search"> <form id="form-search"> <button class="submit-button mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Scan barcode</button> <input type="hidden" name="query" value=""/> <div id="interactive" class="viewport"></div> </form>

` var $formSearch = $(“#form-search”); var $submitButton = $formSearch.find(‘.submit-button’);

$submitButton.on(‘click’, function(e){ e.preventDefault(); //prevent form submission openReader(); });

            $formSearch.submit(function(event) {
                // cancel default behavior
                event.preventDefault();


                var query = $formSearch.find("input[name='query']").val();
                console.log("index query value = "+ query);

                $brand.html('');
                $manufacturer.html('');
                window.upcSearch.queryProducts(query, $brand, $manufacturer, $subsidies, $violations, $co_profile_description, $parentCo);

            }); `

BarcodeReader.js:

`function openReader(){ Quagga.init({ inputStream: { name: “Live”, type: “LiveStream”, constraints: { width: 640, height: 480, facingMode: “environment” } }, locator: { patchSize: “medium”, halfSample: true }, numOfWorkers: 4, locate: true, decoder : { readers: [“upc_reader”, “upc_e_reader”] } }, function() { Quagga.start(); });

Quagga.onDetected(function(result) { var code = result.codeResult.code; console.log("The code is "+code);

var $form = $("#form-search");

$form.find("input[name='query']").val(code);
Quagga.stop();
$form.submit();

}); } `

https://github.com/ruskibenya/DolDem/tree/quaggajs

[shwetameta]

I solved it by setting the desired value via jquery and triggering the change event.

Thanks

[ericblade]

I use this for my constraints block to specify camera

                constraints: {
                    width: 640,
                    height: 480,
                    ...(cameraId && { deviceId: cameraId }),
                    ...(!cameraId && { facingMode: 'environment' }),
                },

if cameraId is not falsy, then use deviceId: cameraId, otherwise use the (i believe deprecated, but still working) facingMode: ‘environment’ constraint

I do wonder if it would be possible to specify constraints such as aspect ratio, as required elements, to automatically prevent the wide-angle lenses from being used. I do not know what numbers would need to be plugged in to do that, though.