JS 浏览器 录屏加麦克风配音 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <button type="button" onclick="recordScreen()">Start</button>
    <button type="button" onclick="stop()">stop</button>
    <script src='index.js'></script>
    <script>
        var recoder;
        async function recordScreen() {

            var videoStream = await navigator.mediaDevices.getDisplayMedia({ video: true }) //录屏
            var audioStream = await navigator.mediaDevices.getUserMedia({ audio: true })  // 录音
            var tracks = [];
            videoStream.getVideoTracks().forEach(t => tracks.push(t)) 
            audioStream.getAudioTracks().forEach(t => tracks.push(t))
            var stream = new MediaStream(tracks)
            recoder = new MediaRecorder(stream);
            var data = []
            recoder.ondataavailable = function (e) {
                data.push(e.data)
            }
            recoder.onstop = function () {
                this.stream.getTracks().forEach(track => track.stop());

                var blob = new Blob(data, { type: this.mimeType });
                var link = document.createElement("a")
                link.href = URL.createObjectURL(blob)
                link.download = new Date().getTime() + ".webm";
                document.body.appendChild(link)
                link.click()
                URL.revokeObjectURL(link.href)
                link.remove()
            }
            recoder.start()

        }
        function stop() {
            recoder.stop();
        }
    </script>
</body>

</html>

　　

posted @ 2023-01-22 23:08  到此灬一游丿  阅读(321)  评论(0)    收藏  举报