jonashartmann / webcam-directive Goto Github PK

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.

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

please update for safari

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

I also got bitten by #21

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

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();
            });
          };
        }

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

thank you

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).

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

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

like jhuckaby/webcamjs?

Does code support AngularJS2?

Hi,

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

$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;
    }
  };

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

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

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)

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!

Thanks!

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"
    }
  }

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>

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

Thanks.

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;

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

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

It would be good to publish package to npm

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

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

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?

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: "" }

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?

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 :)

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

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?

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

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.

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

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?

(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)

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 :)

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

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

the code is the simplest:

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

Chrome on the android phone does not ask for permission.

Any idea?

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.

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?