基于webrtc的点对点音视频聊天室开发｜spring+vue.js

WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准

WebRTC能够实现点对点的视频传输，能够有效运用与视频通讯站的搭建。

演示

WebRTC的基本原理

WebRTC视频通讯的关键在于通讯设备信令的实时分享，假定有A,B两台设备，则一次成功的通讯流程图如下图所示。

技术栈

服务端：使用java spring boot实现websocket信令服务器
前端：vue.js

代码实现 （完整代码已上传至公众号【HackDev】，后台回复「通话」即可获取。）

信令服务器搭建

前面提到，信令的实时分享是实现通话的重点，为此我使用了Java spring boot搭建基于WebSocket的信令服务器。当然大家也可以使用更加轻量便捷的node.js来搭建，会方便很多。

@Configuration
@EnableWebSocketMessageBroker
//通过EnableWebSocketMessageBroker 开启使用STOMP协议来传输基于代理(message broker)的消息,此时浏览器支持使用@MessageMapping 就像支持@RequestMapping一样。
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{
   
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
    //endPoint 注册协议节点,并映射指定的URl

        //注册一个名字为"endpointChat" 的endpoint,并指定 SockJS协议。   点对点-用
        registry.addEndpoint("/endpointChat").setAllowedOrigins("*").withSockJS();

    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
   //配置消息代理(message broker)
        //点对点式增加一个/queue 消息代理
        registry.enableSimpleBroker("/queue","/topic");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 私信聊天的控制器
@RestController
public class WebSocketController {
   
    &#
1
2
3
4