头图

使用浏览器录制屏幕

头像
来了老弟
    45539
    发布于
    北京
    English
     
    最近有一个录制屏幕的需求，类似于录制软件的操作教程给别人演示。在网上搜了一下录制屏幕，结果大多需要下载安装，而且有收费或者广告。无意间找到一个使用浏览器在线录屏的网站，出于好奇，研究了一下实现的方式，并完成了一个可以使用的小作品和大家分享，可以点击查看。
    找到的在线录屏的网站地址是 SOOGIF 它是需要你注册登录才能使用屏幕录制功能，而且录制完成，不花钱只能获得有限的几次下载机会。因此，我打算自己做一个类似的应用。

    Web API 接口

    要实现这个功能，主要用到的接口有2个：

    下面具体记录一下实现的细节。

    填充基本的页面元素

    如果你熟悉一些Web前端的知识，那么下面的内容你就再熟悉不过了：

    <p>This example shows you the contents of the selected part of your display.
Click the Start Capture button to begin.</p>
<q>点击开始捕获按钮，选择你要捕获的窗口。</q>

<p>
<button id="start">开始捕获</button>&nbsp;
<button id="stop">停止捕获</button>
<button id="recordBtn">开始录制</button>
<button id="downloadBtn">下载</button>
</p>

<video id="video" autoplay></video>
<br>

<strong>Log:</strong>
<br>
<pre id="log"></pre>

    加入简单的样式：

    #video {
      border: 1px solid #999;
      width: 98%;
      max-width: 860px;
}
.error {
      color: red;
}
 .warn {
      color: orange;
}
.info {
      color: darkgreen;
}

    页面大概的样子

    JavaScript处理点击按钮逻辑

    首先获取到页面上的元素，并声明相关变量：

    const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const recordBtn = document.getElementById("recordBtn");
const downloadBtn = document.getElementById("downloadBtn");
let captureStream = null;
let mediaRecorder = null;
let isRecording = false;
let recordedBlobs = [];

    处理点击 开始捕获 按钮的逻辑：

    // Options for getDisplayMedia()
const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
};

async function startCapture(displayMediaOptions) {
  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    captureStream = videoElem.srcObject
    dumpOptionsInfo();
  } catch(err) {
    console.error("Error: " + err);
  }
}

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();
  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
  showMsg('用户停止了分享屏幕');
}

// Set event listeners for the start and stop buttons 给按钮添加监听事件
startElem.addEventListener("click", function(evt) {
  startCapture();
}, false);

stopElem.addEventListener("click", function(evt) {
  stopCapture();
}, false);

    当点击开始捕获按钮，浏览器会弹出下面的类似页面：
    capture
    选择你想要录制的浏览器页面或者窗口，甚至是整个屏幕都可以被录制。

    当选择好窗口，点击了分享按钮，被捕获的窗口的数据流会被同步到我们页面的video标签中，实时采样：
    sample

    这时我们就可以录制了，下面处理 开始录制 按钮的逻辑：

    function startRecording() {
  
  const mimeType = getSupportedMimeTypes()[0];
  const options = { mimeType };

  try {
    mediaRecorder = new MediaRecorder(captureStream, options);
  } catch (e) {
    showMsg(`创建MediaRecorder出错: ${JSON.stringify(e)}`);
    return;
  }
  recordBtn.textContent = '停止录制';
  isRecording = true;
  downloadBtn.disabled = true;
  mediaRecorder.onstop = (event) => {
    showMsg('录制停止了: ' + event);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start();
  showMsg('录制开始 mediaRecorder: ' + mediaRecorder);
}

function handleDataAvailable(event) {
  console.log('handleDataAvailable', event);
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function stopRecord() {
  isRecording = false;
  mediaRecorder.stop();
  downloadBtn.disabled = false;
  recordBtn.textContent = "开始录制";
  recordedBlobs = []
}

    处理下载按钮逻辑：

    downloadBtn.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, { type: 'video/webm' });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = '录屏_' + new Date().getTime() + '.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
});

    至此，这个录屏的Demo就完成了。录制的文件格式是webm，你可以在浏览器中打开它。

    有需要马上就用的小伙伴也可以直接使用我做好的版本，有比较好看的UI。传送门

    完整代码

    为了避免大家复制过程中出现错误，贴一下完整代码，可以到浏览器直接运行：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Capture</title>
    <style>
        #video {
            border: 1px solid #999;
            width: 98%;
            max-width: 860px;
        }

        .error {
            color: red;
        }

        .warn {
            color: orange;
        }

        .info {
            color: darkgreen;
        }
    </style>
</head>
<body>
<p>This example shows you the contents of the selected part of your display.
Click the Start Capture button to begin.</p>
<q>点击开始捕获按钮，选择你要捕获的窗口。</q>

<p>
<button id="start">开始捕获</button>&nbsp;
<button id="stop">停止捕获</button>
<button id="recordBtn">开始录制</button>
<button id="downloadBtn">下载</button>
</p>

<video id="video" autoplay></video>
<br>

<strong>Log:</strong>
<br>
<pre id="log"></pre>

<script>
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const recordBtn = document.getElementById("recordBtn");
const downloadBtn = document.getElementById("downloadBtn");
let captureStream = null;
let mediaRecorder = null;
let isRecording = false;
let recordedBlobs = [];

