canvas 的数据怎么转换为视频格式

Question

目前需要在前端做一个截取10s视频并上传至阿里云的功能。原视频对接的是Dash的实时视频，这里使用canvas 绘制了10s左右，目前绘制出来的数据只能取到实时的ImageData 数据，这个数据或者把每帧的数据转换为jpg图片传到后台该怎么生成视频文件，感觉在前台是没法实现的。不知还有没有其他的思路。

getVideo(...val){
    let self=this;
    self.showVideoDialog=true;
    this.$nextTick(()=>{
        self.startTimeCutVideo=new Date().getTime();
        self.timerCallback();
    })
},
timerCallback(){
    let self=this;
    self.computeFrame();
    if((self.endTImeCutVideo-self.startTimeCutVideo)/1000>10){
        clearTimeout(self.timeVideo);
    }
    self.timeVideo= setTimeout(function(){
        self.endTImeCutVideo=new Date().getTime();
        self.timerCallback();
    },0);
},
computeFrame(){
    let self=this;
    self.canvasEl=document.getElementById('vcanvas');
    var ctx = self.canvasEl.getContext('2d');
    let width=self.videoEl.videoWidth*2;
    let height=self.videoEl.videoHeight*2;
    ctx.drawImage(self.videoEl,0,0,width,height);
    let url=ctx.getImageData(0,0,width,height);
},

Answer 1

目前使用webRTC 算是简单实现了功能，感觉还有一些问题。

let canvasEl=document.getElementById('myCanvas');
let recorder=RecordRTC(canvasEl,{type:'canvas'});
recorder.startRecording(); //开始录制
//点击暂停按钮,或者设置定时器10s后
recorder.stopRecording(function(){
    var blob =recorder.getBlob();
    let url=URL.createObjectURL(blob);
});

参考：https://github.com/muaz-khan/...