websocket 局域网 webrtc 一对一 视频通话的实例

基本介绍

使用websocket来 WebRTC 建立连接时的 数据的传递和交换。

WebRTC 建立连接时，通常需要按照以下顺序执行一些步骤：
1.创建本地 PeerConnection 对象：使用 RTCPeerConnection 构造函数创建本地的 PeerConnection 对象，该对象用于管理 WebRTC 连接。

2.添加本地媒体流：通过调用 getUserMedia 方法获取本地的音视频流，并将其添加到 PeerConnection 对象中。这样可以将本地的音视频数据发送给远程对等方。

3.创建和设置本地 SDP：使用 createOffer 方法创建本地的 Session Description Protocol (SDP)，描述本地对等方的音视频设置和网络信息。然后，通过调用 setLocalDescription 方法将本地 SDP 设置为本地 PeerConnection 对象的本地描述。

4.发送本地 SDP：将本地 SDP 发送给远程对等方，可以使用信令服务器或其他通信方式发送。

5.接收远程 SDP：从远程对等方接收远程 SDP，可以通过信令服务器或其他通信方式接收。

6.设置远程 SDP：使用接收到的远程 SDP，调用 PeerConnection 对象的 setRemoteDescription 方法将其设置为远程描述。

7.创建和设置本地 ICE 候选项：使用 onicecandidate 事件监听 PeerConnection 对象的 ICE 候选项生成，在生成候选项后，通过信令服务器或其他通信方式将其发送给远程对等方。

8.接收和添加远程 ICE 候选项：从远程对等方接收到 ICE 候选项后，调用 addIceCandidate 方法将其添加到本地 PeerConnection 对象中。

9.连接建立：一旦本地和远程的 SDP 和 ICE 候选项都设置好并添加完毕，连接就会建立起来。此时，音视频流可以在本地和远程对等方之间进行传输。

windwos+局域网直连的环境，测试过程的问题

1.http协议下安全性原因导致无法调用摄像头和麦克风
chrome://flags/ 配置安全策略 或者 配置本地的https环境
在这里插入图片描述
2. 开启了防火墙，webRTC连接失败，
windows防火墙-高级设置-入站规则-新建规则-端口 ,udp
UDP: 32355-65535 放行
为了方便测试 直接关闭防火墙也行。

效果如下 局域网0延迟：

在这里插入图片描述

如下demo级别的代码，复制运行就能直接测试，简单修改后，可实现基于webrtc的 共享桌面、视频录制等功能。

html代码

