WEBRTC音视频通信

这张图看起来复杂，但是基本上可以分成三大块，第一大块就是整个媒体的协商，看A端有什么媒体能力看B端有什么媒体能力，他们直接所有的媒体取一个交集，取大家都能够识别的支持的能力，包括音频编解码视频编解码，这个采样率是多少，帧率是多少，以及网络的一些信息；第二大部分就是通过ICE对整个...

今天我们就进入到了WebRTC学习最关键的一部分知识，那就是端对端的连接，当我们学习完这一部分知识之后，大家就可以自己实现一套实时互动直播系统了，但是这部分知识呢涉及到知识点非常多相应的学习难道也会陡然增加，所以大家 一定要做好心理准备，大家要不断的加深自己的理解，那么下面我们就...

首先在这张图里面有4个实体，第一个是A，也就是端到端连接的A端，然后是B端，然后是信令服务器Signal，最后是stun/turn，这个stun和turn服务用的是同一台服务器，既具有stun功能又具有turn功能，首先A是发起端也就是呼叫端，呼叫端要与信令服务器建立连接，被呼叫...

输入src过滤,比如我这里ip地址,源是 192.168.1.sudo tcpdump -i en1 src 192.168.1.这表示从192.168.1.6的IP地址，端口是50043, 到这个域名 hkg12s11-in-f10.1e100.net.这样的话我们还可以加一个...

之前向大家介绍了很多基本的网络知识，包括NAT穿越原理，NAT类型，STUN的协议头协议体，然后这个TURN协议还有给我介绍的ICE，那么接下来这么多知识之后呢，我们只是一个理论层面的，真实的网络，是不是按照这个协议是一步一步走呢，其实我们并不知道，那么现在呢，我们就通过这个工具...

第一个是双方通信的Peer 有两台机子A和B ，他们都是在NAT之后 ，这里有两个NAT，在NAT外面有两个STUN  服务，其实也可以用一个STUN服务对吧，他们主要用于这个其中的这个一个终端去穿越NAT时候进行NAT穿越使用的。所以在这里会形成一个这个映射后的公网的IP地址。...

在之前我们介绍过，NAT的四种类型(完全锥型NAT (Full Cone NAT)、地址限制锥型NAT(Address  Restricted Cone NAT)、端口限制锥型NAT (Port Restricted Cone NAT)、对称型NAT (Symmetric NAT...

今天我们来介绍一些STUN协议。STUN 存在的目的就是进行NAT穿越，NAT有四种类型，每种类型如何穿越它的基本原理是什么，都是属于STUN协议中的一部分。STUN是典型的客户端/服务器模式。它就是将STUN定义成简单的通过UDP进行NAT穿越的一套规范，也就是告诉你如何一步一...

今天我们讲一下NAT类型的检测，看看我们自己是属于哪种NAT类型，是否可以打洞 成功，下面我就看一下这个整体的判断逻辑，当然在这之前我要有一个限定条件，就是在我们的云端一定要部署一个STUN服务。这个STUN服务要有两个IP地址和端口，这两个IP地址的作用稍后我们会在逻辑判断的过...

NAT一共有四种类型，分别是完全锥型NAT (Full Cone NAT)、地址限制锥型NAT(Address  Restricted Cone NAT)、端口限制锥型NAT (Port Restricted Cone NAT)、对称型NAT (Symmetric NAT)，对N...

那么WebRTC首先要解决的是两个浏览器之间如何实现音视频的实时互动，对于底层来说就是如何实现两个端点之间高效的网络传输，为了解决这个问题WebRTC引入了很多的传输协议，下面我们就来介绍一下。下面我们以传统的邮件作为例子，给大家说明NAT是什么？比如A和B两个人要发信，那B告诉...

今天我们使用信令服务器来实现一个简易的聊天室。npm install --save socket.socket.* Module dependencies.var Emitter = require('events').var parser = require('socket.v...

WebRTC是没有将信令服务纳入到整个的规范中，更多的是规范了客户端这边的所有的过程，那为什么没有将信令服务器放到规范中，各个公司它的业务模型都是不一样的，很难将每个公司的信令都统一订成一套规范。所有与其这个不如让他们各自自己去定义。只有是我必须的这些信息的交换可以实现，其他的业...

今天我们学习用socket.io发送消息，socket.io发送消息发送消息的情况非常多 ，大概有十来种情况。其中有四五项是我们要清楚和了解的。socket.这表示客户端发送了一个消息给服务端 ，服务端收到这个消息之后给了一个callback. 也就是一个返回，比如说我要加入房间...

今天我学习一下通过WebRTC捕获桌面，其实这个功能在我们日常的直播系统中，基本上都必备的一个功能。var promise = navigator.mediaDevices.constraints中约束与getUserMedia函数中的一致。这个功能在chrome中是实验性的项目...

这一节我来实际操练一下，看看具体如何通过MediaRecorder来录制 音视频数据。在开发之前我们将整个流程给大家梳理一下，首先我们需要加几个标签，第一个标签是video标签，也就是说当我们开启录制之后，通过第二个video标签将录制的视频播放出来，所以我们要加第二个video...

今天我们介绍 一下如何通过WebRTC录制媒体流，实际上就是录取我们之前获取的实时音视频数据，当然它还可以录制桌面的数据，对于桌面我们会在后面的课程中给大家介绍，我们现在就把她理解成录制音视频数据。videoBitsPerSecond指的是视频的码率，视频的码率对于我们一般的存储...

在这些方法中主要是和Track相关的，此前我们已经介绍过了。在webrtc中包括了流的概念和轨的概念。在一个媒体流中可以包含很多的媒体轨，音频媒体轨，视频媒体轨。MediaStream.MediaStream.MediaStream.MediaStream.MediaStream...

这个功能之前已经给大家做了一些介绍，但是上次的介绍是在videoplay，也就是video标签里面做的实验。这次我们实验audio标签，这有什么好处呢？就是直播系统里面有很多的应用，并不希望有视频，只希望有音频就可以了，比如说喜马拉雅，它所有的内容都是通过音频的形式展现出来的。所...

今天我们讲一下从视频中获取图片，比如我们正在直播的视频，从中获取某一帧的视频帧。其实非常简单，就是通过HTML中的canvas标签，从视频流中获取当时的帧，然后把这个帧输出成一个图片就可以了。下面我整体理一下思路。我们下面实现一下，首先要拿到音视频流，然后我们要增加两个元素，一个...