Search code examples
html5-videocaptureajax-upload

How to upload a html5 video capture to sever?


I got html5 video capture like this:

        var canvas = document.createElement('canvas');
        canvas.height = video.height;
        canvas.width = video.width;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        capturedImage=ctx.getImageData(0,0,canvas.width,canvas.height))

and tried to upload this capture like this:

$.ajax({
         type: method,
         contentType: false,
         cache: false,
         processData: false,
         async: false,
         url: '....',
         data: capturedImage,<----------how to convert above captured image here?
   }).done(function(o) {
        .....
   });

if just:

data:capturedImage

backend will get data value like:

str:imageObject

ajax request just send a str to backend,so how to convert this captured image to let ajax uploading work?


Solution

  • Have you tried using capturedImage.data or JSON.stringify(caputedImage.data)? The data member supposedly contains the actual pixel array. I am not sure how $.ajax handles byte arrays, so you may have to do JSON.stringify(caputedImage.data).