ngx-scanner

ngx-scanner copied to clipboard

Please help me to resolve this issue. After scan complete i redirect to new page. but still site is taking the video input hence my device is getting so hot. i am using angular 8. Please explain me how to stop the video input once the scan is complete.

I have the exact same issue

I have the same problem, and when he reads it, I hide the camera, but when I return the camera view, it doesn't come back.

Can you help us?

Why is this not getting any attention?!

Hello! So you can stop the scanner element using it's API or by setting the scannerEnabled property to false.

To enable the scanner back you must set scannerEnabled to true and set the device again. "Why I need to set the device again?" - That's because the scanner component doesn't keep in memory the used device after disabling it, so it does not have a device to start scanning after disabled.

@unitrix0 my personal life is not concern of anyone, but I'd like to say I was in vacation and before that I was dealing with matters of my own interest since this project does not helps me with any financial support sometimes I just can't give attention to it, sorry 😕.

Hello! So you can stop the scanner element using it's API or by setting the scannerEnabled property to false.

To enable the scanner back you must set scannerEnabled to true and set the device again. "Why I need to set the device again?" - That's because the scanner component doesn't keep in memory the used device after disabling it, so it does not have a device to start scanning after disabled.

While this does stop the code detection, it is not what we're looking for. The problem is that the camera stream is still running. And there seems to be no way of ending that stream.

Stopping the scanner should stop the stream, if it doesn't we have a bug. Could you set up a demo for us to inspect?

After trying around with various things I've found out that it is related with the "tryHarder" flag. If it is set the stream doesn't seem to end. More precisely I've initiated the scan like this:

export class CodeScanner2Component implements OnInit {
  @ViewChild(ZXingScannerComponent) scanner: ZXingScannerComponent;

  constructor() {
  }
  startScan() {
    this.scanner.updateVideoInputDevices().then(devices => {
      this.scanner.device = devices[0]; 
    });

    this.scanner.askForPermission().then(permission => {
      console.log('Permissions response: ' + permission);
      this.scanner.tryHarder = true;
    });
  }
}

However it does end if I do it this way:

export class CodeScanner2Component implements OnInit {
  @ViewChild(ZXingScannerComponent) scanner: ZXingScannerComponent;

  constructor() {
  }
  startScan() {
    this.scanner.updateVideoInputDevices().then(devices => {
      this.scanner.device = devices[0];
    });
    this.scanner.tryHarder = true;  // ************* Line moved
    this.scanner.askForPermission().then(permission => {
      console.log('Permissions response: ' + permission);      
    });
  }
}

That seems like fun. That probably happens due to the way Angular checks changes in the components.

well I wouldn't call it fun... I tried to follow the try harder flag through the code but I lost track... Maybe an issue in the way it is processed

Hey Guys did you find any solution to stop video stream after scan complete , I am also facing same problem can't hide camera after scan completed

yes, as I wrote in my last post, setting the "try harder" Option to false solved the issue for me.

<zxing-scanner *ngIf="!qrResultString"... Before scan complete this property is null, as you initialized it.

Okay, Gotcha. Thanks for reply.

On 27/08/2020, Sandru Mircea Ioan [email protected] wrote:

<zxing-scanner *ngIf="!qrResultString"... Before scan complete this property is null, as you initialized it.

-- You are receiving this because you commented. Reply to this email directly or view it on GitHub: https://github.com/zxing-js/ngx-scanner/issues/267#issuecomment-681091654

I have this problem , i don't stop the stream camera.can anyone help me?

This works form me. As soon as you fetch a result you can stop the camera using .reset() method: async handleQrCodeResult(resultString: string) { this.qrResultString = resultString; this.scanner.reset(); }

@sandrumirceaioan, I tried your solution but getting TypeError: Cannot read property 'length' of undefined

Referring to @odahcam suggestion of setting scannerEnabled I am somewhat taken aback. Using the code for multi-camera that variable is not set in the embedded javascript. it is quite clear that codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => { is intended to scan continuously consistent with the logging console.log('Started continous decode from camera with id ${selectedDeviceId}'). The string scannerEnabled is not found in this repository. So I fail to see how the suggestion would allow to toggle the scanner off (based on a result), then back on on user command.

@sandrumirceaioan 's suggestion sounds interesting but it is not obvious to me where to invoke it in the linked example and whether this would conflict with the document.getElementById('resetButton') block.

Some other suggestions refer to another verb barcodeView.decodeContinuous(callback); leading to a thought that library dependencies are at play. Is there a list of commands, based on the context that one can refer to ?

@dvodvo

The string scannerEnabled is not found in this repository.

It just got renamed: https://github.com/zxing-js/ngx-scanner/blob/42e6ad4f58fd235bd15d688d36050a4ea25fdc01/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L338

I kinda found a solution.

<zxing-scanner *ngIf="showScanner" #scanner (scanSuccess)="scanSuccessHandler($event)"> </zxing-scanner>

scanSuccessHandler(event){ this.showScanner = false; this.showScanBtn = true; console.log(event); //Other logics }

The above approach closes the scanner after a single successful scan. Not sure if it is exactly the solution you all are looking for but I hope it helps.

I used the solution of @bratinkundu.

I just wrapped the zxing-scanner html like :

<div class="qr-scan-area" *ngIf="showScanner">
  <zxing-scanner
    class="area"
    #scanner
    [(device)]="currentDevice"
    (scanSuccess)="onCodeResult($event)"
    (permissionResponse)="onHasPermission($event)"
    [formats]="allowedFormats">
  </zxing-scanner>
  <div class="qr-area" *ngIf="hasPermission">
    <div class="area"></div>
  </div>
</div>

I settled a variable showScanner to true in the file.ts When the scan is successful onCodeResult( ) then toggle showScanner to false. My camera's macbook turned off.

I also got a button which trigger reset of QRresult and this function toggle showScanner to true then my camera turned on.

@sandrumirceaioan's solution worked for me. Once I set this.scanner.reset(); in the handleQrCodeResult method, the camera loaded faster on each iteration and I observed that scanning was quicker.

For me, what solved this issue was to manually set this.scanner.enable = false; within my ts file.

None of the other approaches mentioned here worked so far.

I used stopScan() which stopped the scan plus I added a timeout followed by a startScan() just in case I there was a problem with what was scanned...

onCodeResult(result: string) {
    this.operator_details.emit(result); 
    this.scanner.scanStop()
    setTimeout(() => {
      this.scanner.scanStart()
    },3000)
  }

@Ken-mbira

@ViewChild(ZXingScannerComponent) scanner: ZXingScannerComponent;
onCodeResult(result: string) {
 this.operator_details.emit(result); 
   this.scanner.scanStop()
   setTimeout(() => {
     this.scanner.scanStart()
   },3000)
 }

This is worked for me. Thanks.

Even if i use this.scanner.scanStop() or this.scanner.reset(); or *ngIf, still multiple API's are getting trigger (means multiple scans are happening)

In my case i was using angular and this helped to close the camera in background

await navigator.mediaDevices.getUserMedia({ audio:false, video: true }).then((stream: any) => { const track = stream.getTracks()[0]; track.stop(); });