java版本使用springboot vue websocket webrtc实现视频通话

原理简单表明

​ 浏览器提供获取屏幕、音频等媒体数据的接口，
​ 双方的媒体流数据通过Turn服务器传输
websocket传递信令服务
使用技能

• java jdk17
  
• springboot 3.2.2
  
• websocket
  
• 前端使用 vue
  

搭建websocket环境依赖

1.         <dependencies>
2.         <dependency>
3.             <groupId>org.springframework.boot</groupId>
4.             <artifactId>spring-boot-starter-web</artifactId>
5.         </dependency>
6.         <dependency>
7.             <groupId>org.springframework.boot</groupId>
8.             <artifactId>spring-boot-starter-websocket</artifactId>
9.         </dependency>
11.         <dependency>
12.             <groupId>org.springframework.boot</groupId>
13.             <artifactId>spring-boot-starter-test</artifactId>
14.             <scope>test</scope>
15.         </dependency>
16.     </dependencies>

复制代码

websocket的配置类

1. package com.example.webrtc.config;
3. import com.example.webrtc.Interceptor.AuthHandshakeInterceptor;
4. import com.example.webrtc.Interceptor.MyChannelInterceptor;
5. import org.slf4j.Logger;
6. import org.slf4j.LoggerFactory;
7. import org.springframework.beans.factory.annotation.Autowired;
8. import org.springframework.context.annotation.Bean;
9. import org.springframework.context.annotation.Configuration;
10. import org.springframework.messaging.converter.MessageConverter;
11. import org.springframework.messaging.handler.invocation.HandlerMethodArgumentResolver;
12. import org.springframework.messaging.handler.invocation.HandlerMethodReturnValueHandler;
13. import org.springframework.messaging.simp.config.ChannelRegistration;
14. import org.springframework.messaging.simp.config.MessageBrokerRegistry;
15. import org.springframework.web.socket.config.annotation.*;
16. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
18. import java.util.List;
20. @Configuration
21. @EnableWebSocketMessageBroker
22. public class WebSocketConfig extends WebSocketMessageBrokerConfigurationSupport implements WebSocketMessageBrokerConfigurer {
23.     private static final Logger log = LoggerFactory.getLogger(WebSocketConfig.class);
25.     @Autowired
26.     private AuthHandshakeInterceptor authHandshakeInterceptor;
29.     @Autowired
30.     private MyChannelInterceptor myChannelInterceptor;
32.     @Bean
33.     public ServerEndpointExporter serverEndpointExporter(){
34.         return new ServerEndpointExporter();
35.     }
37.     @Override
38.     public void registerStompEndpoints(StompEndpointRegistry registry) {
39.         registry.addEndpoint("/chat-websocket")
40.                 .setAllowedOriginPatterns("*")
41.                 .addInterceptors(authHandshakeInterceptor)
42.                 .setAllowedOriginPatterns("*")
43.              //   .setHandshakeHandler(myHandshakeHandler)
44.                 .withSockJS();
45.     }
47.     @Override
48.     public void configureWebSocketTransport(WebSocketTransportRegistration registry) {
49.             registry.setMessageSizeLimit(Integer.MAX_VALUE);
50.             registry.setSendBufferSizeLimit(Integer.MAX_VALUE);
51.             super.configureWebSocketTransport(registry);
52.     }
54.     @Override
55.     public void configureMessageBroker(MessageBrokerRegistry registry) {
56.         //客户端需要把消息发送到/message/xxx地址
57.         registry.setApplicationDestinationPrefixes("/webSocket");
58.         //服务端广播消息的路径前缀，客户端需要相应订阅/topic/yyy这个地址的消息
59.         registry.enableSimpleBroker("/topic", "/user");
60.         //给指定用户发送消息的路径前缀，默认值是/user/
61.         registry.setUserDestinationPrefix("/user/");
62.     }
64.     @Override
65.     public void configureClientInboundChannel(ChannelRegistration registration) {
66.         registration.interceptors(myChannelInterceptor);
67.     }
69.     @Override
70.     public void configureClientOutboundChannel(ChannelRegistration registration) {
71.         WebSocketMessageBrokerConfigurer.super.configureClientOutboundChannel(registration);
72.     }
74.     @Override
75.     public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {
76.         WebSocketMessageBrokerConfigurer.super.addArgumentResolvers(argumentResolvers);
77.     }
79.     @Override
80.     public void addReturnValueHandlers(List<HandlerMethodReturnValueHandler> returnValueHandlers) {
81.         WebSocketMessageBrokerConfigurer.super.addReturnValueHandlers(returnValueHandlers);
82.     }
84.     @Override
85.     public boolean configureMessageConverters(List<MessageConverter> messageConverters) {
86.         return WebSocketMessageBrokerConfigurer.super.configureMessageConverters(messageConverters);
87.     }
89. }

