前端也能實現錄屏!


Chrome錄屏插件

准備:
chrome plugin:
關於錄屏功能的開發可以看下面這篇文章引導你的思路(技術不用看只是理思路):
 
看完后,下面是chrome插件開發的共享屏幕demo,你可以直接拿來用:
 
下載完后打開擴展程序,按圖操作:
 
  1. 勾選開發者模式會看見下面有一行按鈕

 

  1. 點擊打包擴展程序會彈出模態框,找到你extension文件點擊確定,打包擴展程序

extension:demo插件

 

  1. 打包后就會提示你打包成功,直接點擊確定就行別的先不管,然后你會看到如下圖所示一般

默認的都是已啟用狀態,你需要勾選‘允許訪問文件網址’(重點):

 

 
  1. 最后打開index.html文件測試是否成功。
錄屏demo:
這是錄屏功能demo:
 
你需要下載:
 
下載完后,把 MediaStreamRecorder-master / demos / video-recorder.html 拿出來,
錄屏有它就夠了,運行之前將下載的補丁js跟它放到同級目下。
 
chrome plugin 與 錄屏功能整合:
 
打開 video-recorder.html后,你會發現它是調用攝像頭錄像的功能,那么我們只需要將它這個功能改成我們之前做好的捕捉屏幕的功能就好了。具體如下:
 
  1. 首先打開video-recorder.html,里面有許多功能按鈕,例:start,stop,save等

功能雖然多本質都是一樣的,將這三個功能函數直接copy出來放到我們的app.js中,

如下圖:

 

注意:合並雖然簡單但又很麻煩要考慮許多情況,有時候改着改着就亂了。在這里我就舉個簡單例子得了,比如:將chrome plugin 中的 app.js的捕捉屏幕功能直接換成 start功能。

 
特別注意:需要將onMediaSuccess函數copy出來,這個是錄屏功能的關鍵函數。
 
說明:
onMediaSuccess中你會看到有timeInterval的變量,首先它是以毫秒為單位,是MediaRecorder.start的參數:
 
MediaRecorder.start(timeslice)
timeslice Optional
The number of milliseconds to record into each Blob. If this parameter isn't included, the entire media duration is recorded into a single Blob unless the requestData() method is called to obtain the Blob and trigger the creation of a new Blob into which the media continues to be recorded.
利弊:
它越大在切屏時的錄屏效果也會非常好,但是錄制的時間比你實際錄制的時間會短
當它調小的時候就不說了切屏時,畫面渾濁並停止錄屏。
所以一般都是大點,設置成五秒以上就可以了。
 
最后你可以打開html看到你的成果啦!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM