webRTC实现跨端语音助手功能组件（实时播放后端返回音频文件）

需求

在浏览器端实现类似天猫精灵的功能，可以呼起助手，也可以静默开启实时对话。跨端，可自定义规则。本文记录下大概思路。

流程

• 浏览器使用webRTC api获取用户音频

  1. 需要https

     由于浏览器安全限制，正式环境需要https协议，相应的，和后端通信的websocket也需要wss协议

  2. 使用getUserMedia API

  navigator.getUserMedia, 回调里面会返回一个音频流。由于里面是一个arrayBuffer,需要将其转化为base64 用于websocket传给后端。
  这里有点复杂，注意音频采样率与后端对应，safari浏览器推荐24000，其他推荐16000

   ```javascript
   		// 将stream转化为audioSource
   			this.originSource = this.context.createMediaStreamSource(captureStream);
   	        this.gainNode = this.context.createGain();
   	        this.source = this.gainNode; // 对外结点
   	        this.scriptProcessor = this.context.createScriptProcessor(4096, 1, 1);
   	        // 处理函数 (chunk) => {}
   	        this.scriptProcessor.onaudioprocess = this.processHandler;