Html5 video recording and upload?

前端 未结 4 1359
眼角桃花
眼角桃花 2021-01-31 00:23

I need to create an app that can record video using a webcam or mobile camera (it needs to be cross platform).

So far I have written a small proof of concept using webrt

4条回答
  •  迷失自我
    2021-01-31 01:03

    Hi sorry if this is kinda late, but here is how i managed to make the file upload to a server, I really don't have an idea if this is the best way to achieve this but i hope it helps to give you a clue.Following the tutorial Eric Bidelman wrote (as Sam Dutton commented) what you get is a blob, so I made a XMLHttpRequest to get the video and set the response type as blob, afterwards I created a FormData in which I appended the response, this will allow the blob to be sent to the server.Here is how my function looks like.

    function sendXHR(){
        //Envia bien blob, no interpretado
        var xhr = new XMLHttpRequest();
        var video=$("#myexportingvideo");
        xhr.open('GET', video.src , true);
        xhr.responseType = 'blob';
        xhr.onload = function(e) {
        if (this.status == 200) {
            // Note: .response instead of .responseText
            var blob = new Blob([this.response], {type: 'video/webm'});
            console.log(blob.size/1024);
            console.log(blob.type);
            form = new FormData(),
            request = new XMLHttpRequest();
            form.append("myblob",blob,"Capture.webm");
            form.append("myname",$("#name_test").value);
            request.open("POST","./UploadServlet",true);
            request.send(form);
           }
        };
        xhr.send();
    }
    

提交回复
热议问题