复制代码

控制层 WebSocketController

1. package com.example.webrtc.controller;
3. import com.example.webrtc.config.Message;
4. import org.springframework.beans.factory.annotation.Autowired;
5. import org.springframework.messaging.handler.annotation.MessageMapping;
6. import org.springframework.messaging.simp.SimpMessagingTemplate;
7. import org.springframework.web.bind.annotation.RequestMapping;
8. import org.springframework.web.bind.annotation.RestController;
10. import java.security.Principal;
11. import java.util.HashMap;
12. import java.util.Map;
13. import java.util.concurrent.atomic.AtomicInteger;
15. // 私信聊天的控制器
16. @RestController
17. public class WebSocketController {
18.     @Autowired
19.     private SimpMessagingTemplate messagingTemplate;
20.     private AtomicInteger i=new AtomicInteger(1);
21.     @RequestMapping("/user")
22.     public String findUser(){
23.         return "00"+i.decrementAndGet();
24.     }
25.     @MessageMapping("/api/chat")
26.     //在springmvc 中可以直接获得principal,principal 中包含当前用户的信息
27.     public void handleChat(Principal principal, Message messagePara) {
29.         String currentUserName = principal.getName();
30.         System.out.println(currentUserName);
32.         try {
33.             messagePara.setFrom(principal.getName());
34.             System.out.println("from" + messagePara.getFrom());
35.             messagingTemplate.convertAndSendToUser(messagePara.getTo(),
36.                     "/queue/notifications",
37.                     messagePara);
38.         } catch (Exception e) {
39.             // 打印异常
40.             e.printStackTrace();
41.         }
42.     }
43. }

复制代码

前端交互拨号index.vue

