basst314 / ngx-webcam Goto Github PK

I have set all the propertied of the library "enable camera switch", "switch camera" but still I am unable to open the camera through Safari browser in iPhone XS/ iPad Air 2 in selfie mode. the back camera works fine but I am unable to open front camera by switching as well.
I am using ngx-webcam v0.2.2 and Angular 7.2.4. iOS version is 12.2.
The test link "https://basst314.github.io/ngx-webcam/? " works perfectly fine on both these devices.

Very strangely, the same code is working on iphone .

An urgent resolution on this would be of great help.

ngx-webcam works on development mode perfectly using ng serve but when deployed on a server in production mode the webcam does not come on it shows the error across all browsers:
Error: Uncaught (in promise): enumerateDevices() not supported.

having a blank screen.

Currently not supporting IE11.

Hi! This library is great.

I was wondering if the video element could be made public. In that way i can pass it to other libraries like face-api.js

// access video element
const video = this.webcam.video;
// pass it as input to face-api.js
from(faceapi.detectSingleFace(video)).subscribe((result) => { })

It would be great rather querying the element through document.
Thanks.

I would like to change the shape of <webcam></webcam> to be circular - even if the photos are rectangular I want the Frame to be circular -
Tried editing .webcam video .webcam-wrapper I can get the result in chrome dev tools but not through code.

When i will try to run http://localhost:4200(DemoPorject) on Safari browser at that time i got below

[Error] Trying to call getUserMedia from an insecure document.
initWebcam (ngx-webcam.es5.js:396)
switchToVideoInput (ngx-webcam.es5.js:325)
(anonymous function) (ngx-webcam.es5.js:144)
onInvoke (core.js:4948)
run (zone.js:138)
(anonymous function) (zone.js:858)
onInvokeTask (core.js:4939)
runTask (zone.js:188)
drainMicroTaskQueue (zone.js:595)
promiseReactionJob

It would be super nice being able to set the quality of the taken screenshot (and it's mime-type).

Direct-Link to Function:

Documentation of toDataURL: https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL

I really like this component and its simplicity. I just wanted to ask if there is a way to change the active camera? As far as I can tell the current behaviour uses the "first" camera it can find, e.g. the rear camera of a smartphone. I would like to give my users the options to switch the camera, e.g. the selfie camera. To keep the ngx-webcam component simple I would recommend an observable which rotates between all available sources, similar to the camera trigger. A boolean to get whether more than one device exists would also be nice, but not mandatory.
Some other ideas:

• Provide some sort of selection / drop down, but that's probably too specific.
• Option to make clickOnImage change the camera automatically

Thaks for this great simple component. Unfortunately there is an option missing to pass video options to the camera initialization.

In my case, I want to change the capture quality of the video, to make sure my snapshots are at the best possible resolution. Therefore I want to pass the additional parameters:

width: { ideal: 4096 }, height: { ideal: 2160 }

Currently the resolution is fixed to the screen resolution of the webcam module. This is not enough for many use cases.

Thank you for this awesome library.
I was about to do a production build (AOT) of our app
but getting meta data error saying I have version 4 and expected was 3.

I'm using Angular 4.4.6 version and I thought this is compatible.

Thanks.

Trying to use the DemoProject using ngx-webcam v2.0.0, which is not working.
Underneath are the captured errors

enumeratedDevices() not supported

Cannot read UserMedia from MediaDevices
The same app is working on android devices.

0.2.0 and above not working

Version 0.1.6 slightly changed how media tracks are requested from the browser API.

A bug, introduced with this release prevents the demo-page from working on at least one of my mobile devices.
Will look into it and keep everyone here updated.

Is there anyway to change the camera source into rear view as default?

Thanks for helping

Would it be possible to start/stop video recording then save it as .mp4 or something similar?

I can't get the camera working on mobile device.. How can i resolve that? Thank you!!

Webcam is triggering snaps on all browsers and their incognitos except Chrome incognito mode.
Demo is working fine on incognito

Thank you for creating great component. Initially I was facing issue that Cam was not switched off and it was resolved by implementing *ngIf="". However, great work from my QA team, they have created another scenario and reported it again :-)

If user clicks on "Take Picture" before the cam is ready (i.e. A black screen appears while cam is getting ready and user clicks on button immediately), then cam does not get off even if we destroy the component and we have to refresh page to get re-initialize.

Is there any way to get status of cam (if it is ready to use), so that I may hide/disable "Take Picture" button until cam is ready?

Thanks in advance.

The layout is gone in android browser.

When the demo page of this library is run in Firefox, the active device's deviceId is not returned when the camera is being activated. In the console it shows active device: undefined.

However, WebcamUtils.getAvailableVideoInputs() returns the video devices with deviceId.

Originally raised by @rajgsdei in #21.

when i am opening the page controls on webcam video are not displaying . i have to enable it by right click and show control option.

Hello,

please change the Button type of triggerSnapshot(); to something like type="button".
This has cost me more time then i would like to admit. (This caused my form to submit)

Kind regards,
Manuel

I was wondering if there is a way to turn the camera off after you are done using it.

On flag 'mirrorImage' you flip only css video, but not image. I fix it:

const context2d = _canvas.getContext('2d');
context2d.save();
context2d.scale(-1, 1);
context2d.drawImage(_video, _canvas.width * -1, 0, _canvas.width, _canvas.height);
context2d.restore();

I am not able to open camera on "Ipad" and "Microsoft windows surface", getting following message.

{ "message" : "Could not start video source", "mediaStreamError" : {} }

Anyone have an idea?

i used this module and it's really helpful but i have a little problem is how to close the webcam without closing the tab. Any help please

