jonashartmann/webcam-directive

Angularjs directive to access the webcam

Webcam manipulation with HTML5

An AngularJS directive to manipulate the webcam.

You can easily add it as a module to your own app.

A complete example can be found at http://jonashartmann.github.io/webcam-directive (gh-pages)

Download

Using NPM

npm install webcam

Using Bower

bower install webcam-directive

There is a tag for each version, with the built javascript file inside the dist directory

Ex.: dist/webcam.min.js

Installation

Using script tag

<script type="text/javascript" src="webcam.min.js"></script>

Usage

Add module "webcam" as dependency

angular.module('myapp', ['webcam']);

Then add the new element in HTML

<webcam></webcam>

Advanced Usage

Set a custom placeholder image to be shown while loading the stream

<webcam placeholder="'img/ajax-loader.gif'">

Callbacks

function MyController($scope) {
  $scope.onError = function (err) {...};
  $scope.onStream = function (stream) {...};
  $scope.onSuccess = function () {...};
}

<webcam
  on-stream="onStream(stream)"
  on-streaming="onSuccess()"
  on-error="onError(err)">
</webcam>

Set a channel to bind data

function MyController($scope) {
  $scope.myChannel = {
    // the fields below are all optional
    videoHeight: 800,
    videoWidth: 600,
    video: null // Will reference the video element on success
  };
}

<webcam
  channel="myChannel">
</webcam>

see more examples wiki

Contribute

1. Fork and clone this repository

2. Install dependencies

   npm install

3. Build/test with grunt

   grunt test

4. Make a Pull Request (it will only be merged if it passes the Travis build)

Or just help by creating issues.

Technologies used in this project

• AngularJS
• Yeoman
• getUserMedia
• canvas
• video

The code is licensed under the MIT License. @see LICENSE file

webcam-directive's Issues

NotAllowedError: Permission denied in APP Android

I am having a permission error denied when accessing the webcam by the android application:

         <webcam channel="vm.channel"
                    on-streaming="vm.onSuccess()"
                    on-error="vm.onError(err)"
                    on-stream="vm.onStream(stream)"></webcam>

getting the entire video stream

Hi, I would like to use this module to get the video recorded from the webcam and save it to a server.
I saw the example of how capturing an image...any advice on how can I do to get the entire video?

[$parse:isecdom]

Hi Jonas! When I tryed to use your directive, had receive this error:
https://docs.angularjs.org/error/$parse/isecdom?p0=onSuccess(video

UPD. sorry, I didnt see that solution)

Update npm package with latest

Thanks!

ios safari not supported .

please update for safari

Change video URL

Hi,

My channel:

    $scope.myChannel = {

    		// the fields below are all optional
    		videoHeight: 640,
    		videoWidth: 360,
    		video: null
    };  

My code:

<webcam on-stream="onStream(stream)" on-access-denied="onError(err)" on-streaming="onSuccess()" channel="myChannel" class="pull-right"></webcam>

When the video is created, it generates a URL, but my url is different.

<video class="webcam-live" autoplay src="blob:https://example.mydomain.com/23ee07ad-561e-4bg8-ac31" width="360" height="270"></video>

