vue中js-audio-recorder,使用websocket进行音频流传输

从获取浏览器录音开始，就是通过websocket实时发送音频流给后端。在这里插入代码片

 handleStart() {
      const uuid = require("uuid");
      this.sessionId = uuid.v4();
      console.log(this.sessionId);

      this.recorder = new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
        // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
      });
      this.recorder.onprocess = (params) => {
        console.log(params)
     
      const formData = new FormData();
      const blob = this.recorder.getWAVBlob(); // 获取wav格式音频数据
      console.log(blob);
      // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，可直接传把blob作为file塞入formData
      const newbolb = new Blob([blob], { type: "audio/wav" });
      const fileOfBlob = new File([newbolb], new Date().getTime() + ".wav");
      console.log(fileOfBlob);
      formData.append("file", blob);
      console.log(formData);
        this.websocketSend(formData)
      
      }
      console.log(this.recorder)
      Recorder.getPermission().then(
        () => {
          console.log("开始录音");

          this.recorder.start(); // 开始录音
           const formData = new FormData();
          const blob = this.recorder.getWAVBlob(); // 获取wav格式音频数据
          console.log(blob);
      
     
        },
        (error) => {
          this.$message({
            message: "请先允许该网页使用麦克风",
            type: "info",
          });
          console.log(`${error.name} : ${error.message}`);
        }
      );
    },
initWebSocket(){ //初始化weosocket
        const wsuri = this.config.ws_server;
        //连接服务端
        this.websock = new WebSocket(wsuri);
        //指定事件回调
        this.websock.onmessage = this.websocketOnMessage;
        this.websock.onopen = this.websocketOnOpen;
        this.websock.onerror = this.websocketOnError;
        this.websock.onclose = this.websocketClose;
        },
 
        websocketOnOpen(){ //连接建立之后执行send方法发送数据
            let actions = {'type': 100, 'msg': 'requestPermission'}
            this.websocketSend(JSON.stringify(actions));
            //连接后,定时发送,否则不段时间不通信会自动断连(时间长短一般是服务端指定的)
            var that = this;
            setInterval(function () {
                that.websocketSend(JSON.stringify({'type': 0, 'msg': 'ping'}));
            }, 15000);
        },
 
        websocketOnError(){//连接建立失败重连
            this.initWebSocket();
        },
 
        websocketOnMessage(e){ //数据接收
            const redata = JSON.parse(e.data);
            // eslint-disable-next-line
            console.log(redata);
            // eslint-disable-next-line
        },
 
        websocketSend(Data){//数据发送
                this.websock.send(Data);
        },
 
        // eslint-disable-next-line
        websocketClose(e){  //关闭
            // eslint-disable-next-line
            console.log('断开连接',e);
        },

点击开始录音把formData传到后端，初始化websocket，链接服务器，指定事件回调，调用websocketSend发送数据的方法。