electron16.0.5+vue實(shí)現(xiàn)電腦選擇區(qū)域錄制視頻（01）
electron是一個(gè)跨端構(gòu)建桌面應(yīng)用的框架，利用electron實(shí)現(xiàn)錄制指定區(qū)域視頻并保存到本地，讀取視頻目錄到播放列表并實(shí)現(xiàn)播放視頻的功能。
功能需求：
electron實(shí)現(xiàn)電腦系統(tǒng)錄屏和指定區(qū)域錄屏功能；
利用node保存視頻到本地文件目錄功能；
利用node讀取本地視頻到播放列表；
electron實(shí)現(xiàn)視頻播放和刪除本地視頻功能；
electron實(shí)現(xiàn)錄時(shí)選擇區(qū)域預(yù)覽視頻功能；
實(shí)現(xiàn)錄制流程，包括：開始錄制，暫停錄制，恢復(fù)錄制，結(jié)束錄制的功能；
electron實(shí)現(xiàn)打開視頻并播放的功能；
electron實(shí)現(xiàn)錄制視頻前選擇本地保存視頻目錄的功能。
備注：本篇文章主要介紹electron錄制視頻實(shí)現(xiàn)，其他部分會(huì)陸續(xù)更新。
最終效果圖：
軟件版本：
?"electron": "^16.0.5"
"@electron/remote": "^2.0.1"
"fix-webm-metainfo": "^1.0.6"
"vue-cli-plugin-electron-builder": "~2.1.1"
"view-design": "^4.7.0"
?"vue": "^2.6.11"
"node-sass": "^6.0.1"
"sass-loader": "^10.2.0"
實(shí)現(xiàn)思路：
利用electron的desktopCapturer模塊和navigator.mediaDevices.getUserMedia獲取視頻源列表，獲得想要錄制的區(qū)域，獲取音頻用navigator.mediaDevices.getDisplayMedia，將音頻流加到視頻流里合并，之后用新建對(duì)象?MediaRecorder? 對(duì)音視頻流進(jìn)行錄制，錄制好的視頻會(huì)出現(xiàn)沒有視頻時(shí)長和時(shí)間線不能拖拽問題這兩個(gè)問題，這是MediaRecorder API設(shè)計(jì)的缺陷，官方也沒有給出明確解決方式，鼓勵(lì)開發(fā)者到其他社區(qū)尋求答案。后面會(huì)給出解決方案。
1、獲取視頻流
2、獲取音頻流
這里獲取音頻流建議使用異步方法，這樣能準(zhǔn)確獲取到設(shè)備的音頻。
3、獲取視頻流異常
4、開始錄制
重要：解決視頻沒有時(shí)長和時(shí)間線拖拽不生效問題
this.recorder.onstop錄制結(jié)束這里，如果不做修復(fù)處理，錄制出來的視頻沒有視頻時(shí)長和時(shí)間線拖拽不了的問題，視頻錄制沒有聲音是因?yàn)槭褂?strong>new MediaRecorder錄屏API所致，查找很多資料，官方給出了明確解釋，該API錄制視頻時(shí)沒有處理錄制視頻時(shí)間和時(shí)間線拖拽問題，并鼓勵(lì)開發(fā)者到其他社區(qū)尋求解決之法。解決：用到了fixWebmMetaInfo()對(duì)視頻流進(jìn)行處理的，這個(gè)方法需要到npm官方搜索fix-webm-metainfo并安裝到項(xiàng)目即可。
安裝方式:
在需要用的地方導(dǎo)入，然后就可以使用了
官方給出使用示例：
5、保存視頻方法
時(shí)間戳數(shù)字方法，全局注入綁定vue的main.js中
