web网页端利用webSocket实现语音通话功能(SpringBoot+VUE)

写在前面

迩来在写一个web项目，必要实现web客户端之间的语音通话，期望能够借助webSocket全双工通讯的方式来实现，但是网上没有发现可以正确利用的代码。网上能找到的一个代码利用之后只能听到“嘀嘀嘀”的杂音
办理方案：利用Json来通报数据代替原有的二进制输入输出流
技能栈：VUE3、SpingBoot、WebSocket
Java后端代码

pom.xml
配置Maven所需的jar包

1. <dependency>
2.     <groupId>org.springframework.boot</groupId>
3.     <artifactId>spring-boot-starter-websocket</artifactId>
4. </dependency>

复制代码

WebSocketConfig.java
webSocket配置类

1. package com.shu.config;
2. import org.springframework.context.annotation.Bean;
3. import org.springframework.context.annotation.Configuration;
4. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
6. @Configuration
7. public class WebSocketConfig {
8.     /**
9.      *         注入ServerEndpointExporter，
10.      *         这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
11.      */
12.     @Bean
13.     public ServerEndpointExporter serverEndpointExporter() {
14.         return new ServerEndpointExporter();
15.     }
16.    
17. }

复制代码

WebSocketAudioServer.java
webSocket实现类，其中roomId是语音谈天室的id，userId是发送语音的用户id
以是前端哀求加入webSocket时间的哀求样例应该是：ws://localhost:8080/audio/1/123这个哀求中1是roomId，123是userId，这里建议利用ws，一般来说ws对于http，wss对应https

1. package com.shu.socket;
3. import lombok.extern.slf4j.Slf4j;
4. import org.springframework.stereotype.Component;
6. import jakarta.websocket.OnClose;
7. import jakarta.websocket.OnError;
8. import jakarta.websocket.OnMessage;
9. import jakarta.websocket.OnOpen;
10. import jakarta.websocket.Session;
11. import jakarta.websocket.server.PathParam;
12. import jakarta.websocket.server.ServerEndpoint;
14. import java.io.BufferedInputStream;
15. import java.io.IOException;
16. import java.io.InputStream;
17. import java.nio.ByteBuffer;
18. import java.util.ArrayList;
19. import java.util.HashMap;
20. import java.util.List;
21. import java.util.Map;
22. import java.util.concurrent.ConcurrentHashMap;
23. import java.util.concurrent.CopyOnWriteArraySet;
25. /**
26. * @Author:Long
27. **/
28. @Component
29. @Slf4j
30. @ServerEndpoint(value = "/audio/{roomId}/{userId}")
31. public class WebSocketAudioServer {
33.         private static ConcurrentHashMap<String, Session> sessionPool = new ConcurrentHashMap<String, Session>();
34.         private static CopyOnWriteArraySet<WebSocketAudioServer> webSocketSet = new CopyOnWriteArraySet<>();
35.         private Session webSocketsession;
36.         private String roomId;
37.         private String userId;
39.         @OnOpen
40.         public void onOpen(@PathParam(value = "roomId") String roomId, @PathParam(value = "userId") String userId,
41.                         Session webSocketsession) {
42.                 // 接收到发送消息的人员编号
43.                 this.roomId = roomId;
44.                 this.userId = userId;
45.                 // 加入map中，绑定当前用户和socket
46.                 sessionPool.put(userId, webSocketsession);
47.                 webSocketSet.add(this);
48.                 this.webSocketsession = webSocketsession;
49.                 // 在线数加1
50.                 addOnlineCount();
51.                 System.out.println("user编号:" + userId + "：加入Room:" + roomId + "语音聊天  " + "总数为:" + webSocketSet.size());
52.         }
54.         @OnClose
55.         public void onClose() {
56.                 try {
57.                         sessionPool.remove(this.userId);
58.                 } catch (Exception e) {
59.                 }
60.         }
62.        
63.         @OnMessage(maxMessageSize = 5242880)
64.         public void onMessage(@PathParam(value = "roomId") String roomId, @PathParam(value = "userId") String userId,
65.                         String inputStream) {
66.                 try {
68.                         for (WebSocketAudioServer webSocket : webSocketSet) {
69.                                 try {
70.                                         if (webSocket.webSocketsession.isOpen() && webSocket.roomId.equals(roomId)
71.                                                         && !webSocket.userId.equals(userId)) {
72.                                                 webSocket.webSocketsession.getBasicRemote().sendText(inputStream);
73.                                         }
74.                                 } catch (Exception e) {
75.                                         e.printStackTrace();
76.                                 }
77.                         }
78.                 } catch (Exception e) {
79.                         e.printStackTrace();
80.                 }
81.         }
84.         @OnError
85.         public void onError(Session session, Throwable error) {
86.                 error.printStackTrace();
87.         }
89.         /**
90.          * 为指定用户发送消息
91.          *
92.          */
93.         public void sendMessage(String message) throws IOException {
94.                 // 加同步锁，解决多线程下发送消息异常关闭
95.                 synchronized (this.webSocketsession) {
96.                         this.webSocketsession.getBasicRemote().sendText(message);
97.                 }
98.         }
100.         public List<String> getOnlineUser(String roomId) {
101.                 List<String> userList = new ArrayList<String>();
102.                 for (WebSocketAudioServer webSocketAudioServer : webSocketSet) {
103.                         try {
104.                                 if (webSocketAudioServer.webSocketsession.isOpen() && webSocketAudioServer.roomId.equals(roomId)) {
105.                                         if (!userList.contains(webSocketAudioServer.userId)) {
106.                                                 userList.add(webSocketAudioServer.userId);
107.                                         }
108.                                 }
109.                         } catch (Exception e) {
110.                                 e.printStackTrace();
111.                         }
112.                 }
113.                 return userList;
114.         }
115. }

