Primefaces PhotoCam 相机选择答案

【问题标题】：Primefaces PhotoCam Camera SelectionPrimefaces PhotoCam 相机选择
【发布时间】：2015-10-27 16:12:54
【问题描述】：

如何在 primefaces photocam 上启用相机选择？

这是我目前没有运气所做的事情（图像未渲染......）

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

我正在尝试通过使用 javascript 来实现这一目标，但问题是阻止了此处提出的更改，我无法确定知道...

感谢您的关注。

【问题讨论】：

标签： primefaces camera

【解决方案1】：

如果有人需要这些信息：

在这些行之后的附加函数（c）中（在 primefaces-5.2.jar\META-INF\resources\primefaces\photocam\photocam.js 的第 89 行附近）：

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

我添加了以下几行：

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

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

请注意，为视频约束指定 facesMode 显然只在桌面版本中用于 android 和 google 的 firefox 中，显然如此处所述：

GetUserMedia - facingmode

顺便说一句，我想讨论一下这个解决方案是更合适还是有更好的解决方案。

希望这对其他人有所帮助，无论如何，谢谢。

【讨论】：