本篇文章為大家展示了怎么在HTML5中實(shí)現(xiàn)實(shí)時(shí)語音通話聊天，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)公司、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序定制開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營(yíng)銷、管理等多方位專業(yè)化運(yùn)作于一體。

（1）數(shù)據(jù)傳輸

github demo中考慮到減少對(duì)服務(wù)器的依賴，因此采用了WebRTC P2P傳輸功能，無需任何服務(wù)器支持即可實(shí)現(xiàn)局域網(wǎng)內(nèi)的兩個(gè)設(shè)備之間互相連接，連接代碼也算簡(jiǎn)單。有服務(wù)器支持可能就要逆天了，不過代碼也會(huì)更復(fù)雜。

如果正式使用，可能不太會(huì)考慮使用WebRTC，用WebSocket通過服務(wù)器進(jìn)行轉(zhuǎn)發(fā)可能是最佳的選擇。

WebRTC局域網(wǎng)P2P連接要點(diǎn)（ 實(shí)際代碼 其實(shí)差不多，只不過多做了點(diǎn)兼容）：

/******Peer A(本機(jī))******/
var peerA=new RTCPeerConnection(null,null)

//開啟會(huì)話，等待遠(yuǎn)程連接
peerA.createOffer().then(function(offer){
    peerA.setLocalDescription(offer);
    peerAOffer=offer;
});

var peerAICEList=[......] //通過peerA.onicecandidate監(jiān)聽獲得所有的ICE連接信息候選項(xiàng)，如果有多個(gè)網(wǎng)絡(luò)適配器，就會(huì)有多個(gè)候選

//創(chuàng)建連接通道對(duì)象，A端通過這個(gè)來進(jìn)行數(shù)據(jù)發(fā)送
var peerAChannel=peerA.createDataChannel("RTC Test");



/******Peer B(遠(yuǎn)程)******/
var peerB=new RTCPeerConnection(null,null)

//連接到Peer A
peerB.setRemoteDescription(peerAOffer);

//開啟應(yīng)答會(huì)話，等待Peer A確認(rèn)連接
peerB.createAnswer().then(function(answer){
    peerB.setLocalDescription(answer);
    peerBAnswer=answer;
});

//把Peer A的連接點(diǎn)都添加進(jìn)去
peerB.addIceCandidate(......peerAICEList)

var peerBICEList=[......] //通過peerB.onicecandidate監(jiān)聽獲得所有的ICE連接信息候選項(xiàng)，如果有多個(gè)網(wǎng)絡(luò)適配器，就會(huì)有多個(gè)候選

var peerBChannel=... //通過peerB.ondatachannel得到連接通道對(duì)象，B端通過這個(gè)來進(jìn)行數(shù)據(jù)發(fā)送


/*******最終完成連接********/
//連接到Peer B
peerA.setRemoteDescription(peerBAnswer);

//把Peer B的連接點(diǎn)都添加進(jìn)去
peerA.addIceCandidate(......peerBICEList)

/*
peerA peerB分別等待peerA/BChannel.onopen回調(diào)即完成P2P連接
，然后通過監(jiān)聽peerA/BChannel.onmessage獲得對(duì)方發(fā)送的信息
，通過peerA/BChannel.send(data) 發(fā)送數(shù)據(jù)。
*/

（2）音頻采集和編碼

由于是在我的 Recorder庫 中新加的demo，因此音頻采集和編碼都是現(xiàn)成的，Recorder庫有好的兼容性和穩(wěn)定性，因此節(jié)省了最大頭的工作量。

編碼最佳使用MP3格式，因?yàn)榇烁袷揭褍?yōu)化了實(shí)時(shí)編碼性能，可做到邊錄邊轉(zhuǎn)碼，16kbps 16khz的情況下可做到2kb每秒的文件大小，音質(zhì)還可以，實(shí)時(shí)傳輸時(shí)為3kb每秒，15分鐘大概3M的流量。

