Question

我有来自网络摄像头的在线视频我想录制它并下载为mp4或webm 我的代码是：
当用户点击按钮#recButton 时，画布会创建显示视频然后，我记录画布，直到用户点击按钮＃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

我将我的代码更改为：

enum ETypeId {
    alpha  = "a",
    beta   = "b",
    gamma  = "g"
}

interface IType {
    id:     ETypeId,
    title:  string,
}

const myMap: Map<string, IType> = new Map( [
   [ ETypeId.alpha,  { id: ETypeId.alpha, title: "Alpha" } ],
   [ ETypeId.beta,  { id: ETypeId.beta,  title: "Beta"  } ],
   [ ETypeId.gamma, { id: ETypeId.gamma, title: "Gamma" } ]
]);

console.log(myMap.get(ETypeId.alpha)) // -> {id: "a", title: "Alpha"}

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

从画布视频在线录制

1 个答案: