当前位置：首页 > news >正文

WebRtc10: 端对端1v1传输基本流程

news 来源：原创 2025/5/7 11:09:19

媒体能力协商过程

RTCPeerConnection（核心类）

基本格式
pc = new RTCPeerConnection([configiration]);

RTCPeerConnection方法分类

媒体协商
Stream/Track
传输相关方法
统计相关方法

媒体协商过程

在这里插入图片描述

协商状态变化

在这里插入图片描述

媒体协商方法

createOffer
createAnswer
setLocalDescription
setRemoeteDescription

createOffer

基本格式
aPromise = myPeerConnection.createOffer([options]);

createAnswer

基本格式
aPromise = myPeerConnection.createAnswer([options]);

setLocalDescription

基本格式
aPromise = myPc.setLocalDescription(sessionDescription);

setRemoeteDescription

基本格式
aPromise = myPc.setRemoeteDescription(sessionDescription);

Track方法

addTrack
removeTrack

addTrack

基本格式
rtpSender = myPc.addTrack(track, stream…);
参数
track: 添加到RTCPeerConnection中的媒体轨
stream：指定track所在的stream

removeTrack

基本格式
myPc.removeTrack(rtpSender);

重要事件

onnegotiationneeded
onicecandidate

1:1连接的基本流程

在这里插入图片描述

实战：本机内的1:1音视频互通

index.html

<html><head><title>WebRTC PeerConnection</title></head><body><div><video id="localvideo" autoplay playsinline></video><video id="remotevideo" autoplay playsinline></video><div><button id="start">Start</button><button id="call">Call</button><button id="hangup">HangUp</button></div></div><script src="https://webrtc.github.io/adapter/adapter-latest.js"></script><script src="js/main.js"></script></body>
</html>

main.js

'use strict'var localVideo = document.querySelector('video#localVideo');
var remoteVideo = document.querySelector('video#remoteVideo');
var btnStart = document.querySelector('button#start');
var btnCall = document.querySelector('button#call');
var btnHangUp= document.querySelector('button#hangup');var localStream;
var pc1;
var pc2;function gotMediaStream(stream){localVideo.srcObject = stream;localStream = stream;
}function handleError(err){console.log("Failed to call getUserMedia", err);
}function start(){var constraints = {video: true,audio: false }if(!navigator.mediaDevices ||!navigator.mediaDevices.getUserMedia){return;}else {navigator.mediaDevices.getUserMedia(constraints).then(gotMediaStream).catch(handleError);}}function gotAnswerDescription(desc){pc2.setLocalDescription(desc);//send sdp to caller//recieve sdp from calleepc1.setRemoteDescription(desc);}function gotLocalDescription(desc){pc1.setLocalDescription(desc);//send sdp to callee//receive sdp from caller pc2.setRemoteDescription(desc);	pc2.createAnswer().then(gotAnswerDescription).catch(handleError);
}function gotRemoteStream(e){if(remoteVideo.srcObject !== e.streams[0]){remoteVideo.srcObject = e.streams[0];}
}function call(){var offerOptions = {offerToReceiveAudio: 0,offerToReceiveVideo: 1 }pc1 = new RTCPeerConnection();pc1.onicecandidate = (e) => {// send candidate to peer// receive candidate from peerpc2.addIceCandidate(e.candidate).catch(handleError);console.log('pc1 ICE candidate:', e.candidate);}pc1.iceconnectionstatechange = (e) => {console.log(`pc1 ICE state: ${pc.iceConnectionState}`);console.log('ICE state change event: ', e);}pc2 = new RTCPeerConnection();pc2.onicecandidate = (e)=> {// send candidate to peer// receive candidate from peerpc1.addIceCandidate(e.candidate).catch(handleError);console.log('pc2 ICE candidate:', e.candidate);}pc2.iceconnectionstatechange = (e) => {console.log(`pc2 ICE state: ${pc.iceConnectionState}`);console.log('ICE state change event: ', e);}pc2.ontrack = gotRemoteStream;//add Stream to callerlocalStream.getTracks().forEach((track)=>{pc1.addTrack(track, localStream);});pc1.createOffer(offerOptions).then(gotLocalDescription).catch(handleError);}function hangup(){pc1.close();pc2.close();pc1 = null;pc2 = null;}btnStart.onclick = start;
btnCall.onclick = call;
btnHangUp.onclick = hangup;

WebRtc10: 端对端1v1传输基本流程

媒体能力协商过程 RTCPeerConnection（核心类） 基本格式 pc new RTCPeerConnection([configiration]); RTCPeerConnection方法分类媒体协商Stream/Track传输相关方法统计相关方法媒体协商过程协商状态变化媒体协商方法 createOffercreateAnswe…...

编程日记 2025/5/7 11:09:19

【云备份】配置文件加载模块

目录一.为什么要配置文件二.配置文件的实现三.单例文件配置类设计四.源码一.为什么要配置文件我们将服务端程序运行中用到的一些关键信息保存到配置文件中，这样可以使程序的运行更加灵活。这样做的好处是，未来如果我们想要修改一些关键信息&…...

编程日记 2025/5/7 10:41:38

重构之道：识别并替换不合适使用的箭头函数

1、引言 JavaScript 自 ES6 引入了箭头函数（Arrow Function）后，因其简洁的语法和对 this 的词法绑定机制，迅速成为开发者喜爱的写法之一。然而，并不是所有场景都适合使用箭头函数。在实际开发中，我们常常会因为追求代码简洁而忽视其潜在问题，例如： this 指向错误不适…...

编程日记 2025/5/7 10:17:27

git问题记录-如何切换历史提交分支，且保留本地修改

问题记录我在本地编写了代码，突然想查看之前提交的代码，并且想保留当前所在分支所做的修改通过git stash对本地的代码进行暂存使用git checkout <commit-hash>切换到之前的提交记录。查看完之后我想切换回来，恢复暂存的本地代码…...

编程日记 2025/5/7 10:32:15

【MySQL】事务管理

事务管理一. 事务的概念二. 事务的特征三. 事务的版本支持四. 事务的提交方式五. 事务的常见操作六. 事务的隔离级别1. 查看与设置隔离级别2. 读未提交 (Read Uncommitted)3. 读提交 (Read Committed)4. 可重复读 (Repeatable Read)5. 串行化 (Serializable)6. 隔离级别的总结…...

编程日记 2025/5/3 7:12:14

【点对点协议（PPP）全解析】从原理到工程实践

目录前言技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比二、实战演示环境配置要求核心配置实现案例1：基础PPP链路建立案例2：CHAP认证配置运行结果验证三、性能对比测试…...

编程日记 2025/5/3 7:10:11

环境搭建：开启 Django 开发之旅

一、环境搭建：开启 Django 开发之旅 （一）安装 Python 先确保电脑上装有 Python 3.6 及以上版本，Django 5.1 的话，至少得 Python 3.8 哦。安装前，先查下有没有装过 Python ，终端（Wi…...

编程日记 2025/5/3 7:10:09

如何配置NGINX作为反向代理服务器来缓存后端服务的响应？

大家好，我是锋哥。今天分享关于【如何配置NGINX作为反向代理服务器来缓存后端服务的响应？】面试题。希望对大家有帮助； 如何配置NGINX作为反向代理服务器来缓存后端服务的响应？ 1000道互联网大厂Java工程师精选面试题-Java资源…...

编程日记 2025/5/3 7:10:09

【Java IO流】File类基础详解

参考笔记：java File类基础万字详解（通俗易懂）-CSDN博客目录 1.前言 2. File类介绍 3. File类构造方法 4.File类常用的方法案例演示 4.1 创建文件/文件夹的方法 4.2 删除文件/文件夹的方法 4.3 判断文件/文件夹是否存在的方法 4.4 …...

编程日记 2025/5/3 7:09:07

《C#数据结构与算法》—201线性表

线性表的实现方式顺序表线性表的顺序存储是指在内存中用一块地址连续的空间依次存放线性表的数据元素，用这种方式存储的线性表叫顺序表。特点：表中相邻的数据元素在内存中存储位置也相邻。顺序表接口实现： 方法名参数返回值描述GetLen…...

编程日记 2025/5/3 7:09:06

MATLAB绘制局部放大图

今天，我将分享一段 MATLAB 代码，该代码生成了一个主副图结合的可视化展示，用于比较不同控制系统性能表现。 clc; clear; close all;% 生成时间向量 t 0:0.1:12;% 生成模拟数据 zero_feedback 0.5 * ones(size(t)); % 恒定…...

编程日记 2025/5/3 7:09:05

TS 常用类型

JS不会检查变量类型的变化给变量规定特定的数据类型，错误赋值时会报错优势：TS会标记出代码中的意外行为，尤其是typeerrors 具体实现：类型注解 JS和TS中数据类型的变化...

编程日记 2025/5/3 7:08:02

[Control-Chaos] Toxic Cascade(毒性級鏈)

信息信息描述靶場名稱Toxic Cascade地址GitHub: Toxic Cascade難度中等人數推薦1人類型CTF、APT 攻擊模擬、故事解謎、化工工程與逆向工程描述Toxic Cascade 是一個結合 CTF、APT 攻擊模擬、故事解謎、化工工程與逆向工程的高度沉浸式靶場。該靶場具有獨特的情境背景與模擬真…...

编程日记 2025/5/3 7:08:01

纳米AI搜索体验：MCP工具的实际应用测试，撰写报告 / 爬虫小红书效果惊艳

1. 引言近期测试了纳米AI搜索的MCP工具功能，重点体验了其智能体在报告生成和社交媒体数据分析方面的表现。平台整合了100多个MCP工具，通过本地化部署的方式，为用户提供了不同于云端方案的操作体验。本文将分享实际测试结果，包括智…...

编程日记 2025/5/3 7:08:00

React useMemo函数

第一个参数是回调函数，返回计算的结果，第二个参数是依赖项，该函数只监听count1变量的变化 import { useReducer, useState } from react; import ./App.css;// 定义一个Reducer函数根据不同的action进行不同的状态修改 function reducer(st…...

编程日记 2025/5/3 7:06:58

第 1 篇：起点的选择：为何需要超越数组与链表？

大家好，欢迎来到“数据结构选型指南”系列！在软件开发中，数据是核心，而如何高效地组织和访问这些数据，则是程序性能的关键。选择合适的数据结构，就像为你的 Java 应用选择最优的“引擎零件”。今天&#xf…...

编程日记 2025/5/3 7:06:57

MySQL 索引不生效的情况

MySQL 索引不生效的 SQL 查询需要避免的情况索引是提高 MySQL 查询性能的关键，但某些 SQL 写法会导致索引失效，从而影响查询效率。以下是需要避免的常见情况： 1. 使用 NOT、! 或 <> 操作符 -- 索引可能失效 SELECT * FROM users WH…...

编程日记 2025/5/3 7:06:57

【阿里云大模型高级工程师ACP学习笔记】2.9 大模型应用生产实践 (上篇)

特别说明：由于这一章节是2025年3月官方重点更新的部分，新增内容非常多，因此我不得不整理成上、下两篇，方便大家参考。学习目标备考阿里云大模型高级工程师ACP认证，旨在全面掌握大模型应用生产实践的专业知识，提升在该领域的实操技能与理论水平，为职业发展增添助力。具…...

编程日记 2025/5/3 7:05:53

一.配置方法二.串口中断 u8 i; u16 buf[20],res; u8 receiving_flag 0; // 新增一个标志，用于标记是否开始接收数组 void USART1_IRQHandler(void) {if(USART_GetITStatus(USART1, USART_IT_RXNE) ! RESET) //接收中断{res USART_ReceiveData(USART1);if(receiv…...

编程日记 2025/5/3 7:04:51

【算法基础】选择排序算法 - JAVA

一、算法基础 1.1 什么是选择排序选择排序是一种简单直观的排序算法，它的工作原理是：首先在未排序序列中找到最小（或最大）元素，存放到排序序列的起始位置，然后再从剩余未排序元素中继续寻找最小&#xf…...

编程日记 2025/5/3 7:04:51

FastAPI 与数据库交互示例

目录安装必要的包完整代码示例运行应用使用说明API 端点说明代码解析下面将创建一个简单的 FastAPI 应用程序，演示如何与 SQLite 数据库进行交互。这个例子包括创建、读取、更新和删除（CRUD）操作。安装必要的包首先，需要安装…...

编程日记 2025/5/3 7:03:48

（六——下）RestAPI 毛子（Http resilience/Refit/游标分页）

文章目录项目地址一、Refit1.1 安装需要的包1.2 创建接口IGitHubApi1.3 创建RefitGitHubService1. 实现接口2. 注册服务 1.4 修改使用方法二、Http resilience2.1 安装所需要的包2.2 创建resilience pipeline简单版2.3 创建全局的resilience处理1. 创建清理全局ResilienceHan…...

编程日记 2025/5/3 7:03:48

Rust 学习笔记：关于枚举与模式匹配的练习题

Rust 学习笔记：关于枚举与模式匹配的练习题 Rust 学习笔记：关于枚举与模式匹配的练习题以下程序能否通过编译？若能，输出是什么？考虑这两种表示结果类型的方式，若计算成功，则包含值 T&#xff1b…...

编程日记 2025/5/3 7:02:46

父子组件双向绑定

v-model 语法糖实现 vue中我们在input中可以直接使用v-model来完成双向绑定，这个时候 v-model 通常会帮我们完成两件事： v-bind:value的数据绑定@input的事件监听如果我们现在封装了一个组件，其他地方在使用这个组件时，是否也可以使用v-model来同时完成这两个功能呢？当我…...

编程日记 2025/5/3 7:02:46

系统思考与第一性原理

最近一直有客户提到“第一性原理”，希望借此穿透纷繁复杂的现象，看清事情的本质。我第一反应是：这与系统思考中的冰山模型不谋而合。冰山模型中提到：我们看到的只是表面事件，事件背后有趋势，趋势背后有结…...

编程日记 2025/5/3 7:02:45

基于Redis实现-UV统计

基于Redis实现-UV统计本文将使用HyperLogLog来实现UV统计。首先我们搞懂两个概念： UV：全称Unique Visitor，也叫独立访客量，是指通过互联网访问、浏览这个网页的自然人。1天内同一个用户多次访问该网站，只记录一次…...

编程日记 2025/5/3 7:01:43

【iOS】类与对象底层探索

类与对象底层探索 Clang探索对象本质objc_setProperty源码探索cls与类的关联原理isa的类型isa_t原理探索类&类的结构什么是元类NSObject到底有几个isa走位&继承关系图objc_class&objc_object 类结构分析计算cache类中的内存大小获取bits属性列表（prope…...

编程日记 2025/5/3 7:01:43

2025年- H18-Lc126-54.螺旋矩阵（矩阵）---java版

1.题目描述 2.思路* 思路1： 补充2： directions[1][0] // 表示“下”这个方向的行增量（1） directions[1][1] // 表示“下”这个方向的列增量（0） int[][] directions {{0, 1}, {1, 0}, {0, -1}, {-…...

编程日记 2025/5/3 7:01:42

Paddle Serving|部署一个自己的OCR识别服务器

前言之前使用C部署了自己的OCR识别服务器，Socket网络传输部分是自己写的，回过头来一看，自己犯傻了，PaddleOCR本来就有自己的OCR服务器项目，叫PaddleServing，这里记录一下部署过程。 1 下载依赖环境 1.1 …...

编程日记 2025/5/3 7:00:40

yolov5 本地训练

YOLOv5 | Kaggle 直接gitclone他的源码用Vscode看（也可以直接把jupyter下下来） 他要1.8，我的是2.7，他这个代码可能有点年头了两年前了他的环境我的环境我就是不懂为什么清华源的torch windows默认下出来是cpu版本 . 在终端…...

编程日记 2025/5/3 7:00:40

同城跑腿小程序帮取帮送接单抢单预约取件智能派单同城配送全开源运营版源码优创

一、源码描述这是一套同城跑腿小程序，基于FastadminUniapp框架，全开源无加密，可私有化部署，包含用户端、骑手端和运营端（后端），支持帮取/帮送模式，支持一键接单/抢单，主…...

编程日记 2025/5/3 7:00:39

基于SpringBoot的药房药品销售管理系统

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：…...

编程日记 2025/5/3 7:00:39

机器学习中的学习率及其衰减方法全面解析

摘要： 本文深入解析机器学习中的学习率及其衰减方法，涵盖学习率的作用、常用衰减参数及七种主流衰减策略（分段常数、指数、自然指数、多项式、余弦、线性余弦、噪声线性余弦）。通过公式推导与图示对比，揭示不同衰减方式…...

编程日记 2025/5/5 17:12:00

硬件性能与能效比竞赛：解码 PC 硬件的 “速度与激情”

引言：当性能遇见能效，一场永不停歇的算力革命在数字内容爆炸式增长的时代，无论是 4K/8K 游戏的极致画质追求，还是 AI 大模型的本地化部署需求，亦或是内容创作者对实时渲染的效率渴求，都在推动 PC 硬件走向…...

编程日记 2025/5/3 6:59:36

大模型在终末期肾脏病风险预测与临床方案制定中的应用研究

目录一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 1.3 研究方法与数据来源二、终末期肾脏病概述 2.1 定义与诊断标准 2.2 发病机制与影响因素 2.3 现状与危害三、大模型技术原理及应用现状 3.1 大模型基本原理 3.2 在医疗领域应用案例 3.3 在终末期肾脏病…...

编程日记 2025/5/3 6:59:35

【C++11】智能指针

📝前言： 这篇文章我们来讲讲C11——智能指针： 🎬个人简介：努力学习ing 📋个人专栏：C学习笔记 🎀CSDN主页愚润求学 🌄其他专栏：C语言入门基础，pyt…...

编程日记 2025/5/3 6:59:35

华为云Astro轻应用利用自定义连接器调用第三方接口实际操作

样图说明华为云Astro轻应用通过自定义连接器调用第三方接口具有多方面的作用，主要体现在以下几点：扩展功能与集成能力调用第三方服务：通过配置自定义连接器，Astro轻应用可以调用第三方提供的Rest协议接口，实现第三方提供的业务功能，扩展应用的能力。集成外部系统：…...

编程日记 2025/5/3 6:58:33

【中间件】brpc_基础_butex.h

butex.h 学习笔记源码 1 概述 butex.h 提供了一种用户态同步原语 butex（类似 Linux 的 futex），专为 bthread 设计，用于高效协调线程的阻塞与唤醒。其核心是通过原子操作结合等待队列管理，减少内核态切换开销&#…...

编程日记 2025/5/3 6:57:30

数字智慧方案5876丨智慧交通枢纽智能化系统建设方案（56页PPT）（文末有下载方式）

篇幅所限，本文只提供部分资料内容，完整资料请看下面链接 https://download.csdn.net/download/2301_78256053/89575493 资料解读：智慧交通枢纽智能化系统建设方案详细资料请看本解读文章的最后内容。随着城市化进程的加速，交…...

编程日记 2025/5/3 6:57:29

深度学习笔记40_中文文本分类-Pytorch实现

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊 | 接辅导、项目定制一、我的环境 1.语言环境：Python 3.8 2.编译器：Pycharm 3.深度学习环境： torch1.12.1cu113torchvision…...

编程日记 2025/5/5 3:17:15

python设置word字体的方法

在Python中，可以使用python-docx库来设置Word文档的字体样式，以下为具体方法和示例代码： 一、设置段落中字体样式使用python-docx库时，Word文档中的文本通常被组织成段落（Paragraph对象），而一…...

编程日记 2025/5/3 6:56:26

golang常用库之-标准库text/template

文章目录 golang常用库之-标准库text/template背景什么是text/templatetext/template库的使用 golang常用库之-标准库text/template 背景在许多编程场景中，我们经常需要把数据按照某种格式进行输出，比如生成HTML页面，或者生成配置文件。这…...

编程日记 2025/5/3 6:56:25

【JAVA】如何快速阅读一个基于maven构建的springboot项目

一、摘要在JAVA项目开发过程中，现在比较流行的是springboot机构，特别是在后端开发的项目中，springboot应用的非常普遍。springboot很好将大型的、复杂的项目进行分解，以模块或者服务的表现形式组成项目。那么当我们接手一个陌生的…...

编程日记 2025/5/3 6:55:24

Fedora升级Google Chrome出现GPG check FAILED问题解决办法

https://dl.google.com/linux/linux_signing_key.pub 的 GPG 公钥(0x7FAC5991)已安装 https://dl.google.com/linux/linux_signing_key.pub 的 GPG 公钥(0xD38B4796)已安装仓库 "google-chrome" 的 GPG 公钥已安装，但是不适用于此软件包。请检查此仓库的…...

编程日记 2025/5/3 6:55:22

深入解析MapReduce：大数据处理的经典范式

引言在大数据时代，如何高效处理海量数据成为技术核心挑战之一。Hadoop生态中的MapReduce框架应运而生，以其“分而治之”的思想解决了大规模数据的并行计算问题。本文将从原理、核心组件到实战案例，带你全面理解这一经典计算模型。一、MapR…...

编程日记 2025/5/3 6:55:21

JVM性能调优的基础知识 | JVM内部优化与运行时优化

目录 JVM内部的优化逻辑 JVM的执行引擎解释执行器即时编译器 JVM采用哪种方式？ 即时编译器类型 JVM的分层编译5大级别： 分层编译级别： 热点代码： 如何找到热点代码？ java两大计数器： OSR 编译…...

编程日记 2025/5/6 18:46:31

云计算-容器云-部署jumpserver 版本2

应用部署：堡垒机部署 # 使用提供的软件包配置Yum源，通过地址将jumpserver.tar.gz软件包下载至Jumpserver节点的/root目录下 [rootjumpserver ~]# tar -zxvf jumpserver.tar.gz -C /opt/ [rootjumpserver ~]# cp /opt/local.repo /etc/yum.repos.d/ [roo…...

编程日记 2025/5/3 6:54:19