如何使用getUserMedia将后置摄像头添加到选项中?

时间:2018-01-09 09:27:25

标签: javascript html5-video qr-code smartphone webcam-capture

我刚刚在网页上找到了“说奶酪”JS来打开手机摄像头 https://github.com/Kephson/html5qrcodereader

我的项目是使用智能手机相机阅读QR码,并将数据输入网站的输入栏。

JS库工作正常!

我的问题是代码只使用默认摄像头(正面),我也想使用后置摄像头。

我如何实现此代码:
https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js

进入此代码: https://github.com/Kephson/html5qrcodereader/blob/master/js/say-cheese.js

HTML SELECT

<!--SELECT CAMERA-->
<select id="videoSource">
   <option selected>Default Camera</option>
</select>

来自say-cheese.js的一些随机代码

//Get Cameras?!
navigator.getUserMedia = (navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia ||
        false);

SayCheese = function SayCheese(element, options) {
    this.snapshots = [],
            this.video = null,
            this.events = {},
            this.stream = null,
            this.options = {
                videoSource: null,
                snapshots: true,
                audio: false,
                width: 320
            };


return navigator.getUserMedia({video: { 
            optional: [{
                    sourceId: this.options.videoSource
                }]

它是否在上面的代码中的某处,我应该提出类似的内容:

function gotDevices(deviceInfos) {
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text =
        deviceInfo.label || 'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {
      console.log('Found one other kind of source/device: ', deviceInfo);
    }
  }
}

你可以说我对JS不太了解。
我正在使用Jquery几乎所有我需要的东西。

0 个答案:

没有答案