basst314 / ngx-webcam-demo Goto Github PK

why we have two click to switch camera from front to back

Hi there is a new update to google chrome browser and ngx-webcam stopped working. I do not have a problem on the web browser, but when the camera switches from front to back in the mobile browser, the browser freezes. When I take a picture, it freezes and I cannot do anything. I have to close the browser

How could we style the video and canvas elements of ngx-webcam?

There is an option to select preffered facing mode in the Live-Demo. The code for it is missing here.

hi @basst314
im getting those error message in my log console. my Angular version
Angular: ~8.2.
Typescript: ~3.5.3

Hi,
following the example I ended up with the following line in my code:

public webcamImage: WebcamImage = null;

Unfortunately, it does not like the = null and tells me I cannot assign null value...

The thing is, I don't know what to do since the example is doing exactly that :-/

Maybe there is a bug with the latest version of Angular I am using?

Thank you.

Should the live demo work on my iPhone X? I’m getting a message “Cannot access media from User Device.” No prompt for permissions or camera access when I run the demo or press take picture.

I am building an Angular-App and i want to build a nativ android app through android studio.
But i cant access the camera thougt the emulator and also not througt building and installing an apk on another mobile phone.

I also dont get any permission-question from android

I nearly copied everything in the src/app folder and used it 1:1
https://github.com/pretteter/BA_Projekt/tree/master/smartphoneapp_for_cameramanagementsystem

I always get the message, that the user denied camera access
{ "message": "Permission denied",
"mediaStreamError":{}}

Using the Demo-Programm and developing in Chrome do not have any Problems at all

Not able to build the code base in production environment, shows the following error

ERROR in Error during template compile of 'WebcamModule'
Function calls are not supported in decorators but '?makeDecorator' was called
in 'NgModule'
'NgModule' calls '?makeDecorator'.

When i run the angualr 5 project in dev mode, build is successful
but when i choose Prod mode command as "ng build --aot", the above error pops up in CLI.

The layout has problem on android phone.

angular项目，使用localhost地址发布项目，可以正常调用笔记本的摄像头。但是当用网络的ip地址发布项目后，就无法调用了，请问怎么解决？

After deploying angular application to server ngx-webcam is showing errors.
https://user-images.githubusercontent.com/34974441/68767400-73e1af80-0642-11ea-8da2-f14db9e1c787.png
Angular Dependencies:
"dependencies": { "@angular/animations": "8.0.0", "@angular/cdk": "^8.0.0", "@angular/common": "8.0.0", "@angular/compiler": "8.0.0", "@angular/core": "8.0.0", "@angular/forms": "8.0.0", "@angular/platform-browser": "8.0.0", "@angular/platform-browser-dynamic": "8.0.0", "@angular/router": "8.0.0", "@fullcalendar/core": "4.0.2", "@fullcalendar/daygrid": "4.0.1", "@fullcalendar/interaction": "4.0.2", "@fullcalendar/timegrid": "4.0.1", "chart.js": "2.7.3", "font-awesome": "^4.7.0", "intl": "1.2.5", "ngx-webcam": "^0.2.6", "primeflex": "1.0.0-rc.1", "primeicons": "^2.0.0", "primeng": "8.0.0", "quill": "^1.3.7", "rxjs": "6.4.0", "web-animations-js": "github:angular/web-animations-js#release_pr208", "zone.js": "0.9.1" }

TypeScript

import { Component, OnInit } from '@angular/core';
import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';
import { Observable, Subject } from 'rxjs';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.css']
})
export class CameraComponent implements OnInit {
  public showWebcam = true;
  public allowCameraSwitch = true;
  public multipleWebcamsAvailable = false;
  public deviceId: string;
  public videoOptions: MediaTrackConstraints = {
    // width: {ideal: 1024},
    // height: {ideal: 576}
  };
  public errors: WebcamInitError[] = [];
  public webcamImage: WebcamImage = null;
  private trigger: Subject<void> = new Subject<void>();
  private nextWebcam: Subject<boolean | string> = new Subject<boolean | string>();
  constructor() { }

  ngOnInit() {
    WebcamUtil.getAvailableVideoInputs()
      .then((mediaDevices: MediaDeviceInfo[]) => {
        this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
      });
  }
  public triggerSnapshot(): void {
    this.trigger.next();
  }
  public toggleWebcam(): void {
    this.showWebcam = !this.showWebcam;
  }

  public handleInitError(error: WebcamInitError): void {
    if (error.message === "Permission denied") {
      error.message += " To Access Camera"; 
      this.errors.push(error);
    } else {
      this.errors.push(error);
    }
  }

  public showNextWebcam(directionOrDeviceId: boolean | string): void {
    this.nextWebcam.next(directionOrDeviceId);
  }

  public handleImage(webcamImage: WebcamImage): void {
    this.webcamImage = webcamImage;
  }

  public cameraWasSwitched(deviceId: string): void {
    console.log('active device: ' + deviceId);
    this.deviceId = deviceId;
  }

  public get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
  }

  public get nextWebcamObservable(): Observable<boolean | string> {
    return this.nextWebcam.asObservable();
  }
}

Html

<div class="ui-g-4">
            <img style="width:50%;"
              [src]="webcamImage.imageAsDataUrl" />
    </div>
   <div class="ui-g-8">
            <button id="capturebtn" (click)="captureImageDialogShow()"
              class="myCaptureBtn ui-button ui-widget ui-state-default ui-corner-all">
              <span class="ui-button-text ui-c"><i class="fa fa-camera" aria-hidden="true"></i>                             
                   &nbsp;Capture Image</span>
            </button>
   </div>

"@angular/cli": "~9.1.3",
"typescript": "~3.8.3"
"rxjs": "~6.5.4",

ERROR in node_modules/ngx-webcam/src/app/modules/webcam/webcam.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of DocDeviceModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-webcam) which declares WebcamModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.