一小时教你用SpringBoot+WebSocket+WebRTC实现视频通话

• • • • 1. 运行结果
      • 2. 实现
      • • 2.1 后端实现
        • 2.2 前端页面实现
        • 3. 总结

          1. 运行结果

          SpringBoot+WebSocket+WebRTC实现视频通话

          上述运行结果中是有声音(比较小而已)及动的画面的(画面不是静止的)。

          网上关于webrtc的文档(文章)和视频也挺多的，但是用SpringBoot结合WebRTC的却屈指可数，前一段时间小编我学习了一下WebRTC的相关知识，于是用SpringBoot+WebRTC实现了一个多人的线上自习室(有画面，但是没有声音的那种，开启声音也挺简单，在js代码里设置一下即可[运行结果在最后的总结里])。最近CSDN有活动，正好把前一段时间学习的知识运用起来(下述代码只是实现了，但是其中的逻辑是存在一定问题的，所以如果读者用下述代码，切记需要改动改动哈！)。既然是WebRTC，为什么又和WebSocket扯上关系了呢？因为利用WebSocket技术来发送消息具有实时性，你看我在这端发送一个消息出去，只要另一端处于连接状态，那么就可以接收到这个消息。而如果使用的是http、https等的话，这一端你发送一个消息，另外一段需要刷新一下页面才能看到消息(当然可以搞个定时器)。结合WebSocket技术，能很快速地实现一个视频通话功能。

          2. 实现

          导入相关jar包的依赖，如下：

          
          
              4.0.0
              
                  org.springframework.boot
                  spring-boot-starter-parent
                  2.7.10
                   
              
              com.example
              demo
              0.0.1-SNAPSHOT
              demo
              Demo project for Spring Boot
              
                  1.8
              
              
                  
                      org.springframework.boot
                      spring-boot-starter-web
                  
                  
                      org.springframework.boot
                      spring-boot-starter-test
                      test
                  
                  
                      org.springframework.boot
                      spring-boot-devtools
                      runtime
                      true
                  
                  
                      org.springframework.boot
                      spring-boot-starter-thymeleaf
                  
                  
                      org.springframework.boot
                      spring-boot-starter-websocket
                  
                  
                      org.projectlombok
                      lombok
                  
              
              
                  
                      
                          org.springframework.boot
                          spring-boot-maven-plugin
                      
                  
              
          
          

          上述jar包可能有一些不需要的喔！

          2.1 后端实现

          websocket 配置类

          GetHttpSessionConfig.class

          package com.example.demo.websocket2;
          import javax.servlet.http.HttpSession;
          import javax.websocket.HandshakeResponse;
          import javax.websocket.server.HandshakeRequest;
          import javax.websocket.server.ServerEndpointConfig;
          public class GetHttpSessionConfig extends ServerEndpointConfig.Configurator {
              @Override
              public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
                  HttpSession httpSession = (HttpSession) request.getHttpSession();
                  // 获取httpsession对象
                  sec.getUserProperties().put(HttpSession.class.getName(), httpSession);
              }
          }
          

          ServerEndpointExporter Bean的定义 Config.class

          package com.example.demo.websocket2;
          import org.springframework.context.annotation.Bean;
          import org.springframework.context.annotation.Configuration;
          import org.springframework.web.socket.server.standard.ServerEndpointExporter;
          @Configuration
          public class Config {
              @Bean
              public ServerEndpointExporter serverEndpointExporter() {
                  return new ServerEndpointExporter();
              }
          }
          

          *websocket服务器类 WebSocketServer *

          package com.example.demo.websocket2;
          import org.springframework.stereotype.Component;
          import javax.servlet.http.HttpSession;
          import javax.websocket.*;
          import javax.websocket.server.ServerEndpoint;
          import java.io.IOException;
          import java.util.Map;
          import java.util.Set;
          import java.util.concurrent.ConcurrentHashMap;
          @Component
          @ServerEndpoint(value = "/video",configurator = GetHttpSessionConfig.class)
          public class WebSocketServer {
              //存储客户端的连接对象,每个客户端连接都会产生一个连接对象
              private static ConcurrentHashMap map = new ConcurrentHashMap();
              //每个连接都会有自己的会话
              private Session session;
              private String account;
              @OnOpen
              public void open(Session session,EndpointConfig config){
                  HttpSession httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
                  String account = String.valueOf(httpSession.getAttribute("account"));
                  map.put(account,this);
                  this.session = session;
                  this.account = account;
              }
              @OnClose
              public void close(){
                  map.remove(account);
              }
              @OnError
              public void error(Throwable error){
                  error.printStackTrace();
              }
              @OnMessage
              public void getMessage(String message) throws IOException {
                  Set> entries = map.entrySet();
                  for (Map.Entry entry : entries) {
                      if(!entry.getKey().equals(account)){//将消息转发到其他非自身客户端
                          entry.getValue().send(message);
                      }
                  }
              }
              public void send(String message) throws IOException {
                  if(session.isOpen()){
                      session.getBasicRemote().sendText(message);
                  }
              }
              public int  getConnetNum(){
                  return map.size();
              }
          }
          

          2.2 前端页面实现

          登录界面的代码就不在这儿粘贴了，下面主要展示视频通话界面的代码(包括css样式和js代码都在的)

          
          
              
              
          
          
          
          
              
              
              
          
                  
          
                      
                      Call
                      Hang Up
                  
              
          
          
          
          

          3. 总结

          上述前端代码参考来自这里：webrtc视频演示,上述代码中如果有不懂的读者可以去仔细看看这个链接里的知识，里面关于webrtc有详细的介绍及实现，不过，没有讲多人的，它只讲了一对一的，不过，前一段时间小编在参考一些大佬的实现思路及自己思考下，也实现了一个多人的，运行结果如下：

          基于SpringBoot,WebSocket,WebRTC实现多人自习室功能

           
           广告传媒公司  网页制作三剑客是指  建设平台  做个企业官网要多少钱  哈尔滨小程序制作公司  黑龙江建设网首页