斑马线javascript无法检测设备

问题描述

Rails应用程序正在调用

<div id="sourceSelectPanel" style="display:none">
  <label for="sourceSelect">Change video source:</label>
  <select id="sourceSelect" style="max-width:400px">
  </select>
</div>
<a class="button" id="resetButton">Stop</a>
<a class="button" id="startButton">Go</a>

a javascript library，然后初始化界面。

为控制台提供了预期的ZXing code reader initialized，但是随后发生了许多错误。具体来说：

Error: Can't enumerate devices,method not supported.
listVideoInputDevices
getVideoInputDevices

这是adopted mainly from的建议示例。请注意：随着时间的推移，一行已从codeReader.getVideoInputDevices()更改为codeReader.listVideoInputDevices()。影响锡纸的变化会碰到两个错误。

但是，特殊之处在于，有时它可以工作并显示设备（相机）列表，但大多数情况下不起作用。这样做时，有时它会对startButton的提交做出反应，并且摄像机的内容会出现在视频div中

    <video id="video" width="320" height="180" style="border: 1px solid gray"></video>

这是怎么回事？以下是此用例的JavaScript

  <script type="text/javascript">
window.addEventListener('load',function () {
  let selectedDeviceId;
  const codeReader = new ZXing.BrowserMultiFormatReader()
  console.log('ZXing code reader initialized')
  codeReader.getVideoInputDevices()
    .then((videoInputDevices) => {
      const sourceSelect = document.getElementById('sourceSelect')
      selectedDeviceId = videoInputDevices[0].deviceId
      if (videoInputDevices.length >= 1) {
        videoInputDevices.forEach((element) => {
          const sourceOption = document.createElement('option')
          sourceOption.text = element.label
          sourceOption.value = element.deviceId
          sourceSelect.appendChild(sourceOption)
        })

        sourceSelect.onchange = () => {
          selectedDeviceId = sourceSelect.value;
        };

        const sourceSelectPanel = document.getElementById('sourceSelectPanel')
        sourceSelectPanel.style.display = 'block'
      }

      document.getElementById('startButton').addEventListener('click',() => {
        codeReader.decodeFromVideoDevice(selectedDeviceId,'video',(result,err) => {
          if (result) {
            console.log(result)
            document.getElementById('result').textContent = result.text
let formData = new FormData();
let CodeParams = {
  code_data: result.text,shop_id:  <%= current_shop.id %>
  };
formData.append("code_json_data",JSON.stringify(CodeParams));
$.ajax({
  url: "new_movement",type: "post",data: formData,processData: false,contentType: false,});
          }
          if (err && !(err instanceof ZXing.NotFoundException)) {
            console.error(err)
            document.getElementById('result').textContent = err
          }
        })
        console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
      })

      document.getElementById('resetButton').addEventListener('click',() => {
        codeReader.reset()
        document.getElementById('result').textContent = '';
        console.log('Reset.')
      })

    })
    .catch((err) => {
      console.error(err)
    })
})

解决方法

事实证明，该脚本需要浏览器SSL连接。不仅在JS上，在信封上也是如此。

事情在localhost上运行（这是一个例外），但又部分运行（设备菜单将偶尔出现），而控制台状态ZXing code reader initialized是令人困惑的元素。