WebRTC直播技术(一)-初探WebRTC

什么是WebRTC

  • webrtc 是为浏览器之间提供实时数据传输(Web Real-Time Communication)的javascript API
  • 支持 peer-to-peer 音频、视频、数据流传输能力

兼容性

主要的API

  • getUserMedia : 获取音视频
  • MediaRecorder: 录制音视频
  • RTCPeerConnection: 浏览器之间音视频流连接对象
  • RTCDataChannel: 浏览器数据流连接对象

结构图

信令(signaling)

信令是WebRTC用来协助建立p2p通讯的。主要用于协商双方通讯过程,传递基本信息SDP(会话描述协议)。 例如:打开/关闭连接的指令;视频信息,比如解码器,解码器的设置,带宽,以及视频的格式等;网关信息,比如双方的 IP,port... 一个简单的SDP格式:

具体字段含义可查询: https://datatracker.ietf.org/doc/draft-nandakumar-rtcweb-sdp/?include_text=1

SDP握手

下图为WebRTC通过信令建立一个SDP握手的过程。只有通过SDP握手,双方才知道对方的信息,这是建立p2p通道的基础。

  • 主播端通过 createOffer 生成 SDP 描述
  • 主播通过 setLocalDescription,设置本地的描述信息
  • 主播将 offer SDP 发送给用户
  • 用户通过 setRemoteDescription,设置远端的描述信息
  • 用户通过 createAnswer 创建出自己的 SDP 描述
  • 用户通过 setLocalDescription,设置本地的描述信息
  • 用户将 anwser SDP 发送给主播
  • 主播通过 setRemoteDescription,设置远端的描述信息。

通过SDP握手后,浏览器之间就会建立起一个点对点点直接通讯通道。但是由于我们所处的网络环境错综复杂,用户可能处在私有内网内,使用p2p传输时,将会遇到NAT以及防火墙等阻碍。这个时候我们就需要在SDP握手时,通过STUN/TURN/ICE相关NAT穿透技术来保障p2p链接的建立。具体将放在下一篇详细讲解。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

《HTML重构》读书笔记&思维导图

1064
来自专栏编程微刊

进阶攻略|最全的前端开源JS框架和库

1626
来自专栏DeveWork

解决iOS 版Safari 中浮动(float)导致页面右侧偏移的bug

长时间没写CSS代码就是生疏了啊!昨天在用ipad 调试最新的主题的时候遇到了一个坑,现在写在这里记录下——iOS 版Safari 中浮动(float)导致页面...

1756
来自专栏友弟技术工作室

(效率人生)MAC必备工具Alfred入门使用前言如何获取Alfred如何打开AlfredGeneral(通用界面)Features(特性界面)Advanced(高级设置)

1. General:通用; 2. Features:特性; 3. Workflows:工作流; 4. Appearance:外观; 5...

651
来自专栏编程软文

前端UI框架Ant Design Pro

一直忙于工作,也没时间总结。现在有点零散时间把之前做的笔记整理一下。 目前项目使用的技术栈是,前端UI框架Ant Design Pro,数据交互使用react,...

1962
来自专栏张善友的专栏

将我的 Windows Phone 应用程序更新到 Windows Phone 8

[原文发表地址]  Updating my Windows Phone App to Windows Phone 8 [中文原文地址] 将我的 Windows ...

1827
来自专栏有刻

Mac 小记 — iTerm2、Zsh、Homebrew

38611
来自专栏Java进阶架构师

周末学不动了,推荐五款小众实用的工具,请查收(内有大波妹福利)

这个确实好用,作为正在通往架构师路上的我们没有几台电脑怎么行?台式机、笔记本,都放在写字台上,笔记本内置键盘鼠标,台式机则有一套无线键鼠。经常需...

773
来自专栏肖洒的博客

jeklly+Github pages 添加评论

之前的个人博客主要是fork了其他人的源码。基于Jekyll+Github pages。在此基础上改了一些东西,适合自己的才是最好的嘛。最后才准备做评论这方面的...

411
来自专栏MelonTeam专栏

Android短视频边下边播详解

短视频作为一种常见的富媒体信息载体已经在移动互联网上得到非常普遍的应用,比如Snapchat、微信、手Q日迹等。由于手机网络流量珍贵且带宽有限,应用通常不会直接...

1.1K10

扫码关注云+社区