乐趣区

关于前端:使用浏览器录制屏幕

jiezi

最近有一个录制屏幕的需要，相似于录制软件的操作教程给他人演示。在网上搜了一下录制屏幕，后果大多须要下载安装，而且有免费或者广告。无意间找到一个应用浏览器在线录屏的网站，出于好奇，钻研了一下实现的形式，并实现了一个能够应用的小作品和大家分享，链接放到了文末。
找到的在线录屏的网站地址是 SOOGIF 它是须要你注册登录能力应用屏幕录制性能，而且录制实现，不花钱只能取得无限的几次下载机会。因而，我打算本人做一个相似的利用。

Web API 接口

要实现这个性能，次要用到的接口有 2 个：

  • MediaDevices.getDisplayMedia()
  • MediaRecorder()

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

填充根本的页面元素

如果你相熟一些 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);

当点击开始捕捉按钮，浏览器会弹出上面的相似页面：

抉择你想要录制的浏览器页面或者窗口，甚至是整个屏幕都能够被录制。

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

这时咱们就能够录制了，上面解决 开始录制 按钮的逻辑：

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。传送门

退出移动版