从技术、设计、AI等角度，谈谈RecordScreen.io

最近看到艾体验AIUX介绍的一款小工具《录网课的老师，流下了幸福的泪水》，录屏小工具——RecordScreen.io。不须要下载任何安装包，直接浏览器打开就能够开始录制屏幕。

有一点比较惊讶，就是浏览器不借助任何的插件，就能够录制电脑的屏幕了，我在此以前还不知道这个api，今天抽空研究了下。

- 录屏API

原来是 getDisplayMedia 这个功能：

   
     
   
   
    
    
             
    
    

    
      
    
    
     
     
              
     
   
     
   
   
    
    
             
    
    
navigator.mediaDevices.getDisplayMedia

你们能够尝试下，打开chrome，而后在开发者工具中输入：

   
     
   
   
    
    
             
    
    

    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
   
     
   
   
    
    
             
    
    
async _startRecord() { var displayMediaOptions = { video: true, // audio: true, not support cursor: 'always' } let captureStream = null; try { captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions); } catch (err) {            console.error("Error: " + err); } return captureStream; }

把captureStream赋值给video的 srcObject ，便可把录制的屏幕经过video标签播放出来了~

这里注意video标签要加个autoplay的属性，否则显示不出来。

我把这个功能为最近 实验室在探索的一个编辑器 码 了个插件。

chrome为咱们提供了3个选项，录制整个屏幕、录制某个应用、录制chrome的某个标签页。

嗯，就几行代码，为编辑器新增了一个录屏功能。

以上是使用chrome原生的api简单实现的录屏功能。

仔细查看RecordScreen.io的源代码，咱们会发现，其实RecordScreen.io用的是一款开源库 RecordRTC 。

RecordRTC兼容了各大主流浏览器， 而且提供了保存视频的功能。

- 设计的细节

在使用getDisplayMedia这个功能的时候，浏览器会有一个悬浮窗：

注意它出现的位置，靠近屏幕的下方，虽然网页上提供了一个STOP按钮，可是与系统的按钮位置稍微重叠了，可用性就不好。

设计师忽视了getDisplayMedia浏览器默认悬浮窗的位置。除了位置，getDisplayMedia还能够隐藏，因此在网页上留一个STOP按钮是有好处的。

- 想法

我一直在思考如何在现有工具的基础上集成AI的功能，创造出不同的体验。因而我尝试了下bodypix，bodypix是谷歌发布人体图像分割算法。

能够把人物从画面中分离出来：

搭配上以上的工具，就变成以下效果：

简单用动图演示下效果

以上为全文。

这是一款用开源库搭建的工具应用，技术上使用了WebRTC，网页即时通讯（Web Real-Time Communication），是一个支持网页浏览器进行实时语音对话或视频对话的API。

从一个小细节，咱们能够看出设计对技术的理解程度。

等我空了，把编辑器的录课.ai完善，试试录一些课程。

---

可经过扫码，与我深度交流

或赞扬获取微信号

本文分享自微信公众号 - 无界社区mixlab（mix-lab）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。