Камера HTML5, функция камеры реального боя

Chrome HTML
  • суг команда
  • Автор: Томей

открытие

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

Примечание: эта статья основана на реальном бою, и теоретические знания не будут вводить слишком много.

Фотография

HTML5 is getUserMedia API to provide users access to hardware device media (camera, video, audio, geographic location, etc.) interface, based on this interface, developers can access the hardware devices in the media does not rely on any browser plug-in условия.

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

image

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

1. Получите видеопоток и воспроизведите его с тегом видео.

    <video id="video" autoplay></video>
    
    --------------------------------------------------------------
    
    const videoConstraints = { width: 1366, height: 768 };
    const videoNode = document.querySelector('#video');
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    videoNode.srcObject = stream;
    videoNode.play();

2. Как переключаться между несколькими камерами?

    // enumerateDevices获取所有媒体设备
    const mediaDevices = await navigator.mediaDevices.enumerateDevices();
    // 通过设备实例king属性videoinput，过滤获取摄像头设备
    const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') || [];
    // 获取前置摄像头
    const videoDeviceId = videoDevices[0].deviceId;
    const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    // 获取后置摄像头
    const videoDeviceId = videoDevices[1].deviceId;
    const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    
    // 依次类推...

3. Делайте снимки и сохраняйте снимки

    // 通过canvas捕捉video流，生成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);
    download(canvas.toDataURL('image/jpeg'));
    // 下载图片
    function download (src) {
        if (!src) return;
        const a = document.createElement('a');
        a.setAttribute('download', new Date());
        a.href = src;
        a.click();
    }

4. Выключите устройство камеры

    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    // 3s后关闭摄像头
    setTimeout(function () {
        stream.getTracks().forEach(track => track.stop());
        stream = null;
    }, 3000);

Это завершает простую функцию фото камеры.

камера

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

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

image

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

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

    const videoConstraints = { width: 1366, height: 768 };
    let stream = 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 = new 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));
        // 下载视频
        function download (src) {
            if (!src) return;
            const a = document.createElement('a');
            a.setAttribute('download', new Date());
            a.href = src;
            a.click();
        }
    };
    
    mediaRecorder.stop(); // 停止录制，触发onstop事件

Суммировать

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

Категории