复制代码

VUE前端代码

audioChat.vue
这段代码是博主从自己的vue代码中截取出来的（原本的代码太多了），可能有些部分代码有函数没写上（如果有错的话贫苦大家在评论区指出，博主会及时修改）
注意事项
之前有博客利用二进制数据输入输出流来向后端传输数据，但是功能无法实现，厥后发现那位博主的数据并没有发成功，我直接在Java中利用Json来传输float数组数据，实现了语音通话功能。

1. <template>
2.   <div class="play-audio">
3.     <button @click="startCall" ref="start">开始对讲</el-button>
4.     <button @click="stopCall" ref="stop">结束对讲</el-button>
5.   </div>
6. </template>
8. <script setup>
9. // 语音聊天的变量
10. const audioSocket = ref(null);
11. let mediaStack;
12. let audioCtx;
13. let scriptNode;
14. let source;
15. let play;
16. // 语音socket
17. const connectAudioWebSocket = () => {
18.   let url = "ws://localhost:8080/audio/1/123"; //roomId:1 ,userId123
19.   audioSocket.value = new WebSocket(url); // 替换为实际的 WebSocket 地址
21.   audioSocket.value.onopen = () => {
22.     console.log("audioSocket connected");
23.   };
25.   audioSocket.value.onmessage = (event) => {
26.     // 将接收的数据转换成与传输过来的数据相同的Float32Array
27.     const jsonAudio = JSON.parse(event.data);
29.     // let buffer = new Float32Array(event.data);
30.     let buffer = new Float32Array(4096);
31.     for (let i = 0; i < 4096; i++) {
32.       // buffer.push(parseFloat(jsonAudio[i]));
33.       buffer[i] = parseFloat(jsonAudio[i]);
34.     }
36.     // 创建一个空白的AudioBuffer对象，这里的4096跟发送方保持一致，48000是采样率
37.     const myArrayBuffer = audioCtx.createBuffer(1, 4096, 16000);
38.     // 也是由于只创建了一个音轨，可以直接取到0
39.     const nowBuffering = myArrayBuffer.getChannelData(0);
40.     // 通过循环，将接收过来的数据赋值给简单音频对象
41.     for (let i = 0; i < 4096; i++) {
42.       nowBuffering[i] = buffer[i];
43.     }
44.     // 使用AudioBufferSourceNode播放音频
45.     const source = audioCtx.createBufferSource();
46.     source.buffer = myArrayBuffer;
47.     const gainNode = audioCtx.createGain();
48.     source.connect(gainNode);
49.     gainNode.connect(audioCtx.destination);
50.     var muteValue = 1;
51.     if (!play) {
52.       // 是否静音
53.       muteValue = 0;
54.     }
55.     gainNode.gain.setValueAtTime(muteValue, audioCtx.currentTime);
56.     source.start();
57.   };
59.   audioSocket.value.onclose = () => {
60.     console.log("audioSocket closed");
61.   };
63.   audioSocket.value.onerror = (error) => {
64.     console.error("audioSocket error:", error);
65.   };
66. };
67. // 开始对讲
68. function startCall() {
69.     isInChannel.value = true;
70.     play = true;
71.     audioCtx = new AudioContext();
72.     connectAudioWebSocket();
74.     // 该变量存储当前MediaStreamAudioSourceNode的引用
75.     // 可以通过它关闭麦克风停止音频传输
77.     // 创建一个ScriptProcessorNode 用于接收当前麦克风的音频
78.     scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);
79.     navigator.mediaDevices
80.       .getUserMedia({ audio: true, video: false })
81.       .then((stream) => {
82.         mediaStack = stream;
83.         source = audioCtx.createMediaStreamSource(stream);
85.         source.connect(scriptNode);
86.         scriptNode.connect(audioCtx.destination);
87.       })
88.       .catch(function (err) {
89.         /* 处理error */
90.         isInChannel.value = false;
91.         console.log("err", err);
92.       });
93.     // 当麦克风有声音输入时，会调用此事件
94.     // 实际上麦克风始终处于打开状态时，即使不说话，此事件也在一直调用
95.     scriptNode.onaudioprocess = (audioProcessingEvent) => {
96.       const inputBuffer = audioProcessingEvent.inputBuffer;
97.       // console.log("inputBuffer",inputBuffer);
98.       // 由于只创建了一个音轨，这里只取第一个频道的数据
99.       const inputData = inputBuffer.getChannelData(0);
100.       // 通过socket传输数据，实际上传输的是Float32Array
101.       if (audioSocket.value.readyState === 1) {
102.         // console.log("发送的数据",inputData);
103.         // audioSocket.value.send(inputData);
104.         let jsonData = JSON.stringify(inputData);
105.         audioSocket.value.send(jsonData);
107.         // stopCall();
108.       }
109.     };
110. }
111. // 关闭麦克风
112. function stopCall() {
113.   isInChannel.value = false;
114.   play = false;
115.   mediaStack.getTracks()[0].stop();
116.   scriptNode.disconnect();
117.   if (audioSocket.value) {
118.     audioSocket.value.close();
119.     audioSocket.value = null;
120.   }
121. }
122. </script>

复制代码

关于Chrome或Edge浏览器报错

关于谷歌浏览器提示TypeError: Cannot read property ‘getUserMedia’ of undefined
办理方案：
1.网页利用https访问，服务端升级为https访问，配置ssl证书
2.利用localhost或127.0.0.1 进行访问
3.修改浏览器安全配置
在chrome浏览器中输入如下指令

1. chrome://flags/#unsafely-treat-insecure-origin-as-secure

复制代码

开启 Insecure origins treated as secure
在下方输入栏内输入你访问的地点url，然后将右侧Disabled 改成 Enabled即可

浏览器会提示重启， 点击Relaunch即可

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。