一、前言

自從網(wǎng)友看了我的上一篇關(guān)于使用html制作屏幕錄制功能的網(wǎng)頁(yè)的文章后，表示非常的感興趣，紛紛投來(lái)好評(píng)和贊美，不過(guò)唯一美中不足的是最后的邊錄邊播功能稍微有一點(diǎn)問(wèn)題，我們來(lái)看看問(wèn)題出在哪里，如圖：

[圖片上傳失敗...(image-b18a7c-1697990184913)]

可以看到，錄屏的時(shí)候重復(fù)錄制了，每一幀都覆蓋了前一幀的內(nèi)容，使得看起來(lái)效果很差，眼花繚亂的，

[圖片上傳失敗...(image-18ba8b-1697990184913)]

因此這說(shuō)明咱們的代碼是有缺陷的，雖然不算完全意義上的失敗，不過(guò)由于沒(méi)有實(shí)現(xiàn)真正的邊錄邊播功能，這讓小編也非?？鄲溃劢z們也挺尷尬的，不過(guò)小編通過(guò)不懈努力，終于找到了解決辦法。經(jīng)過(guò)小編的一頓操作，最終改正了錯(cuò)誤，經(jīng)過(guò)修改后的效果圖：

[圖片上傳失敗...(image-98c0ed-1697990184912)]

此時(shí)，我們的屏幕錄像專(zhuān)家的邊錄邊播的功能就正常顯示了。真正實(shí)現(xiàn)了邊錄制邊播放的功能，而且沒(méi)有任何毛病，非常完美的解決了上個(gè)代碼所存在的諸多問(wèn)題，那么這個(gè)功能到底是如何實(shí)現(xiàn)的了，請(qǐng)繼續(xù)往下看。

二、RecordRTC.js

這里，我們通過(guò)使用RecordRTC.js這一個(gè)封裝好的關(guān)于錄屏等操作的js文件來(lái)使得我們解決這一問(wèn)題，RecordRTC.js真的是一個(gè)非常了不起的js封裝庫(kù)文件，源代碼和RecordRTC.js小編一起打包好了，大家只需要下載就可以得到兩份文件，運(yùn)行源文件就可以得到你想要的效果，源代碼下載地址：

邊錄邊播完整版.rar: https://url18.ctfile.com/f/7715018-961651503-ec2e03?p=6511 (訪問(wèn)密碼: 6511)

[圖片上傳失敗...(image-67033f-1697990184912)]

三、結(jié)語(yǔ)

以上就是我們?cè)蹅兊钠聊讳浿平K極版了，下一篇文章，小編將帶領(lǐng)大家一起開(kāi)發(fā)具有錄音攝像功能的網(wǎng)頁(yè)，咱們拭目以待吧。另外，動(dòng)動(dòng)你們發(fā)財(cái)?shù)男∈郑c(diǎn)個(gè)贊和在看吧。你們的支持就是小編創(chuàng)作的不竭動(dòng)力。