WebTransport 开播的应用实践之路

2023-11-06

动手点关注

99e894a8247b5ea57e340d90a414ad43.gif

干货不迷路

Web开播的业务挑战

无论是本地软件推流还是Web推流,都需要解决推流抖动、画面高糊、音频卡顿等问题。在现有的Web技术环境下,如何稳定地把高质量的音视频流呈现给更多用户,是我们技术团队攻克的重点。从技术角度来解读一下这里的几个关键词:

  • 稳定性: 传输协议本身的稳定性是需要保障的,优先会选择使用可靠传输,防止网损带来的花屏、杂音等问题,更重要的是,在服务链路不可用的情况下能够迅速切换服务线路。因此在推流场景下需要提供多线路备份的能力。

  • 高质量:在一些场景下,比如医疗医美营销的场景、带货的场景,要对商品细节做展示,这就要求技术方案在带宽允许的前提下,尽可能选用对画面细节损失更少的编码方案

  • 大规模用户:要分发给更多用户,那技术方案设计肯定会引入直播CDN服务,但是推流协议是不是能够被直播CDN支持,这就是一个考量的点,也是做私有协议无法满足的点。

WebTransport 的技术原理

首先我们简单来了解一下WebTransport这个传输协议基本的技术原理。WebTransport是基于HTTP3的应用层传输协议,HTTP3的底层又基于quic协议,quic协议是基于UDP协议实现的一套传输协议,支持可靠与非可靠传输两种形式。

d29de443335bf2e4d2cb4830b7dbf2d6.png

WebTransport 的技术优势

WebTransport对于Web应用的意义并不止于一个更好的传输协议,它更多的还是带来了一个更加丰富的技术栈,能够根据实际场景,结合WebCodecs、WebAssembly和WebNN等能力实现更好的应用体验。相较于WebRTC相对中心化的技术栈,这种方式显然是更加灵活的,易于做出更多灵活的技术组合。

0ca51ab9f68fb17393f0bdcc15a7983b.png

另一个明显的优势在于WebTransport可以发挥页面多线程的优势,使用WebRTC协议,大量的逻辑只能放在主线程执行,而使用WebTransport就可以将整个音视频的处理流程放在WebWorker中,降低对主线程的占用,提升页面流畅度。同时使用多线程能够提升应用的扩展性,在面对更多的音视频任务时可以用线程来进行抽象和隔离。

206863a59c0a83ee55b3c8e18d08ea45.png

充分利用多线程机制降低主线程负担

a5e6357d49cdb879db4802a2c31125a9.png

利用多线程机制提升应用的可拓展性

从传输协议的特性上来说,它的建联速度更快,首次建联只需要1个RTT,相比之下,TCP则需要2~3个RTT。针对已经建立过的连接,超时时间内再次建联可以实现0RTT。在网络拥塞的情况下,减少RTT次数对速度的优化是非常明显的。可以到几十ms。最后一个特性是连接迁移,在直播过程中如果WIFI网络不好。切到手机热点也可以实现0RTT,相比之下,TCP、RTC都需要重新建立连接,恢复的速度会慢很多。

1d332b7ea11a01360c46858ffb778136.png

首次连接比TCP快1~2RTT 

2edb5d0789529e4763cf14d7a35c0da4.png

对有缓存的连接支持0RTT

基于这些优势,火山引擎直播团队选择使用WebTransport优化直播推流。设计的方案是基于单向流的稳定传输,从传输格式上对标RTMP,这样直播CDN的支持成本会相对较小,比较好复用目前的RTMP收流逻辑。由于这个技术栈较新也需要解决过程中的一些问题:虽然W3C定义了AAC的编码能力,但是Chrome没有提供AAC编码的实现,可以将libFaaC编译成wasm库来实现,另外浏览器没有针对flv容器的封装,需要额外支持该部分能力。那么相比于WebRTC推流,WebTransport推流的实际应用效果如何呢?

a172b900cb70b444ff894e7fde2d4329.png

WebTransport 推流 WebRTC 推流效果对比

为什么 WebTransport 能够比 WebRTC 推流获得更好的效果:

网络传输(画质与稳定性):

WebRTC是面向实时通信的传输协议,对网络延时的变化敏感。使用WebRTC协议推流时,它受到网络抖动的影响较大,当网络延时的抖动发生时,RTC的带宽估计模块会认为当前网络处于拥塞状态,需要降低发送码率以避免拥塞,码率的降低对视频画质的影响是非常大的,直观感受就会出现局部的马赛克。当使用WebTransport基于Quic可靠传输时,其拥塞控制算法对网络抖动的敏感度相对较低,可以通过牺牲一定的延迟保证发送可靠性,因此不容易出现大幅降低发送带宽的行为,画质相对有保障。

编码优化(画质):

