网页实时字幕（LiveCaption）调研-创新互联

故事

国外客户讲英语非常快，teams或者zoom会议的时候，好多都听不懂，当然主要原因是因为自己英语水平菜。

Teams和zoom现在会议的时候也有实时字幕选项了，理论上本文终结:)

那么，有没有一种实时字幕的软件呢？有，百度，科大讯飞都有此类产品。各种云服务也有此类API，自己也可以写一个简单的软件使用。
但是，以上都是付费的。
白嫖可以吗？

Chrome live caption

Chrome其实有自带的实时字幕功能，实时性很强，识别率也很高

但是这个实时字幕不是一个单独的软件，也没有提供API，完全就是看心情（检测到语音）自己出来。

那么，我有一个大胆的想法，我们可以实时捕获系统输出的音频，用网页audio播放，播放的时候不就自动字幕出来了吗？

一番搜索，浏览器还真有对应的接口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

跑起来，脑瓜子嗡嗡的，因为录的是系统输出的音频，而这个输出包含目标输出和你网页本身播放的声音，然后就无限循环了。
除了音质一言难尽之外，实时字幕并没有出来。

1.通过麦克风输入英文speech，使用该代码，没有回声且能正常播放的情况下，实时字幕依然不会弹出。
2.而在网页中指定audio的source，比如abc.mp3，即使把audio mute后，字幕依然会出现。
所以，Chrome自带的Live Caption出现，并不是“听”到了声音，而是大约通过Chrome检测到了"audio resource", audio stream好像并不可以，所以也注定我下面的尝试会失败。

语音聊天是怎么做的？

这是个思路，做个本机的语音聊天，只不过是应用程序互相聊天而已，且是一个（Teams）说一个（Chrome）听而已。
通信双方使用WebSocket通信，服务端还是捕获系统音频流，实时传回到客户端（网页）然后播放。

这里使用了两个好用且强大的开源产品
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

我没有尝试。换个关键词看看了，无意看到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实现

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某个实现版：
https://github.com/MidCamp/live-captioning

现成免费产品版：
https://webcaptioner.com/