RecordRTC实现视频录制

RecordRTC实现视频录制和播放

<video id="myVideo" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"
    controlslist="nofullscreen" width="100%" height="500">
</video>
<canvas id="canvas"></canvas>
<img id="img"></img>

 <script>
        /*
            string数据库名称,number版本号不传默认为1
        */

        // console.log(useUserMedia)
        var myVideo = document.getElementById('myVideo')
        var canvas = document.getElementById('canvas')
        var img = document.getElementById('img')
        navigator.mediaDevices.getUserMedia({
            video: {
                width: 1280,
                height: 720,
                frameRate: 24
            },
            audio: true
        }).then(async function (stearm) {
            let recorder = RecordRTC(stearm, {
                type: 'video',
                //视频类型
                mimeType: 'video/mp4',
                timeSlice: 1000,
                //该回调函数必须和上面的timeSlice分片时间配合使用
                ondataavailable: function (blob) {
                    // blob为每一秒的视频片段
                    console.log(blob, '00000000')
                },
                // 获取时间片段的时间戳
                onTimeStamp: function (timestamp) {
                    console.log(timestamp)
                },
                bitsPerSecond: 128000,
            })
            recorder.startRecording();
            const sleep = m => new Promise(r => setTimeout(r, m));
            await sleep(10000);
            // if (blob) {
            //     myVideo.src = window.URL.createObjectURL(blob)
            // }
            recorder.stopRecording(function (audioURL) {
          
                let blob = recorder.getBlob();
                console.log(blob, '0000000')
              
                myVideo.onload = function (e) {
                    console.log('清除掉创建的URL')
                    window.URL.revokeObjectURL(myVideo.src)
                }
                myVideo.src = window.URL.createObjectURL(blob)
                //视频下载 invokeSaveAsDialog（参数1为视频流blob,参数2为视频类型）
                invokeSaveAsDialog(blob, 'video.mp4');
            })
        })
    </script>