最近有一个录制屏幕的需要，相似于录制软件的操作教程给他人演示。在网上搜了一下录制屏幕，后果大多须要下载安装，而且有免费或者广告。无意间找到一个应用浏览器在线录屏的网站，出于好奇，钻研了一下实现的形式，并实现了一个能够应用的小作品和大家分享，链接放到了文末。
找到的在线录屏的网站地址是 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> <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。传送门