Подробное практическое объяснение функций фото и камеры HTML5.

Недавно я работаю над приложением облачной камеры для приложения Chrome. Приложение включает в себя основные функции, такие как съемка фотографий, запись видео, сохранение фотографий и видео, загрузка файлов и т. д., что включает в себя множество API-интерфейсов HTML5, связанных с потоковой передачей мультимедиа. Целью написания этой статьи является, во-первых, обобщить и упорядочить знания, и, самое главное, дать некоторые рекомендации читателям, имеющим соответствующие потребности.

Примечание. Эта статья основана на реальных боях и не содержит слишком много теоретических знаний.

API getUserMedia HTML5 предоставляет пользователям интерфейс для доступа к медиафайлам аппаратных устройств (камера, видео, аудио, географическое местоположение и т. д.). На основе этого интерфейса разработчики могут получать доступ к аппаратным медиаустройствам, не полагаясь на какие-либо плагины браузера.

Совместимость браузера следующая:

Как видно на рисунке выше, основные браузеры Firefox, Chrome, Safari, Opera и т. д. имеют полную поддержку.

 <video id=автовоспроизведение видео></video> --------------------------------------- ----------------------- const videoConstraints = { ширина: 1366, высота: 768 }; const videoNode = document.querySelector('#video'); поток = ждут navigator.mediaDevices.getUserMedia({аудио: true, видео: videoConstraints}); videoNode.srcObject = поток; видеоузел.play();

 // enumerateDevices получает все медиа-устройства const mediaDevices = await navigator.mediaDevices.enumerateDevices() // Фильтр для получения устройства камеры через атрибут короля экземпляра устройства videoinput const videoDevices = mediaDevices.filter(item => item.kind ===; 'videoinput') || Получаем переднюю камеру const videoDeviceId = videoDevices[0].deviceId; videoConstraints = {deviceId: { strict: videoDeviceId }, width: 1366, height: 768 }; letstream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints } // Получаем заднюю камеру const videoDeviceId =); videoDevices[1].deviceId; const videoConstraints = {deviceId: { точно: videoDeviceId }, ширина: 1366, высота: 768 }; letstream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // И так далее...

 // Захват видеопотока через холст и создание изображения в формате base64 const Canvas = document.createElement('canvas'); const context = Canvas.getContext('2d'); Canvas.width = 1366; Canvas.height = 768; context.drawImage(videoNode, 0, 0, Canvas.width, Canvas.height) скачать (canvas.toDataURL('image/jpeg')); // Загрузка функции изображения download (src) { if (!src) return; .клик() }

 letstream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints } // Выключаем камеру через 3 секунды setTimeout(function () {stream.getTracks().forEach(track => track.stop() )) ; поток = ноль }, 3000);

На этом простая функция съемки камеры завершена.

Основной процесс фотосъемки заключается в записи видеопотока и сохранении его в виде аудио- и видеофайла. Объект HTML5 MediaRecorder предоставляет функции записи мультимедиа и видео.

Совместимость браузера следующая:

Как показано на рисунке выше, совместимость браузера с MediaRecorder намного хуже, чем у getUserMedia. В настоящее время только Chrome и Firefox имеют лучшую поддержку MediaRecorder.

==Примечание: видеотег проигрывателя предварительного просмотра камеры должен быть отключен (чтобы устранить резкий шум, вызванный эхом)==

 const videoConstraints = {ширина: 1366, высота: 768}; letstream = await navigator.mediaDevices.getUserMedia({audio: true, video: videoConstraints}); let mediaRecorder = new MediaRecorder(stream); let mediaRecorderChunks = []; / Запись потока данных mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // Создаем экземпляр двоичных данных файла через объект Blob. let RecorderFile = новый Blob (mediaRecorderChunks, {'type': mediaRecorder.mimeType }); mediaRecorderChunks = []; const file = new File([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { type: 'video/mp4' }); download(URL.createObjectURL(file)); // Функция загрузки видео download (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date( )); a.href = src; a.click(); } }; mediaRecorder.stop(); // Остановить запись и вызвать событие остановки.

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