Запись видео с веб-камеры и загрузка блобов на сервер - PullRequest
Новая
       16

Запись видео с веб-камеры и загрузка блобов на сервер

0 голосов
/ 12 октября 2018

поэтому у меня есть сайт, который может записывать видеопоток с веб-камеры пользователя и конвертировать его в большой двоичный объект, используя getUserMedia().Теперь я хочу отправить этот BLOB-объект на сервер, чтобы видео можно было сохранить и обработать.У меня есть trobule отправка файла BLOB через AJAX, я пытался использовать как метод formData + XMLHttpRequest (), а также чистый AJAX.Для моего приложения очень важно, чтобы пользователи могли записывать видео и немедленно отправлять это видео на мой сервер.

Любая помощь будет принята с благодарностью.

так HTML: 

    <div class="demo">
    <video id="preview" autoplay width="400" height="300"></video>
    <video id="recording" width="400" height="300" style="display:none;" controls></video>

    <div class="progress">
        <div class="progress-bar"></div>
        <span>01:00</span>
    </div>
    <button class="record">Record</button>
    <button class="upload">Upload</button>
</div>

Соответствующие функции JS: 

function captureVideo () {
    const preview = document.querySelector('video#preview');
    const recording = document.querySelector('video#recording');
    navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
        preview.srcObject = stream;
        preview.captureStream = preview.captureStream || preview.mozCaptureStream;
        return new Promise(resolve => preview.onplaying = resolve);
    }).then(() => {
        let recorder = new MediaRecorder(preview.captureStream());
        let data = [];

        recorder.ondataavailable = event => data.push(event.data);
        recorder.start();
        log(recorder.state + " for " + (60000/1000) + " seconds...");

        let stopped = new Promise((resolve, reject) => {
            recorder.onstop = resolve;
            recorder.onerror = event => reject(event.name);
        });

        $('button.stop').click(function () {
            recorder.stop();
        });

        return Promise.all([ stopped ]).then(() => data);
    }).then ((recordedChunks) => {
        let recordedBlob = new Blob(recordedChunks, {
            type: "video/webm"
        });
        recording.src = URL.createObjectURL(recordedBlob);
        $('#preview').hide();
        $('#recording').show();
        log("Successfully recorded " + recordedBlob.size + " bytes of " +
            recordedBlob.type + " media.");
        $('button.upload').click(function() {
            sendVideoToAPI(recordedBlob);
        });
    }).catch(log);
}
function sendVideoToAPI (blob) {

    let fd = new FormData();
    let file = new File([blob], 'recording');

    fd.append('data', file);
    console.log(fd); // test to see if appending form data would work, it didn't this is completely empty. 


    let form = new FormData();
    let request = new XMLHttpRequest();
    form.append("file",file);
    request.open("POST",  "/demo/upload", true);
    request.send(form); // hits the route but doesn't send the file
    console.log(request.response) // returns nothing

    // I have also tried this method which hits the route and gets a response however the file is not present in the request when it hits the server. 
    // $.ajax({
    //     url: Routing.generate('upload'),
    //     data: file,
    //     contentType: false,
    //     processData: false,
    //     error: function (res) {
    //         console.log(res);
    //     },
    //     success: function(res) {
    //         console.log(res);
    //     }
    // });
}

1 Ответ

0 голосов
/ 18 февраля 2019

Вы отправляете ajax-запрос, у вас не будет ответа сразу после команды send ().Вы можете получить доступ к значению ответа, используя событие onload запроса 

request.onload = function () {
            if (request.readyState === request.DONE) {
                if (request.status === 200) {
                    console.log(request.response);
                }
            }
        };
...