斑马线 javascript 未检测到设备

Question

一个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)
    })
})

Answer 1

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

事实上运行在本地主机上（有一个例外）但也部分（设备菜单偶尔会出现）和控制台状态 ZXing code reader initialized 是混淆元素。

斑马线 javascript 未检测到设备

Zebra crossing javascript not detecting devices

javascript

zxing