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

已于 2024-02-22 15:17:28 修改
阅读量1.1k 收藏 19
点赞数 12
分类专栏： java 文章标签： java 实时音视频 gitee
于 2024-02-22 15:02:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44327322/article/details/135701642
版权

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

原理简单解释

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

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

websocket传递信令服务

使用技术

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

搭建websocket环境依赖

	<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

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<HandlerMethodArgumentResolver> argumentResolvers) {
        WebSocketMessageBrokerConfigurer.super.addArgumentResolvers(argumentResolvers);
    }

    @Override
    public void addReturnValueHandlers(List<HandlerMethodReturnValueHandler> returnValueHandlers) {
        WebSocketMessageBrokerConfigurer.super.addReturnValueHandlers(returnValueHandlers);
    }

    @Override
    public boolean configureMessageConverters(List<MessageConverter> 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

<template>
  <div class="play-audio">
    <h2 style="text-align: center;">播放页面</h2>
    <div class="main-box">
      <video ref="localVideo" class="video" autoplay="autoplay"></video>
      <video ref="remoteVideo" class="video" height="500px" autoplay="autoplay"></video>
    </div>
    <div style="text-align: center;">
      <el-button @click="requestConnect()" ref="callBtn">开始对讲</el-button>
      <el-button @click="hangupHandle()" ref="hangupBtn">结束对讲</el-button>
    </div>
    <div style="text-align: center;">
      <label for="name">发送人：</label>
      <input type="text" id="name" readonly v-model="userId" class="form-control"/>
    </div>
    <div style="text-align: center;">
      <label for="name">接收人：</label>
      <input type="text" id="name" v-model="toUserId" class="form-control"/>
    </div>

  </div>

</template>

<el-dialog :title="'提示'" :visible.sync="dialogVisible" width="30%">
<span>{{ toUserId + '请求连接!' }}</span>
<span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleYes">确 定</el-button>
  </span>
</el-dialog>

<script>
import request from '@/utils/reeques'
import Websocket from '@/utils/websocket'
import Stomp from "stompjs";
import SockJS from "sockjs-client";
import adapter from "webrtc-adapter";
import axios from 'axios'

export default {
  data() {
    return {
      stompClient: null,
      userId: '001',
      socket: null,
      toUserId: '',
      localStream: null,
      remoteStream: null,
      localVideo: null,
      remoteVideo: null,
      callBtn: null,
      hangupBtn: null,
      peerConnection: null,
      dialogVisible: false,
      msg: '',
      config: {
        iceServers: [
          {urls: 'stun:global.stun.twilio.com:3478?transport=udp'}
        ],
      }

    };
  },
  computed: {},
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    dialogVisibleYes() {
      var _self = this;
      this.dialogVisible = false
      _self.startHandle().then(() => {
        _self.stompClient.send("/api/chat", _self.toUserId, {'type': 'start'})
      })
    },
    requestConnect() {
      let that = this;

      if (!that.toUserId) {
        alert('请输入对方id')
        return false
      } else if (!that.stompClient) {
        alert('请先打开websocket')
        return false
      } else if (that.toUserId == that.userId) {
        alert('自己不能和自己连接')
        return false
      }
      //准备连接
      that.startHandle().then(() => {
        that.stompClient.send("/api/chat", that.toUserId, {'type': 'connect'})
      })
    },

    startWebsocket(user) {
      let that = this;
      that.stompClient = new Websocket(user);
      that.stompClient.connect(() => {
        that.stompClient.subscribe("/user/" + that.userId + "/queue/notifications", function (result) {
          that.onmessage(result)
        })
      })
    }
    ,
    gotLocalMediaStream(mediaStream) {
      var _self = this;
      _self.localVideo.srcObject = mediaStream;
      _self.localStream = mediaStream;
      // _self.callBtn.disabled = false;
    }
    ,
    createConnection() {
      var _self = this;
      _self.peerConnection = new RTCPeerConnection()

      if (_self.localStream) {
        // 视频轨道
        const videoTracks = _self.localStream.getVideoTracks();
        // 音频轨道
        const audioTracks = _self.localStream.getAudioTracks();
        // 判断视频轨道是否有值
        if (videoTracks.length > 0) {
          console.log(`使用的设备为: ${videoTracks[0].label}.`);
        }
        // 判断音频轨道是否有值
        if (audioTracks.length > 0) {
          console.log(`使用的设备为: ${audioTracks[0].label}.`);
        }

        _self.localStream.getTracks().forEach((track) => {
          _self.peerConnection.addTrack(track, _self.localStream)
        })
      }

      // 监听返回的 Candidate
      _self.peerConnection.addEventListener('icecandidate', _self.handleConnection);
      // 监听 ICE 状态变化
      _self.peerConnection.addEventListener('iceconnectionstatechange', _self.handleConnectionChange)
      //拿到流的时候调用
      _self.peerConnection.addEventListener('track', _self.gotRemoteMediaStream);
    }
    ,
    startConnection() {
      var _self = this;
      // _self.callBtn.disabled  = true;
      // _self.hangupBtn.disabled = false;
      // 发送offer
      _self.peerConnection.createOffer().then(description => {
        console.log(`本地创建offer返回的sdp:\n${description.sdp}`)

        // 将 offer 保存到本地
        _self.peerConnection.setLocalDescription(description).then(() => {
          console.log('local 设置本地描述信息成功');
          // 本地设置描述并将它发送给远端
          // _self.socket.send(JSON.stringify({
          //   'userId': _self.userId,
          //   'toUserId': _self.toUserId,
          //   'message': description
          // }));
          _self.stompClient.send("/api/chat", _self.toUserId, description)

        }).catch((err) => {
          console.log('local 设置本地描述信息错误', err)
        });
      })
        .catch((err) => {
          console.log('createdOffer 错误', err);
        });
    }
    ,
    async startHandle() {
      this.callBtn = this.$refs.callBtn
      this.hangupBtn = this.$refs.hangupBtn
      this.remoteVideo = this.$refs.remoteVideo
      this.localVideo = this.$refs.localVideo
      var _self = this;
      // 1.获取本地音视频流
      // 调用 getUserMedia API 获取音视频流
      let constraints = {
        video: true,
        audio: {
          // 设置回音消除
          noiseSuppression: true,
          // 设置降噪
          echoCancellation: true,
        }
      }
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
      await navigator.mediaDevices.getUserMedia(constraints)
        .then(_self.gotLocalMediaStream)
        .catch((err) => {
          console.log('getUserMedia 错误', err);
          //创建点对点连接对象
        });

      _self.createConnection();
    },
    onmessage(e) {
      var _self = this;
      const description = e.message
      _self.toUserId = e.from
      switch (description.type) {
        case 'connect':
          _self.dialogVisible = true
          this.$confirm(_self.toUserId + '请求连接!', '提示', {}).then(() => {
            _self.startHandle().then(() => {
              _self.stompClient.send("/api/chat", _self.toUserId, {'type': 'start'})
            })
          }).catch(() => {
          });
          break;
        case 'start':
          //同意连接之后开始连接
          _self.startConnection()
          break;
        case 'offer':
          _self.peerConnection.setRemoteDescription(new RTCSessionDescription(description)).then(() => {

          }).catch((err) => {
            console.log('local 设置远端描述信息错误', err);
          });

          _self.peerConnection.createAnswer().then(function (answer) {

            _self.peerConnection.setLocalDescription(answer).then(() => {
              console.log('设置本地answer成功!');
            }).catch((err) => {
              console.error('设置本地answer失败', err);
            });
            _self.stompClient.send("/api/chat", _self.toUserId, answer)
          }).catch(e => {
            console.error(e)
          });
          break;
        case 'icecandidate':
          // 创建 RTCIceCandidate 对象
          let newIceCandidate = new RTCIceCandidate(description.icecandidate);
          // 将本地获得的 Candidate 添加到远端的 RTCPeerConnection 对象中
          _self.peerConnection.addIceCandidate(newIceCandidate).then(() => {
            console.log(`addIceCandidate 成功`);
          }).catch((error) => {
            console.log(`addIceCandidate 错误:\n` + `${error.toString()}.`);
          });
          break;
        case 'answer':
          _self.peerConnection.setRemoteDescription(new RTCSessionDescription(description)).then(() => {
            console.log('设置remote answer成功!');
          }).catch((err) => {
            console.log('设置remote answer错误', err);
          });
          break;
        default:
          break;
      }
    },
    hangupHandle() {
      var _self = this;
      // 关闭连接并设置为空
      _self.peerConnection.close();
      _self.peerConnection = null;

      // _self.hangupBtn.disabled = true;
      // _self.callBtn.disabled = false;

      _self.localStream.getTracks().forEach((track) => {
        track.stop()
      })
    },
    handleConnection(event) {
      var _self = this;
      // 获取到触发 icecandidate 事件的 RTCPeerConnection 对象
      // 获取到具体的Candidate
      console.log("handleConnection")
      const peerConnection = event.target;
      const icecandidate = event.candidate;

      if (icecandidate) {
        _self.stompClient.send("/api/chat", _self.toUserId, {
          type: 'icecandidate',
          icecandidate: icecandidate
        })
      }
    },
    gotRemoteMediaStream(event) {
      var _self = this;
      console.log('remote 开始接受远端流')

      if (event.streams[0]) {
        console.log(' remoteVideo')
        _self.remoteVideo.srcObject = event.streams[0];
        _self.remoteStream = event.streams[0];
      }
    },
    handleConnectionChange(event) {
      const peerConnection = event.target;
      console.log('ICE state change event: ', event);
      console.log(`ICE state: ` + `${peerConnection.iceConnectionState}.`);
    },
    log(v) {
      console.log(v)
    },
  },
  created() {
    let that = this;
    request({
      url: '/user',
      method: 'get',
      params: {}
    }).then(response => {
      console.log(response.data)
      that.userId = response.data;
      this.startWebsocket(response.data)
      debugger
    })
    debugger

  }
}

