记录来自网络摄像头的视频流并将blob上传到服务器 [英] Record video stream from webcam and upload blob to server

问题描述

因此，我有一个网站可以记录来自用户网络摄像头的视频流，并使用 getUserMedia()将其转换为blob.我现在想将此Blob发送到服务器，以便可以保存和处理视频.我遇到麻烦通过ajax发送blob文件，我尝试使用formData + XMLHttpRequest()方法以及纯ajax.用户可以录制视频并立即将视频发送到我的服务器，这对我的应用程序来说至关重要.

so I have a site that can record a video stream from the users webcam and convert it to a blob using getUserMedia(). I now want to send this blob to the server so the video can be saved and processed. I am having trobule sending a blob file via ajax, I have tried using both the formData + XMLHttpRequest() method as well as pure ajax. It is imperetive for my application that users can record video and immediately send this video to my server.

任何帮助将不胜感激.

是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);
    //     }
    // });
}

推荐答案

您正在发送ajax请求，在send()命令之后，您将不会立即获得响应.您可以使用request onload事件

You are sending an ajax request you won't have the response immediately after the send() command. you can access the response value using the request onload event

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

这篇关于记录来自网络摄像头的视频流并将blob上传到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！