用wav格式也可以，不過此格式編碼出來的數(shù)據(jù)量太大，16位 16khz接近50kb每秒的實(shí)時(shí)傳輸數(shù)據(jù)，15分鐘要37M多流量。其他格式由于暫未對(duì)實(shí)時(shí)編碼進(jìn)行優(yōu)化，使用中會(huì)導(dǎo)致明顯卡頓。

降噪、靜音檢測(cè)等高級(jí)功能是沒有的，畢竟是非專業(yè)人員:joy: 要求高點(diǎn)可以，但不要超出范圍太多啦。

（3）音頻實(shí)時(shí)接收和播放

接收到一個(gè)音頻片段后，本應(yīng)該是立即播放的，但由于編碼、網(wǎng)絡(luò)傳輸導(dǎo)致的延遲，可能上個(gè)片段還未播放完（甚至未開始播放），因此需要緩沖處理。

因?yàn)榇嬖诰彌_，就需要進(jìn)行實(shí)時(shí)同步處理，如果緩沖內(nèi)積壓了過多的音頻片段，會(huì)導(dǎo)致語音播放滯后太多，因此需要適當(dāng)進(jìn)行對(duì)數(shù)據(jù)進(jìn)行丟棄，實(shí)測(cè)發(fā)現(xiàn)網(wǎng)絡(luò)正常、設(shè)備性能靠譜的情況下基本沒有丟棄的數(shù)據(jù)。

然后就是播放了，本應(yīng)是播完一個(gè)就播下一個(gè)，測(cè)試發(fā)現(xiàn)這是不靠譜的。因?yàn)榻Y(jié)束一個(gè)片段后再開始播放下一個(gè)發(fā)出聲音，這個(gè)過程會(huì)中斷比較長(zhǎng)時(shí)間，明顯感覺得出來中間存在短暫停頓。因此必須在片段未播完時(shí)準(zhǔn)備好下一個(gè)片段的播放，并且提前開始播放，達(dá)到抹掉中間的停頓。

我寫了兩個(gè)播放方式：

1. 實(shí)時(shí)解碼播放

2. 雙Audio輪換播放

最開始用一個(gè)Audio停頓感太明顯，因此用兩個(gè)Audio輪換抹掉中間的停頓，但發(fā)現(xiàn)不同格式Auido播放差異巨大，播放wav非常流暢，但播放mp3還是存在停頓（后面用解碼的發(fā)現(xiàn)是得到的PCM時(shí)長(zhǎng)變長(zhǎng)了，導(dǎo)致事件觸發(fā)會(huì)出現(xiàn)誤差，為什么會(huì)變長(zhǎng)？怪異）。

因此后面寫了一個(gè)解碼然后再播放，mp3這次終于能正常連續(xù)播放了，wav格式和雙Audio的播放差異不大。實(shí)時(shí)解碼里面也用到了雙Audio中的技巧，其實(shí)也是用到了兩個(gè)BufferSource進(jìn)行類似的輪換操作，以抹掉兩個(gè)片段間的停頓。

不過最終播放效果還是不夠好，音質(zhì)變差了點(diǎn)，并且多了點(diǎn)噪音。如果有現(xiàn)成的播放代碼拿過來用就就好了。

三、應(yīng)用場(chǎng)景

• 數(shù)據(jù)傳輸改成WebSocket，做個(gè)仿微信語音通話H5版還是可以的（受限于Recorder瀏覽器支持）

• 局域網(wǎng)H5版對(duì)講機(jī)（前端玩具）

上述內(nèi)容就是怎么在HTML5中實(shí)現(xiàn)實(shí)時(shí)語音通話聊天，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：怎么在HTML5中實(shí)現(xiàn)實(shí)時(shí)語音通話聊天
URL分享：http://aaarwkj.com/article12/pjccdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、微信小程序、網(wǎng)站策劃、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)