Hi friend, I tested your library on mac but it did not open. Do you have a solution?

For my cell phone I also could not open the WebCam, but for the stackblitz I managed .. do you have something to indicate about this?

in ubuntu 16.04.6
firefox 68.0 (64bits)

do not working and show this message:
{ "message": "Starting video failed", "mediaStreamError": {} }

Hi I have an issue in identifying whether the webcam permission is allowed or blocked by the user,
I did try checking with the device list but unfortunately its always coming device available, but need to find whether the user game permission or not.
Can anybody suggest, I did post my question on stackoverflow but unfortunately din't get any response. That's why had to post it here.

Please help.

I've got a problem while using this as dependency in my Angular 6 project.
This is what occurs on running my project after a npm-command:

sebastian@host:/path/to/my-project# ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-05-28T07:57:28.759Z
Hash: 2a73bb04a45e6f8c070a
Time: 14861ms
chunk {main} main.js, main.js.map (main) 1.97 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 703 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 69.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/ngx-webcam/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

ℹ ｢wdm｣: Failed to compile.

Angular can't deal with multiple versions of itself installed in dependencies.
For me the solution was just deleting the @angular folder from node_modules/ngx-webcam/node-modules in my project. No further issues occured since then.

This article seems to give a solution for that by just declaring angular as a peer dependency, so it is expected to be included by the dependent.

It would be great if we can customize the size of the camera. Like responsive of onDemand.

everything in the title

Update to support Angular 8.

Current latest stable Angular version is 0.8.1.

First camera switch always results in black screen on my mobile phone. After refreshing the page, it works perfectly. Any idea what might be causing this bug?

Hi,
I'm using ImageData returned by the WebcamImage for doing some operations. The problem is that I set some constraints on the webcam videoOptions input but they are not respected.
Here's my code:
Html component

<webcam id="webcam" [height]="height" [width]="width" [trigger]="triggerObservable" (imageCapture)="handleImage($event)"
                *ngIf="showWebcam" [allowCameraSwitch]="allowCameraSwitch" [switchCamera]="nextWebcamObservable" [mirrorImage]="mirrorImage"
                [videoOptions]="videoOptions" [imageQuality]="1" (cameraSwitched)="cameraWasSwitched($event)" [captureImageData]="captureImageData"
                (initError)="handleInitError($event)" [videoOptions]="mediaConstraints"></webcam>

Ts component

public height : number = 256;
public width : number = 256;
public showWebcam = true;
public allowCameraSwitch = false;
public multipleWebcamsAvailable = false;
public deviceId: string;
public mirrorImage : string = "always";
public captureImageData : boolean = true;
public mediaConstraints = {
    video: {
      optional: [
        {minWidth: 720},
        {minWidth: 1024},
        {minWidth: 1280},
        {minWidth: 1920},
        {minWidth: 2560},
        {minHeight: 720},
        {minHeight: 1024},
        {minHeight: 1280},
        {minHeight: 1920},
        {minHeight: 2560}
      ]
    }
  }

Here is a function where i pass imageData object and it always log 480 x 640 as pixels dimension of the screenshot also with mobile it log 640 x 480 (because the screenshot is taken vertically)

 private imagedata_to_image(imagedata) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = imagedata.width;
  canvas.height = imagedata.height;
  console.log(`Image data height: ${imagedata.height}, Image data width: ${imagedata.width}`);
  ctx.putImageData(imagedata, 0, 0);

  var image = new Image();
  image.src = canvas.toDataURL();
  return image;
}

Is this issue related to the library or am I doing something wrong?

Thanks

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.

Hi, i am encountering the above error. How do you resolve it? Thanks

DOMException: The play() request was interrupted
possible fix: https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

The WebcamImage object should contain the ImageDate from the canvas' context. So it would be easier to perform pixel-level manipulation on the captured image.

Sample: https://www.w3schools.com/tags/canvas_getimagedata.asp

public handleInitError(error: WebcamInitError): void {
if (error.mediaStreamError && error.mediaStreamError.name === "NotAllowedError") {
this.toastrService.error("Camera access was not allowed by user!");
}
}

how to access webcam??

Hello.

I like your library, so I want to use this in production.
But, there is one problem; MIT license has specified into package.json, but actually LICENSE file is missing.
Considiring package.json, I think this project is MIT Licensed, but I cannot prove that without LICENSE file.
Just in case, would you please add LICENSE file?

MIT license template is here:
https://opensource.org/licenses/mit-license.php

Thank you.

The component does not appera to work when wrapped in a cordova app. There's no error message in console. I need a component that works on web as well as in apk.

In firefox Quantum 61.0.1 missing video, but take snapshot.

I have tried to run it on Firefox 60.0.1 and 50.0.1 but it not working either of them. It's not showing the canvas and streams are not rendering.
I have used this package inside my application and this issue is now preventing us from delivering this. Can you please help me out with this ASAP.
Thanks.

When using Chrome in iOS, there is an error message "enumerateDevices() not supported".

I want to set rear camera as default camera when user access my web via their phone. I try to set facingMode in videoOption, follow description from this page:

public videoOptions: MediaTrackConstraints = {
    facingMode: 'environment'
  };

 <webcam height="480" resizeMode="crop-and-scale" ....
      [videoOptions]="videoOptions" [imageQuality]="0.7"
          ....>
  </webcam>

But there are nothing happen :(. Now, I try to switch camera base on MediaDeviceInfo.label but this is not good solution because we should not base on label rule (have front or back word inside label)

My question is: do we have any official way to get rear camera? I think this requirement every popular for mobile webapp

Thank you for supporting

Hi.
When I use my mobile phone with front camera, it seems not my expected image, it need to be reflected.
How can I do this?