工程名 video-call

一个简单的 音视频通话 demo,包含:视频、麦克风、屏幕共享操作。

项目环境

  • jdk1.8
  • idea
  • maven
  • springboot 2.1.1.RELEASE
  • websocket
  • thymeleaf
  • webrtc

项目启动

修改maven设置

打开IDEA 设置:File>Setting>Build,Exec... 如下图所示

启动

找到启动类,鼠标右键点击三角形或 即可;

访问路径:

http://localhost:8086/toPage

如果需要在局域网内访问,需要配置整数,使用HTTPS访问。

HTTPS访问路径:

https://局域网IP地址:8086/toPage

本项目只需要修改 application.yml文件下


# 服务端口配置
server:
port: 8086
# 配置 Https 证书
ssl:
key-store: classpath:keystore.jks
key-store-password: kurento
key-store-type: JKS
key-alias: kurento-selfsigned

使用手册

本地访问

启动界面

注册

呼叫

视频通话

打开、关闭视频

打开、关闭麦克风

屏幕分享

局域网内访问

仅访问地址不同,其他功能一致。

WebRtc

参考:如何实现一个基于WebRTC的音视频通信系统: https://juejin.cn/post/7169557366587785229

WebRTC架构

简单的音视频架构

WebRTC架构

WebRTC大体可以分为四层:接口层、Session层、引擎层、设备层:

接口层:暴露给业务侧,业务侧可以使用原生的 C++ API 接口或者 Web API 开发音视频实时通信。核心是 RTCPeerConnection

Session层:用于控制业务逻辑,比如媒体协商、收集 Candidate 等

引擎层:包括音频引擎、视频引擎和网络传输

设备层:主要和硬件交互,负责音频的采集和播放,视频的采集,物理网络等

音视频通信过程

一个正常音视频通信架构如上图所示,通信双方分别是 caller(主叫) 与 callee(被叫),两边的内部逻辑相似,下面以caller端为例,了解内部流程:

调用音视频检测模块,检测终端是否有可用的音视频设备

调用音视频采集模块,采集用户音视频数据

根据用户选择,是否开启录制(授权)

通过信令模块交换SDP

创建WebRTC的核心对象RTCPeerConnection,之后添加采集到的音视频数据

RTCPeerConnection向STUN(SessionTraversal Utilities forNAT)/TURN(Traversal Using Relays aroundNAT)服务器发送请求,返回caller的外网ip地址和端口号

通过信令服务器,caller和callee互相传递对方的外网ip地址和端口(媒体协商)

最终P2P链接建立完成,后面就会源源不断的发送音视频数据到对端

协商流程

B站视频预览效果地址

https://www.bilibili.com/video/BV1vP41117pu

代码地址就是评论区哦。

【小小Demo】网页视频通话小🌰子的更多相关文章

  1. javascript的40个网页常用小技巧

    下面是javascript的40个网页常用小技巧,对网站开发人员相信会有帮助.1. oncontextmenu="window.event.returnValue=false" 将 ...

  2. github上预览Demo网页最简单的方法

    github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...

  3. 用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  4. 请用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  5. fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  6. CSS之fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  7. (网页)javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  8. [转]请用fontAwesome代替网页icon小图标

    原文地址:https://www.cnblogs.com/wangfupeng1988/p/4129500.html 1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标, ...

  9. 请用fontAwesome代替网页icon小图标(转)

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  10. python网页爬虫小项目开发

    这是我最近接的一个小项目,花了是整整四天多时间. 任务是将http://www.examcoo.com/index/detail/mid/7网站下所有的试卷里的试题全部提取出来,首先按照题型进行分类, ...

随机推荐

  1. 全新跨平台版本.NET敏捷开发框架-RDIFramework.NET5.0震撼发布

    RDIFramework.NET,基于全新.NET Framework与.NET Core的快速信息化系统敏捷开发.整合框架,给用户和开发者最佳的.Net框架部署方案.为企业快速构建跨平台.企业级的应 ...

  2. C# 从0到实战 lambda表达式和Expression-bodied表达式

    什么是lambda表达式(λ表达式) 用过其他函数式语言的人可能对闭包和惰性计算很熟悉,没有用过的人也多多少少的听说过Lambda表达式.那么到底什么是lambda表达式呢?按我的看法是创建一个匿名的 ...

  3. Win Airtest + 夜神模拟器 实现APP自动化

    前言: Airtest 是一个跨平台的UI自动化测试框架,适用于游戏和App.目前支持Windows.Android平台和 iOS 平台. 一.下载Airtest 下载地址:https://airte ...

  4. 省选联考2021vp记

    卡牌游戏 考虑到将 \(a\) 和 \(b\) 放在一起排序,最后朝上的数字必然在左端点为最小值,右端点为最大值的区间中.这个区间中至少有 \(n-m\) 个是原来的 \(a\),且对于每张卡牌必然要 ...

  5. Vite-WeGPT聊天AI实例|vue3+pinia仿ChatGPT聊天界面

    基于vue3.x+vite4+pinia2仿chatgpt聊天模拟实例Vue3-WeGPT. 基于Vite4.x+Vue3+Pinia2+VEPlus+Vue3-Markdown等技术实现仿ChatG ...

  6. 2021-11-10:O(1) 时间插入、删除和获取随机元素。实现RandomizedSet 类:RandomizedSet() 初始化 RandomizedSet 对象。bool insert(in

    2021-11-10:O(1) 时间插入.删除和获取随机元素.实现RandomizedSet 类:RandomizedSet() 初始化 RandomizedSet 对象.bool insert(in ...

  7. 2021-10-20:分数到小数。给定两个整数,分别表示分数的分子numerator和分母denominator,以字符串形式返回小数。如果小数部分为循环小数,则将循环的部分括在括号内。输入: num

    2021-10-20:分数到小数.给定两个整数,分别表示分数的分子numerator和分母denominator,以字符串形式返回小数.如果小数部分为循环小数,则将循环的部分括在括号内.输入: num ...

  8. Django中多个app放置同一文件夹中

    在pycharm中新建一个管理app的python package目录:apps 将存在的app用拖拽到apps目录下,此时会弹出对话框,取消勾选Search for references(搜索索引) ...

  9. .Net NPOI Excel 导出

    NPOI 导出 Excel 最终效果图 环境:Revit,WPF,NPOI 2.5.6,.Net Framework 4.7.2 一.引用 NPOI 右击项目引用,选择 "管理NuGet程序 ...

  10. 完成第一个 Vue3.2 项目后,使用体会

    第一次Composition API 在vue3.2中,正式支持了script setup的写法,这样可以大大简化组件的代码量,减少一些重复操作,我认为当你写vue3时,应该把这当作默认写法.在vue ...