@AlexSer

Как отправить видео файл на сервер?

Всем привет! Нашел код для записи видео с webкамеры на js
<a id="download-video"  download="test.webm">Download Video</a>
<script>
    let camera_button = document.querySelector("#start-camera");
    let video = document.querySelector("#video");
    let start_button = document.querySelector("#start-record");
    let stop_button = document.querySelector("#stop-record");
    let download_link = document.querySelector("#file-video");

    let camera_stream = null;
    let media_recorder = null;
    let blobs_recorded = [];


    start_button.addEventListener('click',async function() {

        camera_stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
        video.srcObject = camera_stream;
        // set MIME type of recording as video/webm
        media_recorder = new MediaRecorder(camera_stream, { mimeType: 'video/webm' });

        // event : new recorded video blob available
        media_recorder.addEventListener('dataavailable', function(e) {
            blobs_recorded.push(e.data);
        });

        // event : recording stopped & all blobs sent
        media_recorder.addEventListener('stop', function() {
            // create local object URL from the recorded video blobs
            let video_local = URL.createObjectURL(new Blob(blobs_recorded, { type: 'video/webm' }));
            video.srcObject = null;
            download_link.href = video_local;
        });

        media_recorder.start(1000);
    });

    stop_button.addEventListener('click', function() {
        media_recorder.stop();
    });
</script>

Здесь происходит запись видео с вебкамеры и он сохраняет видео на ссылку, нажимаешь скачивается, все работает ок, а мне надо отправить на сервер.
Пытался делать через формы, меняя значение input file, но че-то вообще у меня с js плохо.
Если не трудно помогите а, простой ajax, для отправки файла на сервер. Я просто не понимаю как обрабатывать результат, то ли просто обрабатываю строку названия файла.
  • Вопрос задан
  • 177 просмотров
Решения вопроса 1
@risejs
Через класс FormData, там есть метод append(), который принимает класс Blob. А дальше любым стандартным способом, fetch или XMLHttpRequest, они оба принимают FormData на отправку.
let formData = new FormData();
formData.append('file', new Blob(blobs_recorded, { type: 'video/webm' }));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы