js实现页面窗口录制

一、在线demo

1、在线demo地址：http://www.lb0125.com/videoRecord.html

 注：目前测试发现只有在chrome浏览器里可以使用

二、直接上代码

复制代码
<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
  <video class="video" width="600px" controls></video>
  <button class="record-btn">录制</button>

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

      let chunks = []
      mediaRecorder.addEventListener('dataavailable', function (e) {
        chunks.push(e.data)
      })

      mediaRecorder.addEventListener('stop', function () {
        let blob = new Blob(chunks, {
          type: chunks[0].type
        })

        let url = URL.createObjectURL(blob)

        let video = document.querySelector(".video")
        video.src = url

        let a = document.createElement('a')
        a.href = url
        a.download = 'video.webm'
        a.click()
      })

      mediaRecorder.start()
    })

  </script>
</body>

</html>
复制代码

三、效果

操作步骤：

1、点击录制按钮后，在弹窗窗口中选择需要录制的窗口，并点击分享后开始录制

 

 

 2、录制中时，页面底部会有停止共享的按钮，点击即可结束录制，并下载录制视频到本地，同时可在该页面播放

 

posted @   web喵神  阅读(111)  评论(0)  编辑  收藏  举报
相关博文：
·  js实现网页端录音功能
·  html+css实现指针时钟
·  js浏览器录制屏幕
·  js录屏方法
·  JS实现网页录屏
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天：
2017-02-08 移动端web开发，click touch tap区别
点击右上角即可分享
微信分享提示
AI IDE Trae