Camera Light not turn off after CameraPreview.stop() called

Hi @arielhernandezmusa ,

thanks to your capacitor plugin, i can put image overlay when taking picture in PWA, but there’s something strange about the camera behaviour.

When i called the CameraPreview.stop(), it did stop the camera but the green light is still on(i’m using mac). Is this a right behaviour ? i’m comparing itwith Camera PWA and it did stopped the light after i hit a close button.

i’m using Ionic React and the div is inside IonModal. stopCamera function will be called as hook function to App.tsx.

PhotoPreview.tsx

`const stopCamera = async ()=> { console.log(“stop triggered”); const result = await CameraPreview.stop(); console.log(result);

}`

app.tsx `const showCameraModalDismissHandler = () => { (stopCamera() as any).then( setShowCameraModal(false) )

}`

<IonModal onDidPresent={() => showCameraModalPresentHandler()} onWillDismiss={() => showCameraModalDismissHandler()} isOpen={showCameraModal}> <div id="cameraPreview" style={{flex: "1 1 0%",overflow: "hidden"}}></div> </IonModal>

Appreciate any feedback!

[garryalfa]

i see @arochet, so you make it as global variable and make stop function become sync, will try it.

thanks for the insight and code! hope @arielhernandezmusa can give comment for it.

thanks

[arochet]

Hi,

Finally i decide to make my own camera preview. I keep the “tracks” of the stream global and i stop() them. Hope this help the developper to to fix the issue. The camera light turn off.

Html code :

<ion-content>
  <div *ngIf="takingPhoto == true">
    <ion-fab vertical="bottom" horizontal="center" slot="fixed">
      <ion-fab-button (click)="capturePhoto()">
        <ion-icon name="camera"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </div>

  <!-- Video & Canvas -->
  <div id="cameraPreview"></div>
  <canvas id="result"></canvas>

</ion-content>

<div *ngIf="takingPhoto == false">
  <ion-footer>
    <ion-toolbar>
      <ion-buttons slot="secondary">
        <ion-button fill="clear" (click)="start()">
          Reprendre
        </ion-button>
      </ion-buttons>
      <ion-buttons slot="primary">
        <ion-button fill="clear" (click)="dismiss()">
          OK
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-footer>
</div>

and TypeScript Code

theTracks = [];//List of tracks of stream
  width: number;//Width of the video
  height: number;//Height of the video
  takingPhoto: boolean = true;//Camera is on/off
  video: HTMLVideoElement;//Display the result of camera
  canvas: HTMLCanvasElement;//Display the image the user capture

  constructor(private modalCtrl: ModalController) {
  }

  ngOnInit() {
    this.width = window.screen.width;
    this.height = window.screen.height - 100;

    //Append <video>
    this.video = document.createElement("video");
    this.video.id = "video";
    this.video.setAttribute("style", "-webkit-transform: scaleX(-1); transform: scaleX(-1);");
    const parent = <HTMLElement>document.getElementById("cameraPreview");
    parent.appendChild(this.video);
    this.canvas = <HTMLCanvasElement>document.getElementById("result");

    //Start Camera
    this.start();
  }

  capturePhoto() {
    this.capture().then(() => {
      this.stop();
    });
  }

  displayVideo(dispVideo: boolean) {
    this.takingPhoto = dispVideo;//We are taking video
    this.canvas.hidden = dispVideo;//Canvas of img is hide
    this.video.hidden = !dispVideo;//Video start
  }

  //Plug-in
  async start(): Promise<{}> {
    return new Promise((resolve, reject) => {
      //Display element
      this.takingPhoto = true;
      this.video.hidden = false;
      this.canvas.hidden = true;

      //Start recording
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: { width: this.width, height: this.height } }).then(
          (stream) => {
            this.video.srcObject = stream;
            this.video.play();

            const tracks = stream.getTracks();
            tracks.forEach(track => {
              this.theTracks.push(track);
            });

            resolve();
          },
          err => {
            reject(err);
          }
        );
      }
    });
  }

  stop() {
    //Stop element
    this.takingPhoto = false;
    this.video.hidden = true;
    this.canvas.hidden = false;

    //Stop recording
    this.theTracks.forEach((track) => { track.stop(); });
  }

  async capture(): Promise<any> {
    return new Promise((resolve, _) => {
      const context = this.canvas.getContext("2d");
      this.canvas.width = this.video.videoWidth;
      this.canvas.height = this.video.videoHeight;
      context.drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight);
      resolve({
        value: this.canvas
          .toDataURL("image/png")
          .replace("data:image/png;base64,", "")
      });
    });
  }

  dismiss() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

Customize as you want. I will improve it.

Thank you