网页实时字幕（Live Caption）调研
故事
国外客户讲英语非常快，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
效果和刚才一样，录音回声问题，以及实时字幕未出来。
非要说有办法，那就是使用虚拟声卡软件
我没有尝试。换个关键词看看了，无意看到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/
