故事

國外客戶講英語非常快，teams或者zoom會議的時候，好多都聽不懂，當(dāng)然主要原因是因為自己英語水平菜。

創(chuàng)新互聯(lián)公司是專業(yè)的?？稻W(wǎng)站建設(shè)公司，保康接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行?？稻W(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

Teams和zoom現(xiàn)在會議的時候也有實時字幕選項了，理論上本文終結(jié):)

那么，有沒有一種實時字幕的軟件呢？有，百度，科大訊飛都有此類產(chǎn)品。各種云服務(wù)也有此類API，自己也可以寫一個簡單的軟件使用。
但是，以上都是付費(fèi)的。
白嫖可以嗎？

Chrome live caption

Chrome其實有自帶的實時字幕功能，實時性很強(qiáng)，識別率也很高

但是這個實時字幕不是一個單獨(dú)的軟件，也沒有提供API，完全就是看心情（檢測到語音）自己出來。

那么，我有一個大膽的想法，我們可以實時捕獲系統(tǒng)輸出的音頻，用網(wǎng)頁audio播放，播放的時候不就自動字幕出來了嗎？

一番搜索，瀏覽器還真有對應(yīng)的接口navigator.mediaDevices.getUserMedia

navigator.mediaDevices.getUserMedia

//navigator.mediaDevices.getSupportedConstraints();
//navigator.mediaDevices.enumerateDevices()
async function startCapture(displayMediaOptions) {
        try {
            document.getElementById("audio").srcObject = await navigator.mediaDevices.getUserMedia({
                audio: true
            });
        } catch (err) {
            console.error("Error: " + err);
        }
}
startCapture();

ref:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

跑起來，腦瓜子嗡嗡的，因為錄的是系統(tǒng)輸出的音頻，而這個輸出包含目標(biāo)輸出和你網(wǎng)頁本身播放的聲音，然后就無限循環(huán)了。
除了音質(zhì)一言難盡之外，實時字幕并沒有出來。

1.通過麥克風(fēng)輸入英文speech，使用該代碼，沒有回聲且能正常播放的情況下，實時字幕依然不會彈出。
2.而在網(wǎng)頁中指定audio的source，比如abc.mp3，即使把a(bǔ)udio mute后，字幕依然會出現(xiàn)。
所以，Chrome自帶的Live Caption出現(xiàn)，并不是“聽”到了聲音，而是大約通過Chrome檢測到了"audio resource", audio stream好像并不可以，所以也注定我下面的嘗試會失敗。

語音聊天是怎么做的？

這是個思路，做個本機(jī)的語音聊天，只不過是應(yīng)用程序互相聊天而已，且是一個（Teams）說一個（Chrome）聽而已。
通信雙方使用WebSocket通信，服務(wù)端還是捕獲系統(tǒng)音頻流，實時傳回到客戶端（網(wǎng)頁）然后播放。

這里使用了兩個好用且強(qiáng)大的開源產(chǎn)品
websocket-sharp: https://github.com/sta/websocket-sharp
NAudio: https://github.com/naudio/NAudio

放上半成品代碼：https://github.com/Luzemin/WebPagePlaySystemAudioStream

效果和剛才一樣，錄音回聲問題，以及實時字幕未出來。
非要說有辦法，那就是使用虛擬聲卡軟件

ref: https://stackoverflow.com/questions/31623824/how-to-capture-audio-from-specific-application-and-route-to-specific-audio-devic

我沒有嘗試。換個關(guān)鍵詞看看了，無意看到webkitSpeechRecognition

webkitSpeechRecognition語音識別API使用

var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;

recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }

ref:https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

webkitSpeechRecognition實現(xiàn)

Chrome25+就有了該接口：
https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API

官方在線demo:
https://www.google.com/intl/en/chrome/demos/speech.html

CodePen demo:
https://codepen.io/davatron5000/pen/IKAxb

github某個實現(xiàn)版：
https://github.com/MidCamp/live-captioning

現(xiàn)成免費(fèi)產(chǎn)品版：
https://webcaptioner.com/

網(wǎng)站標(biāo)題：網(wǎng)頁實時字幕（LiveCaption）調(diào)研-創(chuàng)新互聯(lián)
分享地址：http://weahome.cn/article/hhdss.html