1. <template>
2.   <div class="play-audio">
3.     <h2 style="text-align: center;">播放页面</h2>
4.     <div class="main-box">
5.       <video ref="localVideo" class="video" autoplay="autoplay"></video>
6.       <video ref="remoteVideo" class="video" height="500px" autoplay="autoplay"></video>
7.     </div>
8.     <div style="text-align: center;">
9.       <el-button @click="requestConnect()" ref="callBtn">开始对讲</el-button>
10.       <el-button @click="hangupHandle()" ref="hangupBtn">结束对讲</el-button>
11.     </div>
12.     <div style="text-align: center;">
13.       <label for="name">发送人：</label>
14.       <input type="text" id="name" readonly v-model="userId" class="form-control"/>
15.     </div>
16.     <div style="text-align: center;">
17.       <label for="name">接收人：</label>
18.       <input type="text" id="name" v-model="toUserId" class="form-control"/>
19.     </div>
21.   </div>
23. </template>
25. <el-dialog :title="'提示'" :visible.sync="dialogVisible" width="30%">
26. <span>{{ toUserId + '请求连接!' }}</span>
27. <span slot="footer" class="dialog-footer">
28.     <el-button @click="handleClose">取 消</el-button>
29.     <el-button type="primary" @click="dialogVisibleYes">确 定</el-button>
30.   </span>
31. </el-dialog>
33. <script>
34. import request from '@/utils/reeques'
35. import Websocket from '@/utils/websocket'
36. import Stomp from "stompjs";
37. import SockJS from "sockjs-client";
38. import adapter from "webrtc-adapter";
39. import axios from 'axios'
41. export default {
42.   data() {
43.     return {
44.       stompClient: null,
45.       userId: '001',
46.       socket: null,
47.       toUserId: '',
48.       localStream: null,
49.       remoteStream: null,
50.       localVideo: null,
51.       remoteVideo: null,
52.       callBtn: null,
53.       hangupBtn: null,
54.       peerConnection: null,
55.       dialogVisible: false,
56.       msg: '',
57.       config: {
58.         iceServers: [
59.           {urls: 'stun:global.stun.twilio.com:3478?transport=udp'}
60.         ],
61.       }
63.     };
64.   },
65.   computed: {},
66.   methods: {
67.     handleClose() {
68.       this.dialogVisible = false
69.     },
70.     dialogVisibleYes() {
71.       var _self = this;
72.       this.dialogVisible = false
73.       _self.startHandle().then(() => {
74.         _self.stompClient.send("/api/chat", _self.toUserId, {'type': 'start'})
75.       })
76.     },
77.     requestConnect() {
78.       let that = this;
80.       if (!that.toUserId) {
81.         alert('请输入对方id')
82.         return false
83.       } else if (!that.stompClient) {
84.         alert('请先打开websocket')
85.         return false
86.       } else if (that.toUserId == that.userId) {
87.         alert('自己不能和自己连接')
88.         return false
89.       }
90.       //准备连接
91.       that.startHandle().then(() => {
92.         that.stompClient.send("/api/chat", that.toUserId, {'type': 'connect'})
93.       })
94.     },
96.     startWebsocket(user) {
97.       let that = this;
98.       that.stompClient = new Websocket(user);
99.       that.stompClient.connect(() => {
100.         that.stompClient.subscribe("/user/" + that.userId + "/queue/notifications", function (result) {
101.           that.onmessage(result)
102.         })
103.       })
104.     }
105.     ,
106.     gotLocalMediaStream(mediaStream) {
107.       var _self = this;
108.       _self.localVideo.srcObject = mediaStream;
109.       _self.localStream = mediaStream;
110.       // _self.callBtn.disabled = false;
111.     }
112.     ,
113.     createConnection() {
114.       var _self = this;
115.       _self.peerConnection = new RTCPeerConnection()
117.       if (_self.localStream) {
118.         // 视频轨道
119.         const videoTracks = _self.localStream.getVideoTracks();
120.         // 音频轨道
121.         const audioTracks = _self.localStream.getAudioTracks();
122.         // 判断视频轨道是否有值
123.         if (videoTracks.length > 0) {
124.           console.log(`使用的设备为: ${videoTracks[0].label}.`);
125.         }
126.         // 判断音频轨道是否有值
127.         if (audioTracks.length > 0) {
128.           console.log(`使用的设备为: ${audioTracks[0].label}.`);
129.         }
131.         _self.localStream.getTracks().forEach((track) => {
132.           _self.peerConnection.addTrack(track, _self.localStream)
133.         })
134.       }
136.       // 监听返回的 Candidate
137.       _self.peerConnection.addEventListener('icecandidate', _self.handleConnection);
138.       // 监听 ICE 状态变化
139.       _self.peerConnection.addEventListener('iceconnectionstatechange', _self.handleConnectionChange)
140.       //拿到流的时候调用
141.       _self.peerConnection.addEventListener('track', _self.gotRemoteMediaStream);
142.     }
143.     ,
144.     startConnection() {
145.       var _self = this;
146.       // _self.callBtn.disabled  = true;
147.       // _self.hangupBtn.disabled = false;
148.       // 发送offer
149.       _self.peerConnection.createOffer().then(description => {
150.         console.log(`本地创建offer返回的sdp:\n${description.sdp}`)
152.         // 将 offer 保存到本地
153.         _self.peerConnection.setLocalDescription(description).then(() => {
154.           console.log('local 设置本地描述信息成功');
155.           // 本地设置描述并将它发送给远端
156.           // _self.socket.send(JSON.stringify({
157.           //   'userId': _self.userId,
158.           //   'toUserId': _self.toUserId,
159.           //   'message': description
160.           // }));
161.           _self.stompClient.send("/api/chat", _self.toUserId, description)
163.         }).catch((err) => {
164.           console.log('local 设置本地描述信息错误', err)
165.         });
166.       })
167.         .catch((err) => {
168.           console.log('createdOffer 错误', err);
169.         });
170.     }
171.     ,
172.     async startHandle() {
173.       this.callBtn = this.$refs.callBtn
174.       this.hangupBtn = this.$refs.hangupBtn
175.       this.remoteVideo = this.$refs.remoteVideo
176.       this.localVideo = this.$refs.localVideo
177.       var _self = this;
178.       // 1.获取本地音视频流
179.       // 调用 getUserMedia API 获取音视频流
180.       let constraints = {
181.         video: true,
182.         audio: {
183.           // 设置回音消除
184.           noiseSuppression: true,
185.           // 设置降噪
186.           echoCancellation: true,
187.         }
188.       }
189.       navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
190.       await navigator.mediaDevices.getUserMedia(constraints)
191.         .then(_self.gotLocalMediaStream)
192.         .catch((err) => {
193.           console.log('getUserMedia 错误', err);
194.           //创建点对点连接对象
195.         });
197.       _self.createConnection();
198.     },
199.     onmessage(e) {
200.       var _self = this;
201.       const description = e.message
202.       _self.toUserId = e.from
203.       switch (description.type) {
204.         case 'connect':
205.           _self.dialogVisible = true
206.           this.$confirm(_self.toUserId + '请求连接!', '提示', {}).then(() => {
207.             _self.startHandle().then(() => {
208.               _self.stompClient.send("/api/chat", _self.toUserId, {'type': 'start'})
209.             })
210.           }).catch(() => {
211.           });
212.           break;
213.         case 'start':
214.           //同意连接之后开始连接
215.           _self.startConnection()
216.           break;
217.         case 'offer':
218.           _self.peerConnection.setRemoteDescription(new RTCSessionDescription(description)).then(() => {
220.           }).catch((err) => {
221.             console.log('local 设置远端描述信息错误', err);
222.           });
224.           _self.peerConnection.createAnswer().then(function (answer) {
226.             _self.peerConnection.setLocalDescription(answer).then(() => {
227.               console.log('设置本地answer成功!');
228.             }).catch((err) => {
229.               console.error('设置本地answer失败', err);
230.             });
231.             _self.stompClient.send("/api/chat", _self.toUserId, answer)
232.           }).catch(e => {
233.             console.error(e)
234.           });
235.           break;
236.         case 'icecandidate':
237.           // 创建 RTCIceCandidate 对象
238.           let newIceCandidate = new RTCIceCandidate(description.icecandidate);
239.           // 将本地获得的 Candidate 添加到远端的 RTCPeerConnection 对象中
240.           _self.peerConnection.addIceCandidate(newIceCandidate).then(() => {
241.             console.log(`addIceCandidate 成功`);
242.           }).catch((error) => {
243.             console.log(`addIceCandidate 错误:\n` + `${error.toString()}.`);
244.           });
245.           break;
246.         case 'answer':
247.           _self.peerConnection.setRemoteDescription(new RTCSessionDescription(description)).then(() => {
248.             console.log('设置remote answer成功!');
249.           }).catch((err) => {
250.             console.log('设置remote answer错误', err);
251.           });
252.           break;
253.         default:
254.           break;
255.       }
256.     },
257.     hangupHandle() {
258.       var _self = this;
259.       // 关闭连接并设置为空
260.       _self.peerConnection.close();
261.       _self.peerConnection = null;
263.       // _self.hangupBtn.disabled = true;
264.       // _self.callBtn.disabled = false;
266.       _self.localStream.getTracks().forEach((track) => {
267.         track.stop()
268.       })
269.     },
270.     handleConnection(event) {
271.       var _self = this;
272.       // 获取到触发 icecandidate 事件的 RTCPeerConnection 对象
273.       // 获取到具体的Candidate
274.       console.log("handleConnection")
275.       const peerConnection = event.target;
276.       const icecandidate = event.candidate;
278.       if (icecandidate) {
279.         _self.stompClient.send("/api/chat", _self.toUserId, {
280.           type: 'icecandidate',
281.           icecandidate: icecandidate
282.         })
283.       }
284.     },
285.     gotRemoteMediaStream(event) {
286.       var _self = this;
287.       console.log('remote 开始接受远端流')
289.       if (event.streams[0]) {
290.         console.log(' remoteVideo')
291.         _self.remoteVideo.srcObject = event.streams[0];
292.         _self.remoteStream = event.streams[0];
293.       }
294.     },
295.     handleConnectionChange(event) {
296.       const peerConnection = event.target;
297.       console.log('ICE state change event: ', event);
298.       console.log(`ICE state: ` + `${peerConnection.iceConnectionState}.`);
299.     },
300.     log(v) {
301.       console.log(v)
302.     },
303.   },
304.   created() {
305.     let that = this;
306.     request({
307.       url: '/user',
308.       method: 'get',
309.       params: {}
310.     }).then(response => {
311.       console.log(response.data)
312.       that.userId = response.data;
313.       this.startWebsocket(response.data)
314.       debugger
315.     })
316.     debugger
318.   }
319. }
321. </script>
322. <style lang="scss">
323. .spreadsheet {
324.   padding: 0 10px;
325.   margin: 20px 0;
326. }
328. .main-box {
329.   display: flex;
330.   flex-direction: row;
331.   align-items: center;
332.   justify-content: center;
333. }
334. </style>

复制代码

最终演示效果

具体代码查看

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