JavaScript工具：用JavaScript调用浏览器api,实现web应用录屏功能

最新推荐文章于 2024-06-17 15:03:18 发布

头头不会敲代码

最新推荐文章于 2024-06-17 15:03:18 发布

阅读量1.1k

点赞数

文章标签： vue.js css3 javascript 前端 html5

本文链接：https://blog.csdn.net/olderandyanger/article/details/120863461

版权

已封装为工具函数，选定元素绑定该函数，就可以添加录屏功能

/**
 * @description 用法：对dom元素添加监听事件绑定为getRecorderVideo()，即可调用
 * @param playVideoIdName 可选参数，用于绑定在哪个节点预览录屏的视屏，不传则不预览
 */
export const getRecorderVideo = async (playVideoIdName) => {
  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 videoUrl = URL.createObjectURL(blob);
    // 绑定播放视频Dom对象，
    const playVideo = (name) => {
      if (name != undefined && typeof name == "string") {
        const videoBox = document.getElementById(`${name}`);
        // 创建Video节点对象
        const newVideo = document.createElement("video");
        newVideo.src = videoUrl;
        newVideo.style.height = "200px";
        newVideo.style.width = "200px";
        newVideo.setAttribute("class", "playRecorderVideoDom");
        const oldVideo = videoBox
          .getElementsByClassName("playRecorderVideoDom")
          .item(0);
        // 非第一次操作，替换节点即可
        if (!oldVideo) {
          videoBox.appendChild(newVideo);
        } else {
          videoBox.replaceChild(newVideo, oldVideo);
        }
      } else {
        console.log("不播放视频");
      }
    };
    // 下载录屏视频文件
    const downloadVideo = (url, videoName) => {
      let a = document.createElement("a");
      a.href = url;
      a.download = `${videoName}.webm`;
      a.click();
    };
    downloadVideo(videoUrl, "录屏文件");
    playVideo(playVideoIdName);
  });
  // 手动启动 录屏
  mediaRecorder.start();
};

参考链接：https://www.toutiao.com/i7028792217632440871/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&timestamp=1636525043&app=news_article&utm_source=weixin&utm_medium=toutiao_android&use_new_style=1&req_id=202111101417230101330280380EE39367&share_token=b0d6cb94-d48d-4e26-82da-9bc30fe59da1&group_id=7028792217632440871