Primefaces PhotoCam Camera Selection

Question

how could I enable camera selection on primefaces photocam ?

Here is what I have done presently without luck ( image not rendering... )

            <pm:content>

            <script>
                jQuery(document).ready(function() {
                    'use strict';

            var videoElement = document.querySelector('video');
            var videoSelect = document.querySelector('select#videoSource');

            navigator.getUserMedia = navigator.getUserMedia ||
            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

            function gotSources(sourceInfos) {
            for (var i = 0; i !== sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                var option = document.createElement('option');
                option.value = sourceInfo.id;
                if (sourceInfo.kind === 'audio') {

                } else if (sourceInfo.kind === 'video') {
                option.text = sourceInfo.label || 'camera ' +               (videoSelect.length + 1);
                videoSelect.appendChild(option);
                } else {
                  console.log('Some other kind of source: ', sourceInfo);
                }
             }
            }

            if (typeof MediaStreamTrack === 'undefined' ||
                typeof MediaStreamTrack.getSources === 'undefined') {
            alert('This browser does not support MediaStreamTrack.\n\nTry               Chrome.');
            } else {
            MediaStreamTrack.getSources(gotSources);
            }

            function successCallback(stream) {
            window.stream = stream; // make stream available to console
            videoElement.src = window.URL.createObjectURL(stream);
            videoElement.play();
            }

            function errorCallback(error) {
            console.log('navigator.getUserMedia error: ', error);
            }

            function start() {

                videoElement = document.querySelector('video');

            if (!!window.stream) {
               videoElement.src = null;
            window.stream.stop();
             }

              var videoSource = videoSelect.value;
            var constraints = {
                audio: false,
                video: {
                optional: [{
                    sourceId: videoSource
                  }]
                }
            };
            navigator.getUserMedia(constraints, successCallback, errorCallback);
            }

            videoSelect.onchange = start;

            start();
                });
            </script>

<p:outputLabel value="Seleccione Camara:" />
                            <select id="videoSource"></select>



            <p:photoCam widgetVar="pc" listener="#{eventoMB.oncapture}" update="photo" />

I am trying to achieve this goal by using javascript but the problem something is preventing the change proposed here, which I could not identify up to know...

Thanks for your attention.

score 0 · Answer 1 · edited May 23 '17 at 12:23

Well in case someone needs this information:

in attach function(c) after these lines ( around line 89 from primefaces-5.2.jar\META-INF\resources\primefaces\photocam\photocam.js ) :

        b.style.transform = "scaleX(" + h + ") scaleY(" + g + ")"
   }
   c.appendChild(b);

I added the following lines:

    var constraints = {
        audio: false,
        video: { 
            facingMode: {
                exact: "environment" 
            } 
            }
    };

    this.video = b;
        var i = this;
        navigator.getUserMedia(constraints, function(j) {

Note that specifing facingMode for the video constraints apparently does the trick in firefox for android and google only in the desktop version apparently as stated here:

GetUserMedia - facingmode

By the way it would be interesting to me to discuss if this solution is the more appropiate thing to do or there is a better one.

Hope this helps someone else, thanks anyway.

Primefaces PhotoCam Camera Selection

1 Answers1