Запись видео с веб-камеры и сохранение на сервере js/php

Question

Вопрос заключается в следующем Есть скрипт позволяющий записывать видео с веб камеры и далее есть возможность так же на странице просмотреть видеозапись либо же скачать ее нажатием кнопки. Мне же нужно чтобы видео сохранялось в директории сервера нажатием кнопки а не скачивалось. Единственное, не могу понять, как передать blob обработчику php?

Скрипт что реализует запись видео

     var mediaRecorder;
     var recordedBlobs;

     var gumVideo = document.querySelector("video#gum");
     var recordedVideo = document.querySelector("video#recorded");

     var recordButton = document.querySelector("button#record");
     var playButton = document.querySelector("button#play");
     var downloadButton = document.querySelector("button#download");

     recordButton.onclick = toggleRecording;
     playButton.onclick = play;
     downloadButton.onclick = download;

     navigator.mediaDevices
       .getUserMedia({ audio: true, video: true })
       .then((stream) => {
         recordButton.disabled = false;
         console.log("getUserMedia() got stream: ", stream);
         window.stream = stream;
         gumVideo.srcObject = stream;
       })
       .catch((error) => {
         console.log("navigator.getUserMedia error: ", error);
       });

     function handleDataAvailable(event) {
       if (event.data && event.data.size > 0) {
         recordedBlobs.push(event.data);
       }
     }

     function handleStop(event) {
       console.log("Recorder stopped: ", event);
     }

     function toggleRecording() {
       if (recordButton.textContent === "Start Recording") {
         startRecording();
       } else {
         stopRecording();
         recordButton.textContent = "Start Recording";
         playButton.disabled = false;
         downloadButton.disabled = false;
       }
     }

     function startRecording() {
       recordedBlobs = [];

       try {
         mediaRecorder = new MediaRecorder(window.stream);
       } catch (e) {
         console.error("Exception while creating MediaRecorder: " + e);
         return;
       }
       console.log("Created MediaRecorder", mediaRecorder);
       recordButton.textContent = "Stop Recording";
       playButton.disabled = true;
       downloadButton.disabled = true;
       mediaRecorder.onstop = handleStop;
       mediaRecorder.ondataavailable = handleDataAvailable;
       mediaRecorder.start(10);
       console.log("MediaRecorder started", mediaRecorder);
     }

     function stopRecording() {
       mediaRecorder.stop();
       console.log("Recorded Blobs: ", recordedBlobs);
       recordedVideo.controls = true;
     }

     function play() {
       var superBuffer = new Blob(recordedBlobs, { type: "video/webm" });
       recordedVideo.src = window.URL.createObjectURL(superBuffer);
     }

     function download() {
       var blob = new Blob(recordedBlobs, { type: "video/webm" });
       var url = window.URL.createObjectURL(blob);
       var a = document.createElement("a");
       a.style.display = "none";
       a.href = url;
       a.download = "test.webm";
       document.body.appendChild(a);
       a.click();
       setTimeout(function () {
         document.body.removeChild(a);
         window.URL.revokeObjectURL(url);
       }, 100);
     }

Запись и сохранение на сервере аудиофайла без видео реализовывал, сейчас же интересно выполнить данную задачу

Answer 1

Решение нашел немного изменив код. Ниже пример кода который записывает аудио + видео, отправляет обработчику php, который в свою очередь сохраняет файл на сервере(Следует убедиться что директория существует на сервере в которую будет сохранен файл)

Скрипт записи медиа файлов:

const URL = 'voice.php';
let div = document.createElement('div');
div.id = 'messages';
let start = document.createElement('button');
start.id = 'start';
start.innerHTML = 'Start';
let stop = document.createElement('button');
stop.id = 'stop';
stop.innerHTML = 'Stop';
document.body.appendChild(div);
document.body.appendChild(start);
document.body.appendChild(stop);
navigator.mediaDevices.getUserMedia({ audio: true, video: true})
    .then(stream => {
        const mediaRecorder = new MediaRecorder(stream);

        document.querySelector('#start').addEventListener('click', function(){
            mediaRecorder.start();
        });
        let audioChunks = [];
        mediaRecorder.addEventListener("dataavailable",function(event) {
            audioChunks.push(event.data);
        });

        document.querySelector('#stop').addEventListener('click', function(){
            mediaRecorder.stop();
        });

        mediaRecorder.addEventListener("stop", function() {
            const audioBlob = new Blob(audioChunks, {
                type: "video/webm"
            });

            let fd = new FormData();
            fd.append('voice', audioBlob);
            sendVoice(fd);
            audioChunks = [];
        });
    });

async function sendVoice(form) {
    let promise = await fetch(URL, {
        method: 'POST',
        body: form});
    if (promise.ok) {
        let response =  await promise.json();
        console.log(response.data);
        audio.src = response.data;
        audio.controls = true;
        audio.autoplay = true;
        document.querySelector('#messages').appendChild(audio);
    }
}

И обработчик php:

<?php
$uploadDir = 'voice/';
$typeFile = explode('/', $_FILES['voice']['type']);
$uploadFile = $uploadDir . basename(md5($_FILES['voice']['tmp_name'].time()).'.'.$typeFile[1]);
if (move_uploaded_file($_FILES['voice']['tmp_name'], $uploadFile)) {
    $response = ['result'=>'OK', 'data'=>'../'.$uploadFile];
} else {
    $response = ['result'=>'ERROR', 'data'=>''];
}
echo json_encode($response);

?>

Возможно кому-то будет полезно

БЛОГ НА HUSL

Запись видео с веб-камеры и сохранение на сервере js/php

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