<!DOCTYPE>
<html><head><meta charset="UTF-8"><title>WebRTC + WebSocket</title><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>html,body {margin: 0;padding: 0;}#main {position: absolute;width: 370px;height: 550px;}#localVideo {position: absolute;background: #757474;top: 10px;right: 10px;width: 100px;height: 150px;z-index: 2;}#remoteVideo {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: #222;}#buttons {z-index: 3;bottom: 20px;left: 90px;position: absolute;}#toUser {border: 1px solid #ccc;padding: 7px 0px;border-radius: 5px;padding-left: 5px;margin-bottom: 5px;}#toUser:focus {border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)}#call {width: 70px;height: 35px;background-color: #00BB00;border: none;margin-right: 25px;color: white;border-radius: 5px;}#hangup {width: 70px;height: 35px;background-color: #FF5151;border: none;color: white;border-radius: 5px;}</style>
</head><body><div id="main"><video id="remoteVideo" playsinline autoplay></video><video id="localVideo" playsinline autoplay muted></video><div id="buttons"><input id="myid" /><input id="toUser" placeholder="输入在线好友账号" /><br /><button id="call">视频通话</button><button id="hangup">挂断</button></div></div>
</body>
<!-- 可引可不引 -->
<!--<script th:src="@{/js/adapter-2021.js}"></script>-->
<script type="text/javascript" th:inline="javascript">function generateRandomLetters(length) {let result = '';const characters = 'abcdefghijklmnopqrstuvwxyz'; // 字母表for (let i = 0; i < length; i++) {const randomIndex = Math.floor(Math.random() * characters.length);const randomLetter = characters[randomIndex];result += randomLetter;}return result;}let username = generateRandomLetters(2);document.getElementById('myid').value = username;let localVideo = document.getElementById('localVideo');let remoteVideo = document.getElementById('remoteVideo');let websocket = null;let peer = null;let candidate = null;/* WebSocket */function WebSocketInit() {//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {websocket = new WebSocket("ws://192.168.31.14:8181/webrtc/" + username);} else {alert("当前浏览器不支持WebSocket！");}//连接发生错误的回调方法websocket.onerror = function (e) {alert("WebSocket连接发生错误！");};//连接关闭的回调方法websocket.onclose = function () {console.error("WebSocket连接关闭");};//连接成功建立的回调方法websocket.onopen = function () {console.log("WebSocket连接成功");};//接收到消息的回调方法websocket.onmessage = async function (event) {let { type, fromUser, msg, sdp, iceCandidate } = JSON.parse(event.data.replace(/\n/g, "\\n").replace(/\r/g, "\\r"));console.log(type, fromUser, msg, sdp, iceCandidate);if (type === 'hangup') {console.log(msg);document.getElementById('hangup').click();return;}if (type === 'call_start') {let msg = "0"if (confirm(fromUser + "发起视频通话，确定接听吗") == true) {document.getElementById('toUser').value = fromUser;WebRTCInit();msg = "1"}websocket.send(JSON.stringify({type: "call_back",toUser: fromUser,fromUser: username,msg: msg}));return;}if (type === 'call_back') {if (msg === "1") {console.log(document.getElementById('toUser').value + "同意视频通话");//创建本地视频并发送offerlet stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })localVideo.srcObject = stream;console.log(peer);stream.getTracks().forEach(track => {peer.addTrack(track, stream);});let offer = await peer.createOffer();await peer.setLocalDescription(offer);let newOffer = offer.toJSON();newOffer["fromUser"] = username;newOffer["toUser"] = document.getElementById('toUser').value;websocket.send(JSON.stringify(newOffer));} else if (msg === "0") {alert(document.getElementById('toUser').value + "拒绝视频通话");document.getElementById('hangup').click();} else {alert(msg);document.getElementById('hangup').click();}return;}if (type === 'offer') {let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });localVideo.srcObject = stream;stream.getTracks().forEach(track => {peer.addTrack(track, stream);});await peer.setRemoteDescription(new RTCSessionDescription({ type, sdp }));let answer = await peer.createAnswer();let newAnswer = answer.toJSON();newAnswer["fromUser"] = username;newAnswer["toUser"] = document.getElementById('toUser').value;websocket.send(JSON.stringify(newAnswer));await peer.setLocalDescription(answer);return;}if (type === 'answer') {peer.setRemoteDescription(new RTCSessionDescription({ type, sdp }));return;}if (type === '_ice') {peer.addIceCandidate(iceCandidate);return;}}}/* WebRTC */function WebRTCInit() {peer = new RTCPeerConnection();//icepeer.onicecandidate = function (e) {if (e.candidate) {websocket.send(JSON.stringify({type: '_ice',toUser: document.getElementById('toUser').value,fromUser: username,iceCandidate: e.candidate}));}};//trackpeer.ontrack = function (e) {if (e && e.streams) {remoteVideo.srcObject = e.streams[0];}};}/* 按钮事件 */function ButtonFunInit() {//视频通话document.getElementById('call').onclick = function (e) {document.getElementById('toUser').style.visibility = 'hidden';let toUser = document.getElementById('toUser').value;if (!toUser) {alert("请先指定好友账号，再发起视频通话！");return;}if (peer == null) {WebRTCInit();}websocket.send(JSON.stringify({type: "call_start",fromUser: username,toUser: toUser,}));}//挂断document.getElementById('hangup').onclick = function (e) {document.getElementById('toUser').style.visibility = 'unset';if (localVideo.srcObject) {const videoTracks = localVideo.srcObject.getVideoTracks();videoTracks.forEach(videoTrack => {videoTrack.stop();localVideo.srcObject.removeTrack(videoTrack);});}if (remoteVideo.srcObject) {const videoTracks = remoteVideo.srcObject.getVideoTracks();videoTracks.forEach(videoTrack => {videoTrack.stop();remoteVideo.srcObject.removeTrack(videoTrack);});//挂断同时，通知对方websocket.send(JSON.stringify({type: "hangup",fromUser: username,toUser: document.getElementById('toUser').value,}));}if (peer) {peer.ontrack = null;peer.onremovetrack = null;peer.onremovestream = null;peer.onicecandidate = null;peer.oniceconnectionstatechange = null;peer.onsignalingstatechange = null;peer.onicegatheringstatechange = null;peer.onnegotiationneeded = null;peer.close();peer = null;}localVideo.srcObject = null;remoteVideo.srcObject = null;}}WebSocketInit();ButtonFunInit();</script></html>

websocket java代码

package com.coco.boot.config;import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.websocket.*;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;import java.text.SimpleDateFormat;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;/*** WebRTC + WebSocket*/
@Slf4j
@Component
@ServerEndpoint(value = "/webrtc/{username}")
public class WebRtcWSServer {/*** 连接集合*/private static final Map<String, Session> sessionMap = new ConcurrentHashMap<>();/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("username") String username, @PathParam("publicKey") String publicKey) {sessionMap.put(username, session);}/*** 连接关闭调用的方法*/@OnClosepublic void onClose(Session session) {for (Map.Entry<String, Session> entry : sessionMap.entrySet()) {if (entry.getValue() == session) {sessionMap.remove(entry.getKey());break;}}}/*** 发生错误时调用*/@OnErrorpublic void onError(Session session, Throwable error) {error.printStackTrace();}/*** 服务器接收到客户端消息时调用的方法*/@OnMessagepublic void onMessage(String message, Session session) {try{//jacksonObjectMapper mapper = new ObjectMapper();mapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);//JSON字符串转 HashMapHashMap hashMap = mapper.readValue(message, HashMap.class);//消息类型String type = (String) hashMap.get("type");//to userString toUser = (String) hashMap.get("toUser");Session toUserSession = sessionMap.get(toUser);String fromUser = (String) hashMap.get("fromUser");//msgString msg = (String) hashMap.get("msg");//sdpString sdp = (String) hashMap.get("sdp");//iceMap iceCandidate  = (Map) hashMap.get("iceCandidate");HashMap<String, Object> map = new HashMap<>();map.put("type",type);//呼叫的用户不在线if(toUserSession == null){toUserSession = session;map.put("type","call_back");map.put("fromUser","系统消息");map.put("msg","Sorry，呼叫的用户不在线！");send(toUserSession,mapper.writeValueAsString(map));return;}//对方挂断if ("hangup".equals(type)) {map.put("fromUser",fromUser);map.put("msg","对方挂断！");}//视频通话请求if ("call_start".equals(type)) {map.put("fromUser",fromUser);map.put("msg","1");}//视频通话请求回应if ("call_back".equals(type)) {map.put("fromUser",toUser);map.put("msg",msg);}//offerif ("offer".equals(type)) {map.put("fromUser",toUser);map.put("sdp",sdp);}//answerif ("answer".equals(type)) {map.put("fromUser",toUser);map.put("sdp",sdp);}//iceif ("_ice".equals(type)) {map.put("fromUser",toUser);map.put("iceCandidate",iceCandidate);}send(toUserSession,mapper.writeValueAsString(map));}catch(Exception e){e.printStackTrace();}}/*** 封装一个send方法，发送消息到前端*/private void send(Session session, String message) {try {System.out.println(message);session.getBasicRemote().sendText(message);} catch (Exception e) {e.printStackTrace();}}
}

springboot 相关依赖和配置

// 1.pom
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>// 2.启用功能
@EnableWebSocket
public class CocoBootApplication3.config		
package com.coco.boot.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

主要参考:
WebRTC + WebSocket 实现视频通话
WebRTC穿透服务器防火墙配置问题
WebRT音视频录制

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/782137.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

pytest--python的一种测试框架--pytest初阶

pytest--python的一种测试框架--pytest初阶

前言 使用pytest去做测试时我们对文件名的命名其实是有规范的&#xff0c;要用test_开头&#xff01;&#xff01;&#xff01; 一、pytest初阶 def test_one():expect1actual1assert expectactual#测试专用语句&#xff1a;assert&#xff0c;识别期望与实际值是否相等这个…
阅读更多...
EXCEL 通过FILES函数获取指定路径中的所有文件名

EXCEL 通过FILES函数获取指定路径中的所有文件名

FILES函数 用途 获取指定文件路径中的所有文件名。 语法 FILES(“路径\*.*”)指定从哪个路径下返回一个文件名。 *.*是通配符&#xff0c;代表所有类型的文件&#xff0c;第一个*是文件名的通配符&#xff0c;第二个* 是文件的后缀名&#xff0c;表示文件类型&#xff0c;如…
阅读更多...
最新Java面试题1【2024中级】

最新Java面试题1【2024中级】

互联网大厂面试题 1&#xff1a;阿里巴巴Java面试题 2&#xff1a;阿里云Java面试题-实习生岗 3&#xff1a;腾讯Java面试题-高级 4&#xff1a;字节跳动Java面试题 5&#xff1a;字节跳动Java面试题-大数据方向 6&#xff1a;百度Java面试题 7&#xff1a;蚂蚁金服Java…
阅读更多...
swift中的autoreleasepool(自动释放池)有用么?

swift中的autoreleasepool(自动释放池)有用么?

想到一个问题 swift中的autoreleasepool(自动释放池)有用么? 我们进行验证一下 首先我们写一个加载图片的方法,保证会真正用到真实的IMP内存func loadBigData(string: String?) {if let path Bundle.main.path(forResource: "big", ofType: "png") {for…
阅读更多...
百度资源平台链接提交

百度资源平台链接提交

百度资源平台是百度搜索引擎提供的一个重要工具&#xff0c;用于帮助网站主将自己的网站链接提交给百度搜索引擎&#xff0c;以便更快地被收录和展示在搜索结果中。以下将就百度资源平台链接提交的概念、操作方法以及其对网站收录和曝光的影响进行探讨&#xff1a; 什么是百度资…
阅读更多...
【GPT5进展】GPT-5将于今年年中发布

【GPT5进展】GPT-5将于今年年中发布

OpenAI即将发布的GPT-5代表了人工智能技术的一个重大进步&#xff0c;这一新一代模型预计将进一步扩大OpenAI在AI应用领域的影响力。以下是关于GPT-5的几个关键点&#xff0c;旨在清晰、简洁地向读者传达这一重要更新&#xff1a; 1. 性能和功能的实质性提升 GPT-5在性能上做…
阅读更多...
ssm008医院门诊挂号系统+jsp

ssm008医院门诊挂号系统+jsp

医院门诊挂号系统 摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;医院门诊挂号系统当然也不能排除在外。医院门诊挂号系统是以实际运用为开发背景&#xff0c;运用软件…
阅读更多...
微服务（基础篇-007-RabbitMQ）

微服务（基础篇-007-RabbitMQ）

目录 初识MQ(1) 同步通讯&#xff08;1.1&#xff09; 异步通讯&#xff08;1.2&#xff09; MQ常见框架&#xff08;1.3&#xff09; RabbitMQ快速入门(2) RabbitMQ概述和安装&#xff08;2.1&#xff09; 常见消息模型&#xff08;2.2&#xff09; 快速入门&#xff…
阅读更多...
解决lmoskrlimg not found

解决lmoskrlimg not found

感谢帖子https://www.cnblogs.com/gongxianjin/p/17014494.html解决了我的大问题
阅读更多...
面试经典150题【121-130】

面试经典150题【121-130】

文章目录 面试经典150题【121-130】215.数组中的第k大元素502.IPO373.查找和最小的K对数字295.数据流的中位数108.将有序数组转换为二叉搜索树148.排序链表427.建立四叉树23.合并K个升序链表53.最大子数组和918.环形子数组的最大和 面试经典150题【121-130】 4道堆&#xff0c…
阅读更多...
Hive on Spark 配置

Hive on Spark 配置

目录 1 Hive 引擎简介2 Hive on Spark 配置2.1 在 Hive 所在节点部署 Spark2.2 在hive中创建spark配置文件2.3 向 HDFS上传Spark纯净版 jar 包2.4 修改hive-site.xml文件2.5 Hive on Spark测试2.6 报错 1 Hive 引擎简介 Hive引擎包括&#xff1a;MR&#xff08;默认&#xff09…
阅读更多...
Go-React做一个todolist（服务端）【一】项目初始化

Go-React做一个todolist（服务端）【一】项目初始化

后端仓库地址 地址 项目依赖 # gin go get -u github.com/gin-gonic/gin # viper日志 go get -u github.com/spf13/viper # 数据库和gorm go get -u gorm.io/driver/mysql go get -u gorm.io/gorm # uuid go get -u github.com/google/uuid # token go get -u github.com/go…
阅读更多...
postcss安装和使用（详细）

postcss安装和使用（详细）

1,安装postcss&#xff1a; 在此之前需要安装有node.js 第一步 命令&#xff1a;cnpm install postcss-cli -g 第二步 命令&#xff1a;cnpm install postcss –g 推荐内容 2,下载autoprefixer插件&#xff0c;并创建postcss.config.js文件并写入配置代码 autoprefixer插件…
阅读更多...
HCIP【GRE VPN、MGRE VPN与PPP验证综合实验】

HCIP【GRE VPN、MGRE VPN与PPP验证综合实验】

目录 实验要求&#xff1a; 实验拓扑图&#xff1a; 实验思路&#xff1a; 实验步骤&#xff1a; 一、配IP地址 &#xff08;1&#xff09;配置所有设备接口的IP地址&#xff1a; &#xff08;2&#xff09;配置私网与公网接口的缺省路由使得公网可通&#xff1a; 二、P…
阅读更多...
基于boost准标准库的搜索引擎项目

基于boost准标准库的搜索引擎项目

零 项目背景/原理/技术栈 1.介绍boost准标准库 2.项目实现效果 3.搜索引擎宏观架构图 这是一个基于Web的搜索服务架构 该架构优点: 客户端-服务器模型&#xff1a;采用了经典的客户端-服务器模型&#xff0c;用户通过客户端与服务器交互&#xff0c;有助于集中管理和分散计算…
阅读更多...
设计模式6--抽象工厂模式

设计模式6--抽象工厂模式

定义 案例一 案例二 优缺点
阅读更多...
MacOS M1/M2/M3芯片如何安装Python3.6

MacOS M1/M2/M3芯片如何安装Python3.6

前言 Mac电脑M芯片安装Python3.6报错。 一般情况下&#xff0c;Mac系统可以使用homebrew来管理安装软件。 brew search搜索发现&#xff0c;最低只能直接安装python3.7版本。 于是从Python官网下载安装包进行安装&#xff0c;确实也没有报错&#xff0c;安装完成后执行总是k…
阅读更多...
【自动装箱以及包装类的缓存】⭐️通过具体案例看下每种包装类的不同结果

【自动装箱以及包装类的缓存】⭐️通过具体案例看下每种包装类的不同结果

目录 前言 一、自动装箱与拆箱&#xff08;以 Integer 包装类为例&#xff09; 二、再来看看几个示例 ​编辑三、Double ,Float 类型亦是如此吗&#xff1f; 前言 小伙伴们大家好&#xff0c;日常使用业务层方面的代码居多&#xff0c;但也不可忘了基本的一些代码格式以及原…
阅读更多...
ubuntu22.04@Jetson Orin Nano安装配置VNC服务端

ubuntu22.04@Jetson Orin Nano安装配置VNC服务端

ubuntu22.04Jetson Orin Nano安装&配置VNC服务端 1. 源由2. 环境3. VNC安装Step 1: update and install xserver-xorg-video-dummyStep 2: Create config for dummy virtual displayStep3: Add the following contents in xorg.conf.dummyStep 4: Update /etc/X11/xorg.con…
阅读更多...
设计模式7--建造者模式

设计模式7--建造者模式

定义 案例一 案例二 优缺点
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023