為何說 Screenity 是前端錄屏天花板？

2024-02-10數位

大家好，很高興又見面了，我是" 高級前端‬進階 ‬"，由我帶著大家一起關註前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關註、點贊、收藏、轉發！

什麽是 Screenity

Screenity 是完全免費的一款功能強大、保護私密的螢幕錄像機和註釋工具，可以為工作、教育等制作更好的視訊。使用者可以建立令人驚嘆的產品演示、教程、演示文稿，或與您的團隊分享反饋。

Screenity 具有以下突出優勢：

對索引標籤、特定區域、桌面、任何應用程式或相機進行無限錄制

️ 錄制麥克風或內部音訊，並使用一鍵通等功能

✏️ 透過在螢幕上的任意位置繪圖、添加文本、箭頭、形狀等進行註釋

✨ 使用人工智慧驅動的相機背景或模糊來增強錄音效果

平滑放大錄音以專註於特定區域

模糊任何頁面的任何敏感內容以保持其私密性

✂️ 使用綜合編輯器刪除或添加音訊、剪下、修剪或剪裁錄音

突出顯示點選和光標，並進入聚光燈模式

⏱️ 設定鬧鐘以自動停止錄音

匯出為 mp4、gif 和 webm，或將視訊直接保存到 Google 雲端硬碟以共享連結

⚙️ 設定倒計時、隱藏部份 UI 或將其移動到任何地方

只有使用者可以看到您的視訊，Screenity 不會收集任何數據，甚至支持離線！

沒有限制，想制作多少視訊就制作多久

目前 Screenity 在 Github 透過 MIT 協定開源，有超過 9.2k 的 star、1k 的 fork、是一個值得關註的前端開源計畫。

自托管 Screenity

如果需要建立開發版本的 Screenity，可以透過下面的流程完成：

檢查 Node.js 版本是否 >= 14

複制儲存庫

執行 npm install 以安裝依賴項

執行 npm start

透過轉到 chrome://extensions/ 並啟用開發人員模式來載入擴充套件

單擊載入解壓的擴充套件

選擇構建資料夾

開發甚至可以在本地執行 Screenity，而無需從 Chrome 市集安裝。

從釋出頁面下載最新的 Build.zip

透過在位址列中貼上 chrome://extensions/ 並啟用開發人員模式來載入擴充套件。

拖動包含程式碼的資料夾（確保其是一個資料夾而不是 ZIP 檔，因此請先解壓縮），或單擊「載入解壓的檔」按鈕並找到該資料夾。

此時就可在本地使用 Screenity，當然需要按照說明設定 Google 雲端硬碟。

如果要啟用保存到 Google 雲端硬碟的能力，則必須使用連結的擴充套件金鑰更改 manifest.json 檔中的 client_id。

開發者可以透過存取 Google Cloud Console 並選擇「Create Credential> OAuth Client ID > Chrome App」來建立。要建立持久擴充套件金鑰，則可以按照此處 https://developer.chrome.com/docs/extensions/reference/manifest/key 詳細說明的步驟操作。

{ // manifest.json "manifest_version": 3,... "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEp2oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgp9LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",}

Screenity 的三方依賴

Screenity 的功能非常強大，一定程度上也是站在巨人的肩膀上，比如：

用於編輯和編碼視訊的 FFmpeg WASM

帶有自拍分割模型的 Tensorflow

用於繪圖和註釋的 Fabric.js

UI 元件的基數基元

色輪的反應顏色

Localbase 使用 IndexedDB 幫助離線儲存視訊

Wavesurfer.js 在彈出視窗和編輯器中建立音訊波形

React Advanced Cropper 用於編輯器中的裁剪 UI

fix-webm-duration 將缺失的後設資料添加到 WEBM 檔

Screenity 的類似計畫

除了 Screenity 外，還可以嘗試 JSCapture，JSCapture 是用純 JavaScript 和 HTML5 實作的螢幕捕獲庫，允許開發者從瀏覽器制作桌面螢幕截圖並錄制視訊。

JSCapture 使用 getUserMedia 進行螢幕捕獲。目前，僅 Google Chrome、Canary 和 Chromium 透過啟用實驗標誌來支持螢幕捕獲 API。為了啟用該標誌：

轉到 chrome://flags/#enable-usermedia-screen-capture

啟用 - 「在 getUserMedia() 中啟用螢幕捕獲支持」

重新啟動瀏覽器。

需要註意的是，必須使用 https 才能進行螢幕錄制。由於捕獲每一幀時都會發生一些非常昂貴的操作，因此當捕獲高分辨率時，視訊將沒有用處。為了解決這個問題，請使用 scale 內容。

JSCapture.capture(config)

本文總結

本文主要和大家介紹 Screenity，其是完全免費的一款功能強大、保護私密的螢幕錄像機和註釋工具，可以為工作、教育等制作更好的視訊。因為篇幅問題，關於 Screenity 只是做了一個簡短的介紹，但是文末的參考資料以及個人主頁提供了大量優秀文件以供學習，如果有興趣可以自行閱讀。如果大家有什麽疑問歡迎在評論區留言。

參考資料

https://github.com/alyssaxuu/screenity?tab=readme-ov-file

https://developer.chrome.com/docs/extensions/reference/manifest/key?hl=zh-cn

https://ffmpegwasm.netlify.app/playground

https://screenity.io/en/

https://github.com/mgechev/jscapture

https://www.youtube.com/watch?v=ZqQ77p4THeE