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

最新推荐文章于 2024-07-06 16:42:05 发布

dreamimport

最新推荐文章于 2024-07-06 16:42:05 发布

阅读量1.1k

点赞数

分类专栏：学习项目文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/dreamimport/article/details/121284164

版权

学习项目专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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

使用JavaScript的API mediaDevices 实现录屏功能，亲测有效
- 直接贴代码

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

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

直接贴代码

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()
})

dreamimport

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
用JavaScript写的一个录屏功能简直太香

用JavaScript写的一个录屏功能简直太香使用JavaScript的API mediaDevices 实现录屏功能，亲测有效直接贴代码使用JavaScript的API mediaDevices 实现录屏功能，亲测有效这个不是本人写的，是看了Sunshine_Lin的文章，发现这么好玩的功能的直接贴代码index.html<!DOCTYPE html><html> <head> <title>录屏功能</title
复制链接

扫一扫