Захват изображения с камеры компьютера и его сохранение

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

Я нашел некоторый исходный код для этого по следующей ссылке: https://www.studytonight.com/post/capture-photo-using-webcam-in-javascript

Следующий исходный код - это то, что у меня есть на данный момент:

Мой первый вопрос - где находится изображение, снятое камерой компьютера?

Был ли он присвоен переменной 'data' или был присвоен переменной 'photo'?

С камеры захватывается поток (если пользователь согласен) и подается на видеовход. Затем, по вашему выбору, холст берет снимок видео (drawImage(video)) и рисует на нем. Тот же <canvas> имеет метод, который конвертирует себя в изображение (или DataURL одного из них). Эти данные передаются в качестве src элемента изображения.

Это 3 магические линии.

context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);

Если вы хотите хранить изображение на сервере, вы можете использовать строку data, которая представляет собой base64-кодировку изображения. Неэффективно, но это текст. <img> не используется для этой цели.

let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");

camera_button.addEventListener('click', async function() {
    let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    video.srcObject = stream;
});

click_button.addEventListener('click', function() {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    let image_data_url = canvas.toDataURL('image/jpeg');

    // data url of the image
    console.log(image_data_url);
});
<h2>Capture Photo From Camera using Javascript</h2>
<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>

Вернуться на верх