title: Primefaces PhotoCam Camera Selection
body: <p>how could I enable camera selection on primefaces photocam ?</p>
  
  <p>Here is what I have done presently without luck ( image not rendering... )</p>
  
  <pre><code>            &lt;pm:content&gt;
  
              &lt;script&gt;
                  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();
                  });
              &lt;/script&gt;
  
  &lt;p:outputLabel value="Seleccione Camara:" /&gt;
                              &lt;select id="videoSource"&gt;&lt;/select&gt;
  
  
  
              &lt;p:photoCam widgetVar="pc" listener="#{eventoMB.oncapture}" update="photo" /&gt;
  </code></pre>
  
  <p>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...</p>
  
  <p>Thanks for your attention. </p>