WebTransport在Web规范中提供了网络传输的能力,并且可以与现有的Web端多媒体能力进行深度集成,例如WebCodecs、WebGPU等。给应用的优化提供了更多编码格式、参数选择方面的空间。

易于集成到直播 CDN (大规模分发):

WebTransport基于已经定稿的HTTP3规范,易于被直播CDN集成支持,应用复杂度相较于WebRTC更低,同时省去了RTC推流建连过程中的信令环节,可以加快首帧推送的速度,方便部署到更多的直播CDN

首先在网络抖动的场景下,同样加入100ms延迟抖动,WebTransport推流的画面会明显比RTC推流要清晰。在网络抢占的场景下,固定一个较低的带宽,使用GCC拥塞控制算法的数据流,面对使用TCP协议的数据传输,它能够分到的带宽资源是非常小的。

23ec8b41ddbe085c265ebef473e741f7.png

WebTransport推流+100ms延迟抖动

acde28659dad8033e30db4a81cc5ac3c.png

 WebRTC推流+100ms延迟抖动

另外,在固定3Mbps上行带宽的网络下,同时使用WebTransport和RTC推流,设定的目标码率都是1.5M,过程中RTC推流的码率会受到严重的影响,码率大幅下降,不能保证画质。WebTransport推流在不同网络状态下的流畅度表现,除了大量丢包的情况下,其余的场景都能够达到与RTC推流基本持平。

caf8b821d25c37099627ecab5b7e9828.png

WebTransport推流

bc28a78c404556c6ef1b6a70d2ba1d6e.png

 WebRTC推流

总结与展望

不同的推流协议之间各有优缺点,目前没有一个完美的解决方案,需要根据实际的场景来做选择,比如连麦场景一般需要用WebRTC转推,更适合低延迟互动的场景,WebTransport方案则更适合高画质需求的场景。总的来说,WebTransport推流的方案在解决“如何稳定地将高质量的音视频传递给大量的用户”的问题上,即实现了可靠的传输,连接稳定性有保障,并且在遭遇网损的场景,可以通过牺牲部分延迟保障音视频质量,给出了一份令人较为满意的答卷。如果想要体验WebTransport的开播效果,可进入火山引擎控制台进行在线demo体验。

f73bae2dcd29c18a796cc2807e7c46de.png

16e39f79376e2d98a27b224d8f331e11.png 点击「阅读原文」立即体验!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

WebTransport 开播的应用实践之路 的相关文章

  • HTML语义标签和结构标签详解

    文章目录 实体标签 meta标签 语义化标签 结构化语义化标签 列表标签 在学习标签时我们应该注意的是他的语义 而不是他的显示效果 因为显示效果是在css中进行编写的 我们一定要做到分工明确清晰 实体标签 在网页中编写代码时 我们有时会使用
  • 4.1.4 规划、设计的艺术(技术)流派和常用技法(上)

    最后更新2021 08 25 超写实 人工 gt 脚本 gt 批处理 gt 微服务 gt 公有云 gt 公共IT基础设施 代表作品 Daniel Heilig手机拍照作品 腾讯云 阿里云 amazon azure gt 综合网管 gt 私有
  • 五、easyUI中的datagrid(数据表格)组件

    1 datagrid 数据表格 组件的概述 datagrid以表格形式展示数据 并提供了丰富的选择 排序 分组和编辑数据的功能支持 datagrid的设计用于缩短开发时间 并且使开发人员不需要具备特定的知识 它是轻量级的且功能丰富 单元格合

