从画布视频在线录制

Question

我有一个来自网络摄像头的在线视频。
我想录制它并下载为 mp4 或 webm。
我的代码是：
当用户点击 button#recButton 时，会创建一个显示视频的画布。
之后，我记录画布，直到用户单击 button#pauseRecord 并开始下载
这都是正确的。但是视频没有声音。

            //Start Recording
        var recButton = document.querySelector('button#recButton');
        function handleStop(event) {
            console.log('Recorder stopped: ', event);
        }
        function handleDataAvailable(event) {
            if (event.data && event.data.size > 0) {
               recordedBlobs.push(event.data);
            }
        }

        var mediaRecorder;
        var recordedBlobs;
        recButton.onclick = function(){

            //video to canvas
            var v = document.querySelector('video.thisUserShareVideo');
            var c = document.querySelector("canvas#recordingCanvas");
            var ctx = c.getContext('2d');
            var i;

            widthCanVid = v.videoWidth;
            heightCanVid = v.videoHeight;

            c.width = widthCanVid;
            c.height = heightCanVid;

            i = window.setInterval(function() {
                ctx.drawImage(v,5,5,widthCanVid,heightCanVid)
            },20);


            //record from canvas
            canvas = document.querySelector('canvas#recordingCanvas');
            stream = canvas.captureStream();

            var options = {mimeType: 'video/webm'};
            recordedBlobs = [];

            try {
                mediaRecorder = new MediaRecorder(stream, options);
            } catch (e0) {
                console.log('Unable to create MediaRecorder with options Object: ', e0);
                try {
                  options = {mimeType: 'video/webm,codecs=vp9'};
                  mediaRecorder = new MediaRecorder(stream, options);
                } catch (e1) {
                  console.log('Unable to create MediaRecorder with options Object: ', e1);
                  try {
                    options = 'video/vp8'; // Chrome 47
                    mediaRecorder = new MediaRecorder(stream, options);
                  } catch (e2) {
                    alert('MediaRecorder is not supported by this browser.\n\n' +
                        'Try Firefox 29 or later, or Chrome 47 or later, with Enable experimental Web Platform features enabled from chrome://flags.');
                    console.error('Exception while creating MediaRecorder:', e2);
                    return;
                  }
                }
            }

            mediaRecorder.onstop = handleStop;
            mediaRecorder.ondataavailable = handleDataAvailable;
            mediaRecorder.start(100);
        };

        var pauseRecord = document.querySelector("button#pauseRecord");
        pauseRecord.onclick = function(){

            mediaRecorder.stop();
            var blob = new Blob(recordedBlobs, {type: 'video/webm'});
            var url = window.URL.createObjectURL(blob);

            var a = document.querySelector("a#linkDownloadVideo");
            a.style.display = 'none';
            a.href = url;
            a.download = 'test.webm';
            document.body.appendChild(a);
            a.click();

        };

Answer 1

我把我的代码改成这个：

        //Record Video
        let log = console.log.bind(console),
          id = val => document.getElementById(val),
          ul = id('ul'),
          start = id('startRecord'),
          stop = id('stopRecord'),
          stream,
          recorder,
          counter=1,
          chunks,
          media;

        start.onclick = e => {
            let mv = id('mediaVideo'),
                mediaOptions = {
                    video: {
                        tag: 'video',
                        type: 'video/webm',
                        ext: '.mp4',
                        gUM: {video: true, audio: true},
                        mimetypes : {mimeType: 'video/webm'},
                    },
                    audio: {
                        tag: 'audio',
                        type: 'audio/mp3',
                        ext: '.mp3',
                        gUM: {audio: true},
                        mimetypes : {mimeType: 'video/webm'},
                    }
                };

            media = mediaOptions.video;

            recorder = new MediaRecorder(window.webrtc.webrtc.peers[0].stream,media.mimetypes);

            recorder.ondataavailable = e => {
                chunks.push(e.data);
                makeLink();
            };
            log('got media successfully');
            chunks=[];
            recorder.start();

        }

        function makeLink(){
            let blob = new Blob(chunks, {type: media.type })
                , url = URL.createObjectURL(blob)
                , li = document.createElement('li')
                , hf = document.createElement('a');
            hf.href = url;
            hf.download = `${counter++}${media.ext}`;
            hf.innerHTML = `donwload ${hf.download}`;
            li.appendChild(hf);
            ul.appendChild(li);
        }

        stop.onclick = e => {
            recorder.stop();
        }

一切正常，它可以在线录制音频、视频。
但是录制视频后，视频没有时间：
image