`

How could I change the src URL?

How can i save the blob

Can i save the stream? to a file or upload it to sever for processing?

Not working with mozila

When I tried in mozila then I got this

navigator.mozGetUserMedia has been replaced by navigator.mediaDevices.getUserMedia
The following error occured: MediaStreamError { name: "NotReadableError", message: "Failed to allocate videosource", constraint: "", stack: "" }

Update version to be downloaded from the website

(Chrome)

Code from http://jonashartmann.github.io/webcam-directive/#/

When adding a webcam to the html

the following error occurs:
TypeError: Cannot call method 'addEventListener' of undefined
at link (http://dev.loanboard.nl/lib/angular/webcam.min.js:1:1144)
at http://dev.loanboard.nl/lib/angular/angular.js:6717:44
at nodeLinkFn (http://dev.loanboard.nl/lib/angular/angular.js:6309:13)
at compositeLinkFn (http://dev.loanboard.nl/lib/angular/angular.js:5716:15)
at compositeLinkFn (http://dev.loanboard.nl/lib/angular/angular.js:5723:13)
at nodeLinkFn (http://dev.loanboard.nl/lib/angular/angular.js:6303:24)
at compositeLinkFn (http://dev.loanboard.nl/lib/angular/angular.js:5720:15)
at publicLinkFn (http://dev.loanboard.nl/lib/angular/angular.js:5625:30)
at link (http://dev.loanboard.nl/lib/angular/angular-route.min.js:7:388)
at nodeLinkFn (http://dev.loanboard.nl/lib/angular/angular.js:6309:13)

However, when I get the 1.1.0 version from the github. I have no problems.
https://github.com/jonashartmann/webcam-directive/tree/master/dist/1.1.0

Marcel Boelen

Bower dependency angular 1.3 conflicts with angular 1.4

I'm using angular 1.4 and webcam-directive has conflict in bower with 1.4, since in dependencies it contains ~1.3.7

Canvas image to Base64

Hello @jonashartmann

First of all thanks for this great directive you wrote :)
I successfully able to implement your directive and was able to capture the image in a canvas. Now I want to upload that image to the server with a REST API which cosumes a Base64 image. Can you help me out how exactly I can upload that captures image ?

Thanks
Gaurav

Custom callbacks doesn't work with Angular >= 1.2.24

Since Angular 1.2.24 and this commit angular/angular.js@b39e1d4#diff-780de070ede30180f6aedb6c5f7d57caR752 , onStream and onStreaming custom callback are not executed

Here is a simple example, the callback in not defined but you can see the exception

http://plnkr.co/edit/K5FC7xjpqM4gr6Qetu7S?p=preview

Firefox 63.0.3 (64 bit) don't work

It doesn't work, the example page does not work too ( https://jonas.hartmann.site/webcam-directive/#/ ).
There is no error only a warning:
navigator.mozGetUserMedia è stato sostituito da navigator.mediaDevices.getUserMedia

For me worked by

changing this:
videoElem.mozSrcObject = stream;
into:
videoElem.srcObject = stream;

Package.json missing "main"

You can't import this directive directly via webpack as the "main" entry is missing from package.json.

Save Camera Data

Hi,
I'm sending the camera image byte to server using API, I'm using Java to save my file stream in server.
Could any one suggest to save that byte array using java code.

Thanks
Krishna

Safari support - none?

I haven't been able to get this to work on Safari (there is no prompt for access to the camera). Is there no Safari support?

Minified dist file isn't up to date

Hi @jonashartmann ,

I was making use of your webcam-directive package when I noticed that up until version 3.0.0, it would leave the webcam on even after the objects are destroyed.

This was fixed in 3.1.* but unfortunately the minified file wasn't generated with these fixes.

Any chance you could run the grunt script to generate it so it is generated upstream and so I don't have to hack around it myself? 😄 I could submit a pull request but considering we're talking about minified and hard to read code, it's probably better if it's generated by the project owner.

Cheers,
Tiago

camera device is locked failing to throw error

when camera is being used by another application Firefox throws this

"The following error occured: MediaStreamError { name: "NotReadableError", message: "Failed to allocate videosource", constraint: "", stack: "" }"

Which is good, but when i open an application that uses camera, then open chrome, i dont get this error so i dont know how to handle this, any advice?

Options to play and stop webcam with button

Allow clients to specify media constraints

Webcam directive should allow callers to specify media constraints so they can specify things like minimum resolutions, frame rates, etc.

Constraints are spec'd here:
http://dev.w3.org/2011/webrtc/editor/getusermedia.html#idl-def-MediaTrackConstraints

Here's a nice little tool for testing constraints in chrome:
http://src.chromium.org/svn/trunk/src/chrome/test/data/webrtc/manual/constraints.html

video stream is not stopped

$scope.closed = function stopWebcam() {
onDestroy()
$scope.$broadcast('STOP_WEBCAM', stopWebcam);
$scope.$broadcast('$destroy', onDestroy);
}
var onDestroy = function onDestroy() {

    if (!!_video ) {
      var checker = typeof _video.getVideoTracks === 'function';
      if(_video.getVideoTracks && checker) {
        videoStream.stop();

        // get video track to call stop in it
        // videoStream.stop() is deprecated and may be removed in the
        // near future
        // ENSURE THIS IS CHECKED FIRST BEFORE THE FALLBACK
        // videoStream.stop()
        var tracks = _video.getVideoTracks();
        if (tracks && tracks[0] && tracks[0].stop) {
          tracks[0].stop();
        }
      } else if (_video.stop) {
        // deprecated, may be removed in the near future
        videoStream.stop();
      }
    }
    if (!!_video) {
      delete _video.src;
    }
  };

Webcam variable undefined if used in another tab

Despite of the documentation problems, if the webcam is used in another tab/window $scope.mywebcam (video="mywebcam") is null

Tested with Chrome 40.X on OS X

Not working with Firefox 58

Improve testing of the directive code

The tests were really left behind because I could not imagine how to test that the webcam is being displayed, since that requires user interaction.
But there seem to be other parts of the code that could be tested.
The directive code may need some refactoring in order to make it more testable.

"PermissionDeniedError" error with Chrome on Android device

the code is the simplest:

<webcam on-error="onError(err)"></webcam>

Chrome on the android phone does not ask for permission.

Any idea?

Support AngularJS2?

Does code support AngularJS2?

Uncaught TypeError: Cannot set property 'video' of undefined

hi, i got error. what i can do to solve this?

Thanks.

how to set back "environment" phone camera ?

How do I save video stream ?

Hi,

How do I save video stream in local system or broadcast to Re5 or Wowza server ?

How turn off webcam?

Based this sample
https://jsfiddle.net/awolf2904/qww6g0a6
What steps for turn off webcam?

Create new release with latest modern API

A new release (tag) should be made and pushed into npm / bower / everywhere else.
The version in dist of the master branch already contains the latest code.

Update demo website `gh-pages` to use v2.0.0

I also got bitten by #21

How to capture still photos using webcam directive ?

Please mention a code to capture still picture from web camera using webcam directive.

Video Undefined

i have to be missing something dumb here. in my on-streaming callback the passed in video param is always undefined even though i can see the video on the page. any ideas?

thanks!

Update demo version

Update the demo website (gh-pages branch) to use the latest commit, which supports the newest browser APIs.

how to use in angluar 5.2

Take snapshot as multipart

Hello,

I'm using webcam-directive to take a snapshot but I can't find how to take it as multipart. I only get base64 encoded format.

Is there a way to do it?

Thanks

No NPM support

It would be good to publish package to npm

MediaStream.stop() is deprecated in new Browser (Chrome 47)

Result:
The stream is still active after $destroy();

functionality should be given by:

        if(!stream.stop && stream.getTracks) {
          stream.stop = function(){
            this.getTracks().forEach(function (track) {
              track.stop();
            });
          };
        }

how to emit events to stop start webcam

Hi there (I am busy, so the PR will be delayed :/)
However I have a quick question. You are listening for these events:

        $scope.$on('START_WEBCAM', startWebcam);
        $scope.$on('STOP_WEBCAM', stopWebcam);

I was not able to trigger them when switching the view with:

    $scope.$on('$ionicView.beforeLeave', function(){
        console.log("beforeleave");
        $scope.$emit('STOP_WEBCAM');

    });

I am new to angular, so I suppose I am doing something wrong here, maybe you can help :)

Set widht and height of video tag

Hi,

I don't know how to do it exactly, so can you explain if it is possible : I need to change the height and width of the video which is created by your directive (something like 240 x 300), but I can not figure it out how...

May you help me to do it? Thanks :)

bower install - not working with grunt bowerInstall

so basically grunt bowerInstall is generating a path of:

bower_components/webcam-directive/scripts/webcam.js

Which doesn't match up with whats on the filesystem. Not had time to look into this properly yet so apologies for sparse details.

Not a proper fix, but i'm being lazy, so just overrode it my MY bower.json:

   "overrides": {
    "webcam-directive": {
      "main": "dist/1.1.0/webcam.min.js"
    }
  }

Turn Camera On and Off

After I allow camera, its always turned on even if I go into different page (I can tell because there's always a red circle at the tab of my page). Is there any command that turns it on and off?

Fix tests when using phantomjs for travis build

Tests are passing in chrome but not in phantomjs, so the travis build is failing.

Angular 1.5 dependency

Does the directive work with angularjs version 1.5? I can see in bower.json that it requires angularjs ~1.4.0 which would only resolve to 1.4.x. If the library supports 1.5 then bower.json should mention >=1.4.0.

I have troubles installing the directive if angular 1.5 is added as a dependency in my bower.json because the correct version of angular cannot be resolved (my app wants 1.5 and webcam-directive needs 1.4).

Select Rear Camera in Android devices

This is more of a question than issue. By default if you are using Chrome on Android, the front camera is selected. Is there any way to select the rear camera via some options or controls? Thanks

save to file?

hello , how do i save the snapshot to a file?

thank you

Flash fallback mode?

like jhuckaby/webcamjs?

"Failed to allocate videosource" error in Firefox

Currently if I go to the demo page in FireFox, the video stream will fail to start. Debugging though it, I get this error:

MediaStreamError {
    name: "SourceUnavailableError",
    message: "Failed to allocate videosource",
    constraintName: ""
}

I am using Firefox 36.0.4 (the latest as of right now). This may not be an issue with your JavaScript at all, I did find this recent bug report for Firefox which sounds related. Just letting you know if you're not aware.

Expression 'undefined' used with directive 'webcam' is non-assignable!

Keep getting this error when trying to access makeSnapshot(). Commenting out video: '=' under scope:{} gets rid of the error, but of course there's no video.

Any ideas?

Thanks