随机推荐

  • Ubuntu 最简单的方式安装chrome

    1 指定安装目录如下 cd opt 2 下载包 sudo wget https dl google com linux direct google chrome stable current amd64 deb 3 查看并安装 sudo d
  • 搭建 vue 开发环境: node.js安装+vue脚手架配置

    第一步 node环境安装 1 1 如果本机没有安装node运行环境 请下载node 安装包进行安装 1 2 如果本机已经安装node的运行换 请更新至最新的node 版本 下载地址 https nodejs org en 或者 http n
  • 读取excel

    import java io FileInputStream import java io IOException import java io InputStream import java text DateFormat import
  • JVM--调优--04--案例01--生产oom分析案例

    JVM 调优 04 案例01 生产oom分析案例 1 问题描述 项目首页 匿名无登陆 对首页进行150个线程 8小时压测 可以看到老年代一直在增加 visual gc 到某一时刻 直接oom 堆空间的图不是矩形 2 解决方案 堆dump文件
  • JDBC报错java.sql.SQLException: Cannot convert value '0000-00-00 00:00:00' from column 14 to T

    出现这个错误的原因是 当数据库中的Date类型字段值是 0000 00 00 时 JDBC不能把 0000 00 00 转化为一个java sql Date 问题的解决方案是在连接数据库的url后加入 zeroDateTimeBehavio
  • java使用mybatis拦截器对数据库敏感字段进行加密存储并解密

    记录业务中遇到的使用场景 灵活对数据库敏感字段进行加密和解密 文章目录 前言 一 创建数据库表和实体类 二 Mapper Service Controller等 三 自定义注解 四 加密工具类 五 参数拦截器和结果集拦截器 六 运行结果 总
  • Unix编程艺术(前言)

    Preface 前言 Unix is not so much an operating system as an oral history NealStephenson Unix与其说是一个操作系统 不如说是一部口述史 作者 NealSte
  • 爬虫数据去重、存入数据库

    三种数据去重方式 1 数据存入mongodb时 可以对关键字进行复合索引 2 对数据的关键字进行哈希映射 生成的指纹判断是否存在redis的指纹集合中 如果存在 说明数据重复 3 布隆过滤器 可以实现大量数据去重 存入数据库 根据数据量及用
  • verify.js验证码

    文字验证码 mpanel6 pointsVerify defaultNum txtCount 默认的文字数量 checkNum 3 校对的文字数量 vSpace 5 间隔 type 2 arith 0 imgName pageContext
  • 2023河南萌新联赛第(一)场:河南农业大学

    2023河南萌新联赛第 一 场 河南农业大学 ACM NOI CSP CCPC ICPC算法编程高难度练习赛 牛客竞赛OJ C 硬币游戏 考察知识点 博弈 先说结论 若操作一次就能获胜则先手胜 若无论第一次怎么操作 第二次操作都能获胜则后手
  • Nginx启动失败的几种错误处理

    使用Nginx做Web服务器过程中 碰到过以下几个问题 1 nginx启动失败 systemctl start nginx service 启动nginx失败 报错信息如下 Starting nginx nginx emerg bind t
  • java 面向对象实例——近似求π

    代码如下 import java util Scanner public class Js double num 0 public void pai Scanner input new Scanner System in int n inp
  • Stable Diffusion WebUI内存不够爆CUDA Out of memory怎么办?

    在我们运行SD的时候 我们经常会爆CUDA Out of memory 我们应该怎么办呢 这是因为我们的显存或者内存不够了 如果你是用cpu来跑图的则表示内存不够 这个时候就需要换个大点的内存了 如果你是用gpu来跑图的就说明你显存不够用咯
  • 【教程】如何使用Java生成PDF文档?

    在如今数字化时代 越来越多的人使用PDF文档进行信息传递和共享 而使用Java生成PDF文档也成为了一个非常重要的技能 因为Java作为一种通用的编程语言 可以在不同的操作系统和平台上运行 下面 我们将为您介绍如何使用Java生成PDF文档
  • vue中手机号码+座机号码、邮箱正则校验规则封装

    直接上代码 封装验证器 export function isvalidPhone phone const isPhone 1 38 0 9 4 014 9 59 0 35 9 6 2567 7 0 8 d 8 11位合法手机号码 const
  • TI(德州仪器) TMS320C674x逆向分析之二

    TI官网文档 http www ti com product tms320c6745 technicaldocuments 里面资料非常详细 可以对着里面一个个看 用的比较多的两个文档 TMS320C674x指令格式 TMS320C674x
  • 【linux kernel】记一次linux内核裁剪总结

    记一次linux内核裁剪总结 一 背景 在linux内核构建过程中 根据实际应用场景 小生构建了一个大约5 7M大小的linux内核zImage镜像 发现其稍微有点大了 想着将其裁剪和缩小 于是乎对linux内核进行裁剪 本篇文章主要记录一
  • 谷歌浏览器ajax警告,ajax请求的问题,谷歌浏览器的警告提示Provisional headers are shown...

    不太了解百度后台是什么情况 我也只是做一个简单的搜索功能用了跨域 我看数据请求成功了 数据已经返回 但是谷歌浏览器总是出现这种情况 友情提示 愿意回答的大神就请帮着看看 不愿意帮助的也请别乱踩 别干缺德事 还有就是我在hbulider下面打
  • VNC unable to connect via 127.0.0.1:1080

    VNC远程登录出现自己电脑拒绝的时候 请查看一下自己是否设了代理登录之类的操作 这里是WIN 10 登录远程一台WIN 10 服务器 跟服务器设置没有什么关系 主要由于本地配置导致的 解决方案 File里面选择属性 取消代理设置即可 折腾了
  • WebTransport 开播的应用实践之路

    动手点关注 干货不迷路 Web开播的业务挑战 无论是本地软件推流还是Web推流 都需要解决推流抖动 画面高糊 音频卡顿等问题 在现有的Web技术环境下 如何稳定地把高质量的音视频流呈现给更多用户 是我们技术团队攻克的重点 从技术角度来解读一