.Net Core WebApi + signalR + vue实现录音功能

实现录音功能需要浏览器的MediaRecorder API，用于捕获音频数据，然后可以通过SignalR将音频数据发送到.NET Core API。

以下是一个基本的步骤说明：

1. 创建.NET Core SignalR Hub

在.NET Core项目中，创建一个新的SignalR Hub：

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

public class AudioHub : Hub
{
    public async Task SendAudio(byte[] audioData)
    {
        // 在这里处理接收到的音频数据
    }
}

在Startup.cs文件中注册此Hub：

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    //...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<AudioHub>("/audiohub");
    });
    //...
}

2. 在Vue.js中实现录音并通过SignalR发送音频数据

首先，安装@microsoft/signalr和recordrtc：

npm install @microsoft/signalr recordrtc

然后，在Vue组件中导入它们，并实现录音和发送音频数据的逻辑：

<template>
  <div>
    <button @click="startRecording">Start Recording</button>
    <button @click="stopRecording">Stop Recording</button>
  </div>
</template>

<script>
import * as signalR from '@microsoft/signalr';
import RecordRTC from 'recordrtc';

export default {
  data() {
    return {
      connection: null,
      recorder: null,
    };
  },
  methods: {
    async startConnection() {
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl('http://localhost:5000/audiohub') // 替换为你的SignalR服务端URL
        .build();

      try {
        await this.connection.start();
        console.log('SignalR Connected.');
      } catch (err) {
        console.log('Error while starting SignalR connection:', err);
      }
    },
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
        this.recorder = RecordRTC(stream, { type: 'audio' });
        this.recorder.startRecording();
      });
    },
    stopRecording() {
      if (this.recorder) {
        this.recorder.stopRecording(() => {
          let blob = this.recorder.getBlob();
          this.sendAudio(blob);
        });
      }
    },
    async sendAudio(audioBlob) {
      if (this.connection) {
        try {
          let reader = new FileReader();
          reader.onloadend = async () => {
            let audioData = new Uint8Array(reader.result);
            await this.connection.invoke('SendAudio', audioData);
          };
          reader.readAsArrayBuffer(audioBlob);
        } catch (err) {
          console.error(err);
        }
      }
    },
  },
  created() {
    this.startConnection();
  },
};
</script>

这个例子中，我们使用了RecordRTC库来简化音频录制的过程。当用户点击“开始录音”按钮时，我们会启动音频录制。当用户点击“停止录音”按钮时，我们会停止录制，并将音频数据发送到服务器。

请注意，你需要将http://localhost:5000/audiohub替换为你自己的SignalR服务器URL。

以上只是一个基本示例，你可能需要根据你的具体需求进行调整。