не откликается камера на планшете

Question

Пытаюсь подключится к камере планшета и сделать снимок.

(function() {
    var video = document.getElementById('video'),
        canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        photo = document.getElementById('photo'),
        vendorUrl = window.URL || window.webkitURL;
    navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.
        mozGetUserMedia || navigator.msGetUserMedia;
    navigator.getMedia({
        video: true,
        audio: false
    }, function(stream) {
        video.src = vendorUrl.createObjectURL(stream);
        video.play();
    }, function(error) {
        alert('Ошибка! Что-то пошло не так, попробуйте позже.');
    });
    document.getElementById('capture').addEventListener('click', function() {
        context.drawImage(video, 0, 0, 400, 300);
        photo.setAttribute('src', canvas.toDataURL('image/png'));
    });
})();

.booth {
    width: 400px;
    background: #ccc;
    border: 10px solid #ddd;
    margin: 0 auto;
}

.booth-capture-button {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    background: cornflowerblue;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

#canvas {
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Приложение</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="booth">
    <video id="video" width="400" height="300" autoplay></video>
    <a href="#" id="capture" class="booth-capture-button">Сфотографировать</a>
    <canvas id="canvas" width="400" height="300"></canvas>
    <img id="photo" alt="Ваша фотография">
</div>
<script src="camera.js"></script>
</body>
</html>

При запуске браузера даю разрешение на использование камеры, но больше ничего не происходит, камера не активируется, точнее камера загорается лампочка и далее ничего и по нажатию на кнопку ничего не происходит. Браузер Chrom последняя версия. Не пойму в чем ошибка.

Answer 1

Есть такая штука дебаг-панель. При отладке скрипта в неё полезно поглядывать. Вот что там появляется при запуске вашего кода: TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL. Метод не хочет делать objectUrl из стрима.

Но! Если у видео есть свойство srcObject, то в него можно просетить стрим, не создавая url: video.srcObject = stream;. Это будет работать в современных браузерах (в вашем хроме в том числе).

Пример использования getUserMedia в старых браузерах есть в статье на MDN. Кроме того там отличная документация с примерами.

БЛОГ НА HUSL

не откликается камера на планшете

Ответы (1 шт):