java版本使用springboot vue websocket webrtc实现视频通话
作者:mmseoamin日期:2024-04-27

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

  • 原理简单解释
  • 使用技术
  • 搭建websocket环境依赖
  • 最终演示效果

    原理简单解释

    ​ 浏览器提供获取屏幕、音频等媒体数据的接口,

    ​ 双方的媒体流数据通过Turn服务器传输

    websocket传递信令服务

    使用技术

    1. java jdk17
    2. springboot 3.2.2
    3. websocket
    4. 前端使用 vue

    搭建websocket环境依赖

    	
            
                org.springframework.boot
                spring-boot-starter-web
            
            
                org.springframework.boot
                spring-boot-starter-websocket
            
            
                org.springframework.boot
                spring-boot-starter-test
                test
            
        
    

    websocket的配置类

    package com.example.webrtc.config;
    import com.example.webrtc.Interceptor.AuthHandshakeInterceptor;
    import com.example.webrtc.Interceptor.MyChannelInterceptor;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.messaging.converter.MessageConverter;
    import org.springframework.messaging.handler.invocation.HandlerMethodArgumentResolver;
    import org.springframework.messaging.handler.invocation.HandlerMethodReturnValueHandler;
    import org.springframework.messaging.simp.config.ChannelRegistration;
    import org.springframework.messaging.simp.config.MessageBrokerRegistry;
    import org.springframework.web.socket.config.annotation.*;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    import java.util.List;
    @Configuration
    @EnableWebSocketMessageBroker
    public class WebSocketConfig extends WebSocketMessageBrokerConfigurationSupport implements WebSocketMessageBrokerConfigurer {
        private static final Logger log = LoggerFactory.getLogger(WebSocketConfig.class);
        @Autowired
        private AuthHandshakeInterceptor authHandshakeInterceptor;
        @Autowired
        private MyChannelInterceptor myChannelInterceptor;
        @Bean
        public ServerEndpointExporter serverEndpointExporter(){
            return new ServerEndpointExporter();
        }
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) {
            registry.addEndpoint("/chat-websocket")
                    .setAllowedOriginPatterns("*")
                    .addInterceptors(authHandshakeInterceptor)
                    .setAllowedOriginPatterns("*")
                 //   .setHandshakeHandler(myHandshakeHandler)
                    .withSockJS();
        }
        @Override
        public void configureWebSocketTransport(WebSocketTransportRegistration registry) {
                registry.setMessageSizeLimit(Integer.MAX_VALUE);
                registry.setSendBufferSizeLimit(Integer.MAX_VALUE);
                super.configureWebSocketTransport(registry);
        }
        @Override
        public void configureMessageBroker(MessageBrokerRegistry registry) {
            //客户端需要把消息发送到/message/xxx地址
            registry.setApplicationDestinationPrefixes("/webSocket");
            //服务端广播消息的路径前缀,客户端需要相应订阅/topic/yyy这个地址的消息
            registry.enableSimpleBroker("/topic", "/user");
            //给指定用户发送消息的路径前缀,默认值是/user/
            registry.setUserDestinationPrefix("/user/");
        }
     
        @Override
        public void configureClientInboundChannel(ChannelRegistration registration) {
            registration.interceptors(myChannelInterceptor);
        }
        @Override
        public void configureClientOutboundChannel(ChannelRegistration registration) {
            WebSocketMessageBrokerConfigurer.super.configureClientOutboundChannel(registration);
        }
        @Override
        public void addArgumentResolvers(List argumentResolvers) {
            WebSocketMessageBrokerConfigurer.super.addArgumentResolvers(argumentResolvers);
        }
        @Override
        public void addReturnValueHandlers(List returnValueHandlers) {
            WebSocketMessageBrokerConfigurer.super.addReturnValueHandlers(returnValueHandlers);
        }
        @Override
        public boolean configureMessageConverters(List messageConverters) {
            return WebSocketMessageBrokerConfigurer.super.configureMessageConverters(messageConverters);
        }
    }
    

    控制层 WebSocketController

    package com.example.webrtc.controller;
    import com.example.webrtc.config.Message;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.messaging.handler.annotation.MessageMapping;
    import org.springframework.messaging.simp.SimpMessagingTemplate;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import java.security.Principal;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.concurrent.atomic.AtomicInteger;
    // 私信聊天的控制器
    @RestController
    public class WebSocketController {
        @Autowired
        private SimpMessagingTemplate messagingTemplate;
        private AtomicInteger i=new AtomicInteger(1);
        @RequestMapping("/user")
        public String findUser(){
            return "00"+i.decrementAndGet();
        }
        @MessageMapping("/api/chat")
        //在springmvc 中可以直接获得principal,principal 中包含当前用户的信息
        public void handleChat(Principal principal, Message messagePara) {
            String currentUserName = principal.getName();
            System.out.println(currentUserName);
            try {
                messagePara.setFrom(principal.getName());
                System.out.println("from" + messagePara.getFrom());
                messagingTemplate.convertAndSendToUser(messagePara.getTo(),
                        "/queue/notifications",
                        messagePara);
            } catch (Exception e) {
                // 打印异常
                e.printStackTrace();
            }
        }
    }
    

    前端交互拨号index.vue

    
    
    {{ toUserId + '请求连接!' }}
        取 消
        确 定
      
    
    
    

    最终演示效果

    java版本使用springboot vue websocket webrtc实现视频通话,在这里插入图片描述,第1张

    具体代码查看