webcam-directive icon indicating copy to clipboard operation
webcam-directive copied to clipboard

allow setting which device/media source to use.

Open nylki opened this issue 9 years ago • 3 comments

This is useful for mobile devices where there might not be a chooser for multiple devices, but the first best is used (chrome, as of writing this commit message).

To init the element you would do something like this in your client code:

var videoSources;
if (videoSources === undefined) {
        if (MediaStreamTrack.getSources !== undefined) {
            MediaStreamTrack.getSources(function(sources) {


                console.log("all possible media sources --->");
                for (var i = 0; i < sources.length; i++) {
                    console.log(sources[i].id + " is " + sources[i].kind);
                    if(sources[i].kind === "video") videoSources.push(sources[i]);
                }
            });
        }
    }

    $scope.myChannel = {
        // the fields below are all optional
        videoHeight: 800,
        videoWidth: 600,
        video: null, // Will reference the video element on success
        source: videoSources[1]
    };

notice the: source: videoSources[1] in the configuration.

nylki avatar Jun 10 '15 13:06 nylki

Hi @nylki ! Thank you very much for your contribution. But as you can see, the Travis CI build is failing for this PR. It is mainly because of the code style, since JSHint is warning about some errors. You can see them here. Could you also update the unit tests for this feature that you are adding?

I will be happy to accept your changes as soon as the build is passing.

jonashartmann avatar Jun 11 '15 19:06 jonashartmann

@jonashartmann I made the code style changes. I would be happy to add tests for the feature. However I have never done unit tests (via jasmine) for javascript code yet. If you could give me some pointers it, it would be great :)

nylki avatar Jun 11 '15 21:06 nylki

@nylki here are some pointers ☺

  • verify you can run the current tests with "grunt test" and they pass
  • read about jasmine in the Web. Some links below You might also want to read about Karma
  • update the webcamSpec.js file under the tests folder
  • make sure it stills works
  • commit and push
  • verify that the Travis build worked
  • let me know
  • enjoy 🎉

http://mobile.htmlgoodies.com/beyond/javascript/testing-javascript-using-the-jasmine-framework.html http://jasmine.github.io

jonashartmann avatar Jun 12 '15 19:06 jonashartmann