看到个骚操作,玩了一下,写了个 bookmarklet

navigator.mediaDevices.getDisplayMedia({video:true}).then(function(stream){
  const mr=new MediaRecorder(stream,{mimeType:"video/webm;codecs=h264,opus"});
  mr.ondataavailable=function(ev){
    const a=document.createElement('a');a.href=URL.createObjectURL(ev.data);
    a.download ='screen_capture.webm';a.click();
  }; // will be called when .stop() with ev.data as a Blob
  mr.start();
})

这段代码也是很多WebRTC共享白板的实现原理。看起来也很简单,而且不需要额外的权限确认。

如果不需要另存为一个名字,则可以直接 location.assign() 又节约几个字。不知道还有没有办法继续节约代码量?

有点很好奇为啥chrome不支持 .mp4 封装。偏袒自家的 webm ?