Webcam directive for AngularJS apps

Imagine being able to show the data of the webcam of an user by using this simple HTML tag:


Well, now you can!
Take a look at some demos and download it and see for yourself.

It is a module for angularjs that consists of only one directive, webcam.
It gives you a new element tag that can be used to access the user camera on browsers that implement the getUserMedia specification.

Please share your thoughts about it on the comments.

If you feel like something is missing, just fork it! 😉

About Jonas Hartmann

A flying mind. I develop software that gives wings to human imagination.
This entry was posted in AngularJS, Directives, JavaScript, Technologien and tagged , , , , , , , , . Bookmark the permalink.

10 Responses to Webcam directive for AngularJS apps

  1. jewelsjacobs says:

    You are the most amazing individual ever to walk the earth. I struggled forever to do this. I created a video directive which barfed on navigator.getUserMedia, a canvas directive + image directive to show a screenshot and a button directive to send the getUserMedia data to the canvas + image directive. I must mention also that I’m a complete angular.js newb which I’m sure doesn’t help. I can’t wait to see your source.

  2. Larry says:

    It looks grate but I could not make it working. I have tried everything but it does not wanna work 😦

    The demo online does work but following the instruction I always get an exception when I try to add the eventlistener play to the video element (that is always undefined).

    It is a shame I liked this directive and I am sure it works fine I wonder what I am doing wrong

  3. Larry says:

    Thanks probably was my bad some how I made it working on my pc but I do not think my solution is good 😀
    Also I have tested it on an Ipad and does not work for me. On the Ipad I was using Chrome but the camera permission never showed up.

    If you tell me how can I show you my code I will be much more than happy to do it. Going in debug with the source code I found that the problem what that the template wan not loaded so when in the postLink function there is this code
    : var videoElem = element.find(‘video’)[0];
    var canvas = element.find(‘canvas’)[0];
    navigator.getMedia (
    // ask only for video
    video: true,
    audio: false

    /* Start streaming the webcam data when the video element can play
    * It will do it only once
    videoElem.addEventListener(‘canplay’, function()

    VideoElem is always undefined and generate an exception 😦

  4. Anatn says:

    Larry I agree with you. I am also not able to get it work in my ipad. Please help me

  5. phaggood says:

    I’m a bit lost; how do I actually take a picture? I have captured the video source on my html page but can’t find an example of how to take a snapshot. Is there demo code I can look at?

  6. hprueba says:

    I use chrome…

    getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See for more details.
    webcam.min.js:1 The following error occured: NavigatorUserMediaError {name: “PermissionDeniedError”, message: “Only secure origins are allowed (see:”, constraintName: “”}
    angular.js:5930 Error: $digest already in progress
    at Error (native)
    at beginPhase (
    at Object.Scope.$apply (
    at Object.$scope.onError (
    at Object.scope.(anonymous function) [as onError] (
    at i (
    at j (
    at link (
    at nodeLinkFn ( function) @ angular.js:5930(anonymous function) @ angular.js:5022Scope.$apply @ angular.js:8300$scope.onError @ main.js:22(anonymous function) @ angular.js:6541scope.(anonymous function) @ angular.js:4531i @ webcam.min.js:1j @ webcam.min.js:1link @ webcam.min.js:1nodeLinkFn @ angular.js:4582compositeLinkFn @ angular.js:4179compositeLinkFn @ angular.js:4194compositeLinkFn @ angular.js:4194publicLinkFn @ angular.js:4096update @ angular.js:14513Scope.$broadcast @ angular.js:8468(anonymous function) @ angular.js:7614wrappedCallback @ angular.js:6995wrappedCallback @ angular.js:6995(anonymous function) @ angular.js:7032Scope.$eval @ angular.js:8218Scope.$digest @ angular.js:8077Scope.$apply @ angular.js:8304done @ angular.js:9357completeRequest @ angular.js:9520xhr.onreadystatechange @ angular.js:9490XMLHttpRequest.send (async)(anonymous function) @ angular.js:9499sendReq @ angular.js:9333$http @ angular.js:9124$http.(anonymous function) @ angular.js:9267(anonymous function) @ angular.js:7591wrappedCallback @ angular.js:6995wrappedCallback @ angular.js:6995(anonymous function) @ angular.js:7032Scope.$eval @ angular.js:8218Scope.$digest @ angular.js:8077Scope.$apply @ angular.js:8304(anonymous function) @ angular.js:1040invoke @ angular.js:2993doBootstrap @ angular.js:1038bootstrap @ angular.js:1052angularInit @ angular.js:1010(anonymous function) @ angular.js:15154trigger @ angular.js:1851(anonymous function) @ angular.js:2095forEach @ angular.js:130eventHandler @ angular.js:2094

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s