Camera преткновения.

Lisa · Feb 15, 2022, 09:03 pm

Работает ли камера в вебвью?
Да, работает.

Такой диалог произошёл, в ходе которого мы выяснили что камера в webview прекрасно работает, нужно лишь корректно программировать на JS. Наверное все знают что существуют некоторые различия между браузерами, и то что работает в одном, в другом может не работать. В последнее время различия между движками сократились, но всё же есть некоторые нюансы.

Во всяком случае камера работает. Убедиться в этом вы можете запустив данный сайт в вебвью (измените ссылку через админ панель)

Пример рабочего скрипта

https://philnash.github.io/mediadevices-camera-selection/

Lisa · Feb 15, 2022, 09:03 pm

Code Select

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Camera selection</title>
  <link rel="stylesheet" href="./app.css" />

</head>

<body>

  <header>
    <h1>Camera fun</h1>
  </header>

  <main>
    <div class="controls">
      <button id="button">Get camera</button>
      <select id="select">
        <option></option>
      </select>
    </div>

    <video id="video" autoplay playsinline></video>
  </main>

  <footer>
    <p>Built by
      <a href="https://twitter.com/philnash">@philnash</a>
    </p>
  </footer>

  <script src="./app.js"></script>
</body>

</html>

Lisa · Feb 15, 2022, 09:04 pm

Code Select

const video = document.getElementById('video');
const button = document.getElementById('button');
const select = document.getElementById('select');
let currentStream;

function stopMediaTracks(stream) {
  stream.getTracks().forEach(track => {
    track.stop();
  });
}

function gotDevices(mediaDevices) {
  select.innerHTML = '';
  select.appendChild(document.createElement('option'));
  let count = 1;
  mediaDevices.forEach(mediaDevice => {
    if (mediaDevice.kind === 'videoinput') {
      const option = document.createElement('option');
      option.value = mediaDevice.deviceId;
      const label = mediaDevice.label || `Camera ${count++}`;
      const textNode = document.createTextNode(label);
      option.appendChild(textNode);
      select.appendChild(option);
    }
  });
}

button.addEventListener('click', event => {
  if (typeof currentStream !== 'undefined') {
    stopMediaTracks(currentStream);
  }
  const videoConstraints = {};
  if (select.value === '') {
    videoConstraints.facingMode = 'environment';
  } else {
    videoConstraints.deviceId = { exact: select.value };
  }
  const constraints = {
    video: videoConstraints,
    audio: false
  };
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(stream => {
      currentStream = stream;
      video.srcObject = stream;
      return navigator.mediaDevices.enumerateDevices();
    })
    .then(gotDevices)
    .catch(error => {
      console.error(error);
    });
});

navigator.mediaDevices.enumerateDevices().then(gotDevices);

News:

Camera преткновения.

Lisa

Feb 15, 2022, 09:03 pm

Lisa

Feb 15, 2022, 09:03 pm #1

Lisa

Feb 15, 2022, 09:04 pm #2