Проблема при создании base64 с помощью веб-камеры - PullRequest
Новая
       9

Проблема при создании base64 с помощью веб-камеры

0 голосов
/ 27 мая 2020

Я пытаюсь щелкнуть изображение с помощью веб-камеры в Javascript, однако я получаю значение мусора, когда сценарий выполняется в первый раз, однако он приводит к правильным значениям при выполнении во второй раз, кажется, что его перенастройка мусора, когда программа ожидает разрешения на доступ к веб-камере. Код функции для получения значений выглядит следующим образом: 

<script type="text/javascript">
    function testcall(videoId, canvasId) {
        let video = document.getElementById(videoId);
        let canvas = document.getElementById(canvasId);
        let context = canvas.getContext('2d');
        let face_image = document.getElementById('face-image');
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({
                video: true
            }).then(function(stream) {
                video.srcObject = stream;
                video.play();
            });
        }
        context.drawImage(video, 0, 0, 600, 450);
        face_image.value = canvas.toDataURL('image/png');
        console.log(face_image.value);
    }
</script>
<div class="col s6">
    <div class="card">
        <div class="card-content center-align">
                <h4 class="center"><u>Live Video</u></h4>
                <video id="video" width="600" height="450" autoplay></video>
                <canvas id="canvas" width="600" height="450" class="hide"></canvas>
                <input type="hidden" name="image" id="face-image">
                <button class="btn" id="detect-image" style="margin-bottom: 10px" onclick="testcall()">Detect Face
                </button>
                <img src="" id="detect-data" width="600" height="450" class="hide">
        </div>
    </div>
</div>

Мне нужно реализовать это на одной странице Html код с несколькими разделами, обозначающими div. поэтому мне нужно открыть камеру, когда загружен div, а затем, нажав другую кнопку, мне нужно сделать снимок и закрыть камеру. Это нужно как функция, поскольку на моей веб-странице есть несколько разделов, которые мне нужно открыть, поскольку на странице есть несколько разделов, в которых мне нужно захватить изображение. Я понимаю, что должен разбить указанную выше функцию на две части, но не могу понять, как это сделать?

...