</script>
<style lang="scss">
.spreadsheet {
  padding: 0 10px;
  margin: 20px 0;
}

.main-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
</style>

最终演示效果

在这里插入图片描述

具体代码查看

孤独和弦
关注
  • 12
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于WebRTC+SpringBoot+Websocket 简单音视频通话
05-12
相关技术：Websocket，Springboot，WebRtc 使用Websocket 作为交互，作为信令服务器，负责信令交换。 视频、麦克风、屏幕共享相关操作，下载即可运行。 包含使用手册及相关说明。
java 基于websocket实现的视频聊天
06-01
java 基于websocket实现的视频聊天，解压项目到对应位置部署到tomcat8即可使用
Websocket实时音视频传输应用实战
最新发布
m0_73443478的博客
03-09 1311
Websocket实时音视频传输应用实战
基于websocket+webrtc实现音视频通话demo，下载即可用
03-02
基于Java WebSocket 做信令服务器，使用webrtc浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。从而实现音视频通话。下载启动 输入http://localhost 就可使用
WebRTC+java实现多人视频通讯
04-24
通过WebRTC实时通讯技术，配合后端java websocket实现多人视频。局域网内视频没问题，公网需要自行穿透NAT，项目整体为SpringBoot 外置Tomcat 启动
基于WebSocket、WebRTC实现浏览器视频通话
06-13
基于WebSocket、WebRTC实现浏览器视频通话， 仅供参考，大家一起讨论学习！
WebRTC的学习(java版本信令服务)
weixin_43917143的博客
03-17 3348
WebRTC的学习 1. 相关地址 1.1 文档教学   WebRTC中文网：http://webrtc.p2hp.com/#google_vignette   WebRTC中文社区：https://webrtc.org.cn/   WebRTC英文官网：https://webrtc.org/   WebRTC安全相关：http://webrtc-security.github.io/   coturn开源地址：https://github.com/coturn/coturn   stun、trun测试网站
企业微信视频教程(Java标准版)
06-06
企业微信教程有：“标准版”和“在线版”。正常的，学习“标准版”可以完成企业微信的相关开发。“在线版”是“一对一在线班讲解”，针对同学们项目遇到的问题，个性化定制课程大纲，解决具体问题。“一对一在线班讲解”报名，请qq2326321088标准版主要讲解企业微信开发的关键技术，接收普通消息、回复普通消息、发送消息、网页授权、网页应用、JS-SDK，等知识点。该课程适合有微信企业号、微信服务号基础或具有一定的C# web开发基础的学员。“一对一在线班讲解”，在标准版知识结构的基础上，全面讲解企业微信的各个技术点，涵盖企业微信的全部内容，提供企业微信开发工具包。此外，针对accesstoken缓存给出建议解决方案。讲解针对企业微信的OA项目开发。OA项目重点讲解企业微信的“同事吧”、“公告”、“打卡”、“日报”、“审批”等应用。购买咨询课程，有技术问题，qq2326321088
java写一个webrtc信令服务器,coturn
weixin_45029766的博客
07-11 6130
java写一个webrtc信令服务器,coturn
Java+Netty+WebRTC、语音、视频、屏幕共享【聊天室设计实践】
热门推荐
殷长庆的博客
12-09 1万+
本文使用webtrc实现了一个简单的语音视频聊天室、支持多人音视频聊天、屏幕共享。​ 音视频功能需要在有Https协议的域名下才能获取到设备信息， 正式环境可以申请一个免费的证书 复杂网络环境下需要自己搭建turnserver，网络上搜索大多是使用coturn来搭建turn服务 turn默认监听端口3478，可以使用webrtc.github.io测试服务是否可用 本文在局域网内测试，不必要部署turn，使用的谷歌的stun:stun.l.google.com:19302
点对点视频通讯基础WebRTC视频
07-23
点对点视频,基于WebRTC开发的视频通讯。适合入门基本的学习
基于java开发环境的WebRTC 点对点视频通话系统
07-20
这是一款基于java环境的webrtc音视频通话demo，本人已经亲自试验过，使用前请先阅读readme，如果有报错可上网查询，极有可能是端口问题
基于Springboot实现的多人视频在线会议服务器前端(webrtc项目)源码+使用说明.7z
12-18
基于Springboot实现的多人视频在线会议服务器前端(webrtc项目)源码+使用说明.7z 【多人视频在线会议-后端源码】https://download.csdn.net/download/DeepLearning_/87317683 视频会议的前端 使用webrtc实现图像传输。 vue+elementui 【功能实现】 视频通话 语音通话 共享桌面 大屏预览 聊天室 管理员控制成员视频麦克风等 不限制人数(人多可能会卡) 【备注】 主要针对计算机相关专业的正在做毕设的学生和需要项目实战的Java学习者。 也可作为课程设计、期末大作业。包含：项目源码、数据库脚本、项目说明等，该项目可以直接作为毕设使用。 也可以用来学习参考借鉴！
wmf和emf图片公式转png
weixin_44327322的博客
07-24 1539
wmf和emf图片公式转png用到这块，一般应用在教育信息类的网站，上传考试试题等数据，我入行第一次做的网站就是类似题库平台的资源导入，这块感觉一开始做就是入坑；word转html就是各种坑， 有尝试用dom4j和poi，最终选择了dom4j,感觉目前对docx的技术还不太成熟，转出来的数据因为样式问题缺失内容，特别是缺失公式图片，标记和样式混入导致不能解析内容，到线上应用总会出现各种bug；今年由于定制项目开发，重构一下这块内容，用到了jsoup,poi ，phantomjs；在使用phantomjs这块
Executors线程池的使用,CompletableFuture异步
weixin_44327322的博客
06-06 1091
我们使用线程池可能会使用ExecutorService，默认有四种方式 Executors.newFixedThreadPool 创建一个定长线程池，可控制线程最大并发数,超出的线程会在队列中等待 Executors.newSingleeThreadPool()创建一个单线程化的线程池，它只会用唯一的工作线程来执行任务，保证所有任务按照指定顺序(FIFO, LIFO, 优先级)执行 Executors.newScheduledThreadPool ()创建一个定长线程池，支持定时及周期性任务执
表单提交list集合，map
weixin_44327322的博客
04-19 869
//@ModelAttribute(“user”) User user注释方法参数，参数user的值来源于addAccount()方法中的model属性 //@ModelAttribute注释的方法会在此controller每个方法执行前被执行 html: <form action="map" method="post" enctype="multipart/form-data"> a...
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@android:style/Theme.NoTitleBar"“属性。这样可以通过Android自带的主题去掉标题栏。 2. 使用自定义的主题，可以在样式表中添加以下代码： <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <!-- ...其他样式... --> </style> 这种方式可以通过设置主题去除ActionBar和标题栏，同时保留其他布局元素。 3. 去掉代码中的setTitle()方法，这是一种最简单的方法，通过不设置Activity的标题来实现无标题。 以上就是三种常见的实现Android无标题的方式，开发者可以根据实际需求进行选择。值得注意的是，去除标题栏可能会影响用户的导航体验，因此在设计上需要考虑周全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值