Доступ к камере через браузер

Question

Возможно ли получить доступ к камере (встроенной в устройства Apple) через браузер?

Оптимальным решением было бы использование JavaScript на стороне клиента. Хотелось бы избежать использования Java или Flash.

Answer 1

Есть отличное решение от Дэнни Маркова для этой задачи. Оно использует метод navigator.getUserMedia и должно работать в современных браузерах. Я успешно протестировал его в Firefox и Chrome. В Internet Explorer не удалось запустить:

Вот демонстрация:

https://tutorialzine.github.io/pwa-photobooth/

Ссылка на страницу с описанием Дэнни Маркова:

http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/

Ссылка на GitHub:

https://github.com/tutorialzine/pwa-photobooth/

Answer 2

Да, вы можете получить доступ к камере через браузер. Вот код, который сработал для меня:

<html>
<head>
</head>
<body>
    <video src=""></video>
    <br />
    <button id='flipCamera'>Поменять камеру</button>
</body>
<script>
  var front = false;
  var video = document.querySelector('video');
  
  document.getElementById('flipCamera').onclick = function() { front = !front; };
  
  var constraints = { video: { facingMode: (front ? "user" : "environment"), width: 640, height: 480 } };
  
  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
  })
  .catch(function(err) { 
    console.log(err.name + ": " + err.message); 
  });
</script>
</html>

Этот код использует метод getUserMedia() для доступа к видеопотоку с камеры устройства. Он также позволяет переключаться между фронтальной и основной камерами при нажатии на кнопку. Убедитесь, что ваш браузер поддерживает API медиаустройств и у вас есть соответствующие разрешения.

Answer 3

Да, это возможно с помощью HTML5. Вы можете использовать API getUserMedia, который позволяет веб-приложением получать доступ к потокам медиа-данных, таким как видео и аудио.

Вот краткое объяснение, как это работает:

Запрос доступа: Сначала необходимо запросить разрешение у пользователя на доступ к его камере и (или) микрофону с помощью метода navigator.mediaDevices.getUserMedia().
Обработка потоков: Если пользователь согласится, вы получите поток медиа-данных, который можно использовать, например, для отображения видео в элементе <video>.

Вот пример кода:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    var video = document.querySelector('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(function(error) {
    console.error('Ошибка доступа к медиа-устройствам:', error);
  });

Этот код запрашивает доступ к камере и микрофону, и если доступ предоставлен, поток передается в элемент <video>, который начинает воспроизводиться.

Дополнительную информацию о getUserMedia и его возможностях можно найти в документации MDN.

Answer 4

Ваш код выглядит почти правильно, но для обеспечения совместимости с современными браузерами и правильной работы функции getUserMedia рекомендуется внести некоторые изменения. Вот исправленная версия кода:

<style type="text/css">
    #container {
        margin: 0px auto;
        width: 500px;
        height: 375px;
        border: 10px #333 solid;
    }

    #videoElement {
        width: 500px;
        height: 375px;
        background-color: #777;
    }
</style>

<div id="container">
    <video autoplay="true" id="videoElement" playsinline></video>
</div>

<script type="text/javascript">
    var video = document.querySelector("#videoElement");

    // Используйте navigator.mediaDevices.getUserMedia вместо устаревших методов
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(handleVideo)
        .catch(videoError);

    function handleVideo(stream) {
        if ('srcObject' in video) {
            video.srcObject = stream;
        } else {
            // Для старых браузеров
            video.src = window.URL.createObjectURL(stream);
        }
        video.play();
    }

    function videoError(e) {
        console.error("Ошибка доступа к камере: ", e);
    }
</script>

Объяснение изменений:

Использование navigator.mediaDevices.getUserMedia: Этот метод является современным стандартом и рекомендуется использовать вместо устаревших реализаций getUserMedia. Это улучшает совместимость и надежность.
Добавлен атрибут playsinline: Этот атрибут нужен для того, чтобы видео воспроизводилось плавно на мобильных устройствах, не переходя в полноэкранный режим.
Проверка srcObject: Также добавлена проверка для установки источника потока, чтобы обеспечить поддержку старых браузеров, которые могут не поддерживать srcObject.
Обработка ошибок: В функции videoError добавлен вывод сообщения об ошибке в консоль для удобства отладки.

Теперь код должен работать корректно и лучше подходить для использования в современных веб-приложениях.

Answer 5

Если вам нужна камера только для того, чтобы сделать статичное фото, то просто используйте камеру на мобильном устройстве. Смотрите, например, это обсуждение на StackOverflow.

Доступ к камере через браузер

5 ответ(ов)

Объяснение изменений:

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных