大家好,很高興又見面了,我是" 高級前端進階 ",由我帶著大家一起關註前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關註、點贊、收藏、轉發!
![](https://img.jasve.com/2024-2/a55192bbea5227a20d37d354cf2907a8.webp)
什麽是 Screenity
Screenity 是完全免費的一款功能強大、保護私密的螢幕錄像機和註釋工具,可以為工作、教育等制作更好的視訊。 使用者可以建立令人驚嘆的產品演示、教程、演示文稿,或與您的團隊分享反饋。
Screenity 具有以下突出優勢:
目前 Screenity 在 Github 透過 MIT 協定開源,有超過 9.2k 的 star、1k 的 fork、是一個值得關註的前端開源計畫。
自托管 Screenity
如果需要建立開發版本的 Screenity,可以透過下面的流程完成:
開發甚至可以在本地執行 Screenity,而無需從 Chrome 市集安裝。
如果要啟用保存到 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 的功能非常強大,一定程度上也是站在巨人的肩膀上,比如:
Screenity 的類似計畫
除了 Screenity 外,還可以嘗試 JSCapture,JSCapture 是用純 JavaScript 和 HTML5 實作的螢幕捕獲庫,允許開發者從瀏覽器制作桌面螢幕截圖並錄制視訊。
JSCapture 使用 getUserMedia 進行螢幕捕獲。 目前,僅 Google Chrome、Canary 和 Chromium 透過啟用實驗標誌來支持螢幕捕獲 API。為了啟用該標誌:
需要註意的是,必須使用 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