WebRTC开发者社区为开发者提供最新最全的WebRTC资料
目录
  • 首页
  • WebRTC概念与基础
  • WebRTC项目与应用
  • WebRTC教程资料
  • WebRTC开发资源
  • WebRTC源码分析
  • WebRTC服务端开发
  • WebRTC网络与通信
  • WebRTC编码与解码
  • WebRTC问题与缺陷
  • WebRTC-Androd端开发
  • WebRTC-RFC文档
  • WebRTC音频处理
  • WebRTC-Mediasoup
  • FFMpeg音视频处理
  • H264编解码基础
  • openCV相关

结合 AppRTC 源码分析 WebRTC 建立连接的过程

2019-11-28 08:08:49

这两年来,WebRTC 越来越频繁地出现在人们的视野,在在线教育、在线医疗等领域的应用也越来越多。大家研究 WebRTC 的热情也越来越高涨,不过 WebRTC 的入门门槛个人觉得稍微有些高,特别是各种概念,比如 NAT 穿越,ICE、STUN、TURN、Signaling server等,刚开始可能会觉得比较繁杂,不易理解。然后建立连接的整个过程,异步调用比较多,很容易搞混。那么这篇文章里我们会根据 WebRTC 的官方 demo AppRTC 的 iOS 版本来分析一下 WebRTC 从进入房间到建立音视频连接的过程,为了便于了解,我们本次的讨论不涉及到底层的具体实现。

1. 相关概念

我们首先来简单地了解几个概念:

1.1 NAT 穿越(NAT Traversal)

因为 WebRTC 是 P2P 的,很多时候 peer 是隐藏在 NAT 之后,没有外网的 IP 地址,如果两个 peer 都在 NAT 后面,都没有外网的 IP (或者说都不知道自己的外网 IP),是无法建立连接的。那么 NAT 穿越就是用来解决这个问题的,NAT 穿越也俗称 “P2P 打洞”。常见的两种穿越方式是 STUN 和 TURN。

 

More...

全面进阶 H5 直播

2019-11-28 01:18:40

视频格式?编码?

如果我们想要理解 HTML5 视频,首先需要知道,你应该知道,但你不知道的内容?那怎么去判断呢? ok,很简单,我提几个问题即可,如果某些童鞋知道答案的话,可以直接跳过。

  1. 你知道 ogg,mp4,flv,webm(前面加个点 .)这些叫做什么吗?
  2. 那 FLV,MPEG-4,VP8 是啥?
  3. 如果,基友问你要片源,你会说我这是 mp4 的还是 MPEG-4 的呢?

当然,还有一些问题,我这里就不废话了。上面主要想说的其实就两个概念:视频文件格式(容器格式),视频编解码器(视频编码格式)。当然,还有另外一种,叫做音频编解码器。简而言之,就是这三个概念比较重要:

  • 视频文件格式(容器格式)
  • 视频编解码器(视频编码格式)
  • 音频编解码器(音频编码格式)

这里,我们主要讲解一下前面两个。视频一开始会由两个端采集,一个是视频输入口,是一个音频输入口。然后,采集的数据会分别进行相关处理,简而言之就是,将视频/音频流,通过一定的手段转换为比特流。最终,将这里比特流以一定顺序放到一个盒子里进行存放,从而生成我们最终所看到的,比如,mp4/mp3/flv 等等音视频格式。

视频编码格式

视频编码格式就是我们上面提到的第一步,将物理流转换为比特流,并且进行压缩。同样,它的压缩编码格式会决定它的视频文件格式。所以,第一步很重要。针对于 HTML5 中的 video/audio,它实际上是支持多种编码格式的,但局限于各浏览器厂家的普及度,目前视频格式支持度最高的是 MPEG-4/H.264,音频则是 MP3/AC3。(下面就主要说下视频的,音频就先不谈了。)

目前市面上,主流浏览器支持的几个有:

 

More...

Web 直播流的解析

2019-11-28 01:17:49

Web 进制操作是一个比较底层的话题,因为平常做业务的时候根本用不到太多,或者说,根本用不到。

老铁,没毛病

那什么情况会用到呢?

  • canvas
  • websocket
  • file
  • fetch
  • webgl
  • …

上面只是列了部分内容。现在比较流行的就是音视频的处理,怎么说呢?

如果,有涉及直播的话,那么这应该就是一个非常!非常!非常!重要的一块内容。我这里就不废话了,先主要看一下里面的基础内容。

 

More...

RTMP H5 直播流技术解析

2019-11-28 01:17:08

本篇主要聚焦于 RTMP 直播协议的相关内容,也就是说,本篇将会直接进行实际操作 Buffer 的练习和协议的学习。

RTMP 是什么

RTMP 全称即是 Real-Time Messaging Protocol。顾名思义就是用来作为实时通信的一种协议。该协议是 Adobe 搞出来的。主要是用来传递音视频流的。它通过一种自定义的协议,来完成对指定直播流的播放和相关的操作。和现行的直播流相比,RTMP 主要的特点就是高效,这里,我就不多费口舌了。我们先来了解一下 RTMP 是如何进行握手的。

RTMP 握手

RTMP 是基于 TCP 三次握手之后的,所以,RTMP 不是和 TCP 一个 level 的。它本身是基于 TCP 的可靠性连接。RTMP 握手的方式如图:

image.png-50.3kB

 

More...

WebRTC 直播时代

2019-11-28 01:04:37

WebRTC 全称为:Web Real-Time Communication。它是为了解决 Web 端无法捕获音视频的能力,并且提供了 peer-to-peer(就是浏览器间)的视频交互。实际上,细分看来,它包含三个部分:

  • MediaStream:捕获音视频流
  • RTCPeerConnection:传输音视频流(一般用在 peer-to-peer 的场景)
  • RTCDataChannel: 用来上传音视频二进制数据(一般用到流的上传)

