用JavaScript写的一个录屏功能简直太香

用JavaScript写的一个录屏功能简直太香 2022-08-20 625

使用JavaScript的API mediaDevices 实现录屏功能，亲测有效

这个不是本人写的，是看了的文章，发现这么好玩的功能的

直接贴代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>录屏功能</title>
        <meta charset="utf-8">
    </head>
    <body>
        <video class="video" width="600px" controls></video>
        <button class="record-btn">record</button>
        <script src="./index.js"></script>
    </body>

</html>

index.js

let btn = document.querySelector(.record-btn)
btn.addEventListener("click", async function(){
    let stream = await navigator.mediaDevices.getDisplayMedia({
        video:true
    })
    //需要更好的浏览器支持
    const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm"
    let mediaRecorder = new MediaRecorder(stream,{
        mimeType:mime
    })
    //当录屏时，MediaRecorder会给我们提供分块的数据，我们就需要将这些数据存储在一个变量中
    let chunks = []
    mediaRecorder.addEventListener(dataavailable,function(e){
        console.log(e)
        chunks.push(e.data)
    })
    //当我们停止录屏时，希望在video中播放就可以这样做
    mediaRecorder.addEventListener(stop,function(){
        let blob = new Blob(chunks,{
            type:chunks[0].type
        })
        //把数据放在video中
        let video = document.querySelector(.video)
        let url = URL.createObjectURL(blob)
        video.src = url
        //保存
        let a = document.createElement(a)
        a.href = url
        a.download = video.webm
        a.click()
    })
    
    //必须手动启动
    mediaRecorder.start()
})

免费搭建微信查券返利机器人来轻松赚佣金