從技術、設計、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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。