但通常,peer-to-peer 的场景实际上应用不大。对比与去年火起来的直播业务,这应该才是 WebRTC 常常应用到的地方。那么对应于 Web 直播来说,我们通常需要两个端:

  • 主播端:录制并上传视频
  • 观众端:下载并观看视频

这里,我就不谈观众端了,后面另写一篇文章介绍(因为,这是在是太多了)。这里,主要谈一下会用到 WebRTC 的主播端。 简化一下,主播端应用技术简单可以分为:录制视频,上传视频。大家先记住这两个目标,后面我们会通过 WebRTC 来实现这两个目标。

 

More...

WebRTC:一个视频聊天的简单例子

2019-11-27 12:24:31

在这篇文章中:

  • 一、相关API简介
  • 二、信令交换
  • 三、候选地址交换服务
  • 四、音视频采集
  • 五、音视频发送、接收
  • 六、完整代码
  • 七、写在后面
 

More...

从头到脚撸一个多人视频聊天 — WebRTC 实战(一)

2019-11-27 12:17:35

【 从头到脚 】会作为一个系列文章来发布,它包括但不限于 WebRTC 多人视频,预计会有:

  • WebRTC 实战(一):也就是本期,主要是基础讲解以及一对一的本地对等连接,网络对等连接。

  • WebRTC 实战(二):主要讲解数据传输以及多端本地对等连接、网络对等连接。

  • WebRTC 实战(三):实现一个一对一的视频聊天项目,包括但不限于截图、录制等。

  • WebRTC + Canvas 实现一个共享画板项目。

  • 作者开源作品 ???Vchat — 一个社交聊天系统(vue + node + mongodb) 的系列文章

 

More...

WebRTC实现p2p视频通话

2019-11-27 11:59:54

简介

目的 帮助自己了解webrtc 实现端对端通信
  # 使用流程
  git clone https://gitee.com/wjj0720/webrtc.git
  cd ./webRTC
  npm i
  npm run dev

  # 访问 127.0.0.1:3003/test-1.html 演示h5媒体流捕获
  # 访问 127.0.0.1:3003/local.html 演示rtc 本地传输
  # 访问 127.0.0.1:3003/p2p.html 演示局域网端对端视屏    

More...

实时音视频WebRTC介绍

2019-11-27 11:58:06

在这篇文章中:

  • 什么是 WebRTC
  • WebRTC使用要求
    • 1. 支持WebRTC的Web运行环境
    • 2. HTTPS
    • 3. 数据对象
  • WebRTC 流程
  • WebRTC 坑点
  • 排查手段
    • 设备拿不到
    • 画面显示不了
    • 回声
    • 网络
    • 画面模糊
 

More...

WebRTC GItHUB

2019-11-27 11:55:58

https://github.com/webrtcHacks/adapter

 

More...

last
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
next
  • 分类目录

    • WebRTC概念与基础 (252)
    • WebRTC项目与应用 (33)
    • WebRTC教程资料 (38)
    • WebRTC开发资源 (13)
    • WebRTC源码分析 (19)
    • WebRTC服务端开发 (27)
    • WebRTC网络与通信 (43)
    • WebRTC编码与解码 (15)
    • WebRTC问题与缺陷 (2)
    • WebRTC-Androd端开发 (2)
    • WebRTC-RFC文档 (1)
    • WebRTC音频处理 (6)
    • WebRTC-Mediasoup (2)
    • FFMpeg音视频处理 (3)
    • H264编解码基础 (10)
    • openCV相关 (1)
  • 最新文章

    • TensorFlow 中的通信机制 ——Rendezvous(二)gRPC 传输
    • 详解|SRT编码器中Rendezvous模式详解
    • 完整SIP/SDP媒体协商概论-ICE初始offer发送详解
    • 完整SIP/SDP媒体协商概论-ICE初始offer发送详解
    • WebRTC - ICE 过程简述
    • Webrtc delay-base-bwe代码分析(2): InterArrival模块
    • 从janus中学习webrtc的ice简单交换过程
    • WebRTC PeerConnection 建立连接过程介绍
    • P2P技术详解(三):P2P技术之STUN、TURN、ICE详解(转载)
    • WebRTC ICE 状态与提名处理
    • licode服务端总结
    • libnice调用流程分析
    • libnice调用流程分析
    • licode 学习总结
    • Licode—基于webrtc的SFU/MCU实现
    • ncnn_example
    • opencv-rtsp运动检测
    • WebRTC 基于GCC的拥塞控制(上)
    • WebRTC 基于GCC的拥塞控制(下)
    • LearningWebRTC: 拥塞控制LearningWebRTC: 拥塞控制
    • WebRTC入门(三)---- 目录结构
    • WebRTC之带宽控制部分学习(1) ------基本demo的介绍
    • webrtc视频流程
    • webrtc nack实现原理
    • webrtc QOS方法一(NACK实现)
    • webrtc源码之nack&&rtx详解
    • webrtc的rtp重传代码分析
    • webrtc QOS方法一(NACK实现)
    • WebRTC基于TransportCC和Trendline Filter的发送端码率估计(Sendside-BWE)
    • WebRTC中丢包重传NACK实现分析
  • 链接

    • WebRTC官网
    • xSky 实验室
    • 树莓派技术圈
    • 声网 Agora
    • WebRTC中文网
    • web性能权威指南
    • WebRTC官网
    • webrtc在线源码
    • webrtc在线源码
    • webrtc
    • webrtc示例
    • LiveVideoStack
    • 雷霄骅(leixiaohua1020)的专栏
  • 开源项目


Powered By xblog Copyright 0xsky.com All Rights Reserved.

Copyright WebRTC.ren All Rights Reserved.