Выберите камеру с помощью Getusermedia и затем используйте instascan - PullRequest
Новая
       68

Выберите камеру с помощью Getusermedia и затем используйте instascan

0 голосов
/ 21 февраля 2020

Моя цель - создать селектор камеры для моего сайта. Этот веб-сайт будет доступен пользователю с его мобильного телефона для сканирования qr-кодов из билетов.

Я создал селектор камеры, используя это:

https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js

<html lang="en">
<head>

<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
<meta name="author" content="//samdutton.com">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
<meta itemprop="image" content="/images/icons/icon192.png">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#fff">
    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<base target="_blank">

<title>TEST SELECT CAMERA</title>

<link rel="stylesheet" href="/css/main2.css" />

  <style>
  div.select {
    margin: 0 0 1em 0;
  }
  </style>

</head>

<body>

<div id="container">

  <h1>MediaStreamTrack.getSources</h1>


  <div class="select">
    <label for="videoSource">Video source: </label><select id="videoSource"></select>
  </div>

  <video width="320" height="240"  muted autoplay></video>

  <script src="js/main.js"></script>

  <p>This demo requires Chrome 30 or later.</p>

  <p>For more information, see <a href="https://www.html5rocks.com/en/tutorials/getusermedia/intro/" title="Media capture article by Eric Bidelman on HTML5 Rocks">Capturing Audio &amp; Video in HTML5</a> on HTML5 Rocks.</p>

<a href="https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

</div>

<script src="/js/ga.js"></script>

</body>
</html>

Файл основной. js: 

'use strict';

var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');

audioSelect.onchange = getStream;
videoSelect.onchange = getStream;

getStream().then(getDevices).then(gotDevices);

function getDevices() {
  // AFAICT in Safari this only gets default devices until gUM is called :/
  return navigator.mediaDevices.enumerateDevices();
}

function gotDevices(deviceInfos) {
  window.deviceInfos = deviceInfos; // make available to console
  console.log('Available input and output devices:', deviceInfos);
  for (const deviceInfo of deviceInfos) {
    const 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);
    }
  }
}

function getStream() {
  if (window.stream) {
    window.stream.getTracks().forEach(track => {
      track.stop();
    });
  }
  const audioSource = audioSelect.value;
  const videoSource = videoSelect.value;
  const constraints = {
    audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
    video: {deviceId: videoSource ? {exact: videoSource} : undefined}
  };
  return navigator.mediaDevices.getUserMedia(constraints).
    then(gotStream).catch(handleError);
}

function gotStream(stream) {
  window.stream = stream; // make stream available to console
  audioSelect.selectedIndex = [...audioSelect.options].
    findIndex(option => option.text === stream.getAudioTracks()[0].label);
  videoSelect.selectedIndex = [...videoSelect.options].
    findIndex(option => option.text === stream.getVideoTracks()[0].label);
  videoElement.srcObject = stream;
}

function handleError(error) {
  console.error('Error: ', error);
}

Когда пользователь выбрал камеру, теперь я хочу сканировать qr-код, используя библиотеку instascan.

Как добавить вызов в основную библиотеку. js для сканирования с выбранной камерой? https://github.com/schmich/instascan/

scanner.start(camera_selected);

Возможно ли это?

...