技术博客

逛了逛某乎发现有分享使用javascript调用浏览器自带的屏幕录制功能，试了下挺好用的，在此记录下。

var body = document.body;

//双击开启屏幕录制

body.addEventListener("dblclick",async function(){

var stream = await navigator.mediaDevices.getDisplayMedia({video: true});

var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";

var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});

//录制

var chunks = [];

mediaRecorder.addEventListener('dataavailable', function(e) {

chunks.push(e.data)

})

//停止

mediaRecorder.addEventListener('stop', function(){

var d = new Date();

var date = d.getFullYear()+''+(d.getMonth()+1)+''+d.getDate();

var blob = new Blob(chunks, {type: chunks[0].type});

var url = URL.createObjectURL(blob);

var a = document.createElement('a');

a.href = url;

a.download = document.title+'_'+date+'.webm';

a.click();

})

//手动启动

mediaRecorder.start()

});

直接把代码复制到控制台回车后在网页上双击就会弹出录制的提示框了，操作简便。不得不说现在的浏览器真强大！