// Options for getDisplayMedia()
const displayMediaOptions = {
  video: {
    cursor: "always"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
};

async function startCapture(displayMediaOptions) {
  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    captureStream = videoElem.srcObject

    
    // var constraints = { audio: true, video: { width: 1280, height: 720 } };
    // navigator.mediaDevices.getUserMedia(constraints)
    // .then(function(mediaStream) {
    //   var video = document.querySelector('video');
    //   video.srcObject = mediaStream;
    //   video.onloadedmetadata = function(e) {
    //     video.play();
    //   };
    // })
    // .catch(function(err) {
    //   console.log(err.name + ": " + err.message);
    // });
    
    dumpOptionsInfo();
  } catch(err) {
    console.error("Error: " + err);
  }
}

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];

  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
  showMsg('用户停止了分享屏幕');
}

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function(evt) {
  startCapture();
}, false);

stopElem.addEventListener("click", function(evt) {
  stopCapture();
}, false);

recordBtn.addEventListener("click", function() {
    if (isRecording) {
        stopRecord()
    } else {
        startRecording()
    }
})

function showMsg(msg, error) {
  const msgEle = document.querySelector('#log');
  msgEle.innerHTML += `<p>${msg}</p>`;
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}


// 找到支持的格式
function getSupportedMimeTypes() {
  const possibleTypes = [
    'video/webm;codecs=vp9,opus',
    'video/webm;codecs=vp8,opus',
    'video/webm;codecs=h264,opus',
    'video/mp4;codecs=h264,aac',
  ];
  return possibleTypes.filter(mimeType => {
    return MediaRecorder.isTypeSupported(mimeType);
  });
}

function startRecording() {
  
  const mimeType = getSupportedMimeTypes()[0];
  const options = { mimeType };

  try {
    mediaRecorder = new MediaRecorder(captureStream, options);
  } catch (e) {
    showMsg(`创建MediaRecorder出错: ${JSON.stringify(e)}`);
    return;
  }
  recordBtn.textContent = '停止录制';
  isRecording = true;
  downloadBtn.disabled = true;
  mediaRecorder.onstop = (event) => {
    showMsg('录制停止了: ' + event);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start();
  showMsg('录制开始 mediaRecorder: ' + mediaRecorder);
}

function handleDataAvailable(event) {
  console.log('handleDataAvailable', event);
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function stopRecord() {
  isRecording = false;
  mediaRecorder.stop();
  downloadBtn.disabled = false;
  recordBtn.textContent = "开始录制";
  recordedBlobs = []
}

downloadBtn.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, { type: 'video/webm' });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = '录屏_' + new Date().getTime() + '.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
});

</script>
</body>
</html>
    前端chrome
    本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
    web开发总结
    不积跬步无以至千里
    被 1 篇内容引用
    avatar

    纸上得来终觉浅，绝知此事要躬行

    455 声望
    27 粉丝
    0 条评论
    得票最新
    推荐阅读
    微信小程序自定义tabbar图标切换点击两次才选中解决方法
    微信小程序开发过程中使用了自定义tabBar，运行官网提供的demo是没有问题的，但是自己添加了新的tab-item后点击会出现错误，具体表现为：点击一次tab跳到指定的页面，但是tabBar的状态还停留在上一个，再次点击才...

    来了老弟阅读 633

    手把手教你写一份优质的前端技术简历
    不知不觉一年一度的秋招又来了，你收获了哪些大厂的面试邀约，又拿了多少offer呢？你身边是不是有挺多人技术比你差，但是却拿到了很多大厂的offer呢？其实，要想面试拿offer，首先要过得了简历那一关。如果一份简...

    tonychen赞 152阅读 17.7k评论 5

    封面图
    正则表达式实例
    收集在业务中经常使用的正则表达式实例，方便以后进行查找，减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合，不能使用特殊...

    寒青赞 56阅读 8.4k评论 11

    JavaScript有用的代码片段和trick
    平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意：前三种方法只适用于32个位整数，对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

    jenemy赞 48阅读 6.9k评论 12

    从零搭建 Node.js 企业级 Web 服务器（十五）：总结与展望
    总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了，回顾第零章曾写道：搭建一个 Node.js 企业级 Web 服务器并非难事，只是必须做好几个关键事项这几件必须做好的关键事项就...

    乌柏木赞 75阅读 7k评论 16

    再也不学AJAX了！（二）使用AJAX ① XMLHttpRequest
    「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章，希望读者通过阅读本系列文章，能够对 AJAX 技术有更加深入的认识和理解，从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇，最近更新于 2023 年 1...

    libinfs赞 42阅读 6.8k评论 12

    封面图
    从零搭建 Node.js 企业级 Web 服务器（一）：接口与分层
    分层规范从本章起，正式进入企业级 Web 服务器核心内容。通常，一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的，如下图：从上至下，抽象层次逐渐加深。从下至上，业务细节逐渐清晰。视图...

    乌柏木赞 45阅读 8.5k评论 6

    avatar

    纸上得来终觉浅，绝知此事要躬行

    455 声望
    27 粉丝
    宣传栏
    52