xyphf的博客

Ubuntu 18 Nodejs环境搭建

为了避免不必要的阻力，建议您的配置运行环境和我版本号等保持同步。第一步：系统安装ubuntu18.04版本。第二步：安装nodeJS,执行apt install nodejs如果出现请输入：sudo apt-get updatesudo apt-get upgrade...

server.js'use strict'var http = require('http');var https = require('https');var fs = require('fs');var express = require('express');var serveIndex = require('serve-index');var USERCOUNT = 3;//socket.iovar socketIo = require('socket.io');..

基本格式aPromise = pc.addIceCandidate(candidate);candidate属性 说明 candidate 候选者描述信息 sdpMid 与候选者相关的媒体流的识别标签(代表每一路流，比如我们的视频video就是0) sdpMLineIndex 在SDP中的 m = 的索引值 (表示第几个m，比如说我们sdp中一共有两个，一个视频一个音频，那么视频是第1个、音频是第2个，那么引入音频的话就是2，视频就是1) username

基本格式pc = new RTCPeerConnection([configuration]);dictionary RTCConfiguration { sequence<RTCIceServer> iceServers; RTCIceTransportPolicy iceTransportPolicy; RTCBundlePolicy bundlePolicy; RTCRtcpMuxPolicy rtcpMuxPolicy; DOMString peerIden

https://blog.youkuaiyun.com/qq_28880087/article/details/106960293

上节我已经将一对一的直播的整个过程与实现给大家介绍完了，那么下面我们就来留个作业 ：看如何在我们直播系统中增加共享远桌面，其中共享远程桌面这个API我们此前已经做了介绍了，这里我们再来回顾一下，基本格式var promise = navigator.mediaDevices.getDisplayMedia(constraints);与我们获取音视频基本的API基本上是一致的，这里获取桌面就是getDisplayMedia，后面的参数也是constraints，有一个限制，constr.

今天我们继续完成我们上节没有完成的任务，上节我们已经将连接和信令的处理逻辑都处理完成了，今天我们来完成媒体协商。那么首先我们要写一个媒体协商的call方法，这个call方法也不干什么特别重要的事，它就是创建一个Offer,然后最终这个Offer创建成功之后通过端对端消息发送给对端，如果我们想创建这个Offer,那首先我们要判断一下我们的状态，那必须是要在joinconnction这个状态下我们才能调用call；而这个call是必须在调用者，如果两端的话调用者，如果是两端的话，调用者才能调用这个call,就是

我们今天继续实现直播客户端的PeerConnection这个代码，上节我们只是将conn这个函数实现了一大半，在这里我们首先与这个信令服务器建立连接，然后将joined、otherjoin、full、leaved、bye、disconnect、message等函数注册在这里面处于监听状态，那发送过来这些消息之后呢我们就可以收到这些消息了，还可以做相应的处理，上节课只是简单的打了一些日志，那今天我们把PeerConnection这部分完成一下，那我们就可以写一个具体的逻辑了，当我们收到不同的信令的时候去调用不

当收到otherjoin的时候，状态变成joined_conn,变成这种状态之后我们就可以做媒体协商了， socket.on('otherjoin', (roomid) => { console.log('receive joined message:', roomid, state); state = 'joined_conn'; });这时候还有一个问题，就是说我们有两个用户，这时候已经通讯完了，其中主叫方已经离开了，那这个时候留在这个房间里的用户，它变成了joined_unb

今天我们来实战实现一个直播客户端，那么在开始之前我们有几个要点要注意。注意要点网络连接要在音视频数据获取到之后，否则有可能绑定音视频流失败我们建立这个网络连接要在音视频数据获取之后，否则就有可能绑定音视频流失败，那就是说我们与信令服务器建立连接如果在获取数据之前建立的连接，那么这个时候由于我们在通讯的双方有可能音频数据和视频数据还没准备好那么这时候就已经可以开始传输信令了，你一加入的时候马上就要发送join消息相应的后面一系列的信令都开始触发，那么这时候如果数据没有准备好，所以我们在创建这个协商

今天我们来介绍直播客户端的实现，首先我们来看一下直播客户端的一个状态机，客户端与服务器直接通过信令的一个交互之后自然而然的形成一个状态机，最开始的时候状态机是处于初始化状态的，这时候当用户发送了一个join到服务端之后服务端会给它回一个joined消息，所以在客户端收到joined的消息之后就变成了加入状态，这个时候用户是可以离开房间的，当他离开的时候它又回到了初始化或者是离开状态，这个大家都比较好理解；当一个用户处于joined的状态的时候，另外一个用户又进来了，这个时候它就变成了joined_con

今天我们再来讨论一些CreateOffer这个函数，那实际在此之前我们已经使用了CreateOffer，并且将我们的媒体协商Candidate收集以及连通性检测还有就是在同一个页面中进行端对端的传输做了一个验证，那么我们今天再讨论这个CreateOffer主要是来看看这个CreateOffer还包括了哪些参数，在此之前的实验中并没有对这些参数做详细的介绍，首先是createOffer的基本格式基本格式aPromise = myPeerConnection.createOffer([options])

今天我们开始讲真正的音视频传输了，也就说将我们之前讲解的信令服务器与我们后面讲解的端到端传输过程，那么整个将他们连接到一起，这样就形成了一个真正的直播系统。看似很简单的东西，其实我们要改造的内容还是有很多的。下面我们就来分步骤的来实现我们这个一对一的直播系统。首先我们来看看整个直播系统的核心，就是信令，终端与服务器之间如何进行交互，交互之后通过信令的中转然后讲整个的逻辑串联到一起。那么在我们这个直播系统中涉及的信令其实还是蛮少的，只有几个信令，那么就简简单单的几个信令就将我们整个的业务串了起来。下面我们

在我们真正开始实现我们一对一的实时直播系统之前，我们再来看看这个RTCPeerConnection,在我们之前使用RTCPeerConnection的时候我们把这个参数设置成了null,或者不填，因为这个参数configuration本身是可以不填的基本格式pc = new RTCPeerConnection([configuration]);其实它里面可以有很多的参数，在RTCconfiguration这个结构体里有好几项，最关键的一项是iceServers,也就是说我们在建立这个RT

今天我们来进行STUN和TURN服务的搭建，我们此前已经介绍了WebRTC信令服务器的搭建，以及介绍了端到端视频的传输，在信令服务器搭建的时候我们使用的是nodeJS+socket.io并且最终一个多人的文本聊天室来验证信令服务器的可用性，第二个通过端对端的传输我们是通过我们本机内部的一个网络传输，通过一端的PeerConnection传到另一端的PeerConnection，通过第二个PeerConnection将这个视频获取出来进行展示，下面我们在介绍完这个STUN和TURN服务之后在真实网络下不同的P

在我们之前的课程中我们已经介绍了SDP的规范是什么，非常简单它分为两层，一层是会话层一层是媒体层，会话层呢，主要包括了一些这个会话的这个名字啊，目的还有这个时间呢，媒体层呢，就是一个媒体音频视频。那么在媒体层呢，又可以通过attribute属性来去对媒体作进一步的说明，这个呢就是这个SDP的规范，那么紧接着呢，我们又介绍了WebRTC中如何使用SDP的，不知道大家还记怎么记得他一共是五大项，包括了会话、网络、服务质量、加密，还有一个是这个媒体就是流相关的，对吧，一共是五项，那大家对这一块儿一定要好好看一

今天我们来看看在WebRTC中使用的SDP，在WebRTC中使用SDP相比正常的SDP规范有一些出入，那主要是为了让SDP更能适应WebRTC里面的一些设置以及会话的描述，那么下面我们来看一下，在WebRTC中的SDP组成是包括了5部分第一部分是会话元也就是会话层，这个与上节所讲的是一致的。它是最不重要的。第二、另外它有专门的网络描述信息，而不是利用以前SDP规范中媒体层的Ip地址和端口了，所以它要单独的进行网络端信息描述。第三个以前在SDP中是没有的，这个是流的相关的描述，那么在 WebR

今天我们来讲解一些SDP的具体规范，上节我们在端到端视频传输的例子里面做了一些修改，来获取到offer和answer的SDP，通过那个例子那就对SDP有了一个感性的认识，那么我们再来看看具体的SDP的规范是什么样的，其实SDP的规范非常简单，它会将SDP分成两层，第一层是会话层，会话层就相当于我们写程序时候的一个全局变量，我们写程序的时候有全局变量有局部变量，当局部变量没有设置的时候，那么我们这个全局变量在全局内都是有效的，我们在自己的函数里设置了局部变量，那么局部变量会覆盖全局变量，它也是这样一个层级

SDP(session Description Protocol)它只是一种信令服务器格式的描述标准，本身不属于传输协议，但是可以被其他传输协议用来交换必要的信息。它最主要用的地方就是在通讯之前首先进行媒体的协商，也就是说对于呼叫者它首先要创建这个offer,然后将自己的媒体信息拿到，然后通过信令转给被呼叫者，那被呼叫者收到这个信令之后要创建answer,也就是说将它自己的媒体信息也获取到，然后在通过这个信令传给这个呼叫者，这样就将这个媒体信息就交换完了，那这些媒体信息就是用SDP这个格式来描述的，那拿

上节我们学习了端对端的基本流程，如图所示，这张图看起来复杂，但是基本上可以分成三大块，第一大块就是整个媒体的协商，看A端有什么媒体能力看B端有什么媒体能力，他们直接所有的媒体取一个交集，取大家都能够识别的支持的能力，包括音频编解码视频编解码，这个采样率是多少，帧率是多少，以及网络的一些信息；第二大部分就是通过ICE对整个可连通的链路进行这个链路地址的收集，它收集完了之后进行排序和连接检测，找出双方可以连接的最优的这条线路，那么最后拿到线路之后就可以进行媒体数据的传输了，当从一端传输到另一端之后呢，另

今天我们就进入到了WebRTC学习最关键的一部分知识，那就是端对端的连接，当我们学习完这一部分知识之后，大家就可以自己实现一套实时互动直播系统了，但是这部分知识呢涉及到知识点非常多相应的学习难道也会陡然增加，所以大家 一定要做好心理准备，大家要不断的加深自己的理解，那么下面我们就开始讲解我们这部分知识。RTCPeerConnection下面我们介绍一下最关键的概念就是RTCPeerConnection，其实在一开始的时候就给大家做了一个简单的介绍，这个类是整个WebRTC的一个核心类，它是上层的一个

今天我们来介绍一下端到端连接的一个基本流程，下图就非常清楚的表达了整个A与B这两个端首先进行媒体协商、最终进行可链路的连接、最后进行媒体数据的传输，下面我们就来仔细的分析一下；首先在这张图里面有4个实体，第一个是A，也就是端到端连接的A端，然后是B端，然后是信令服务器Signal，最后是stun/turn，这个stun和turn服务用的是同一台服务器，既具有stun功能又具有turn功能，首先A是发起端也就是呼叫端，呼叫端要与信令服务器建立连接，被呼叫端B端也要与信令服务器建立连接，这样他们就可以经

打开控制台命令行，我这个是MAC，在Linux下是同样的输入sudo -i 获取权限紧接着输入ifconfig,我们去查看一下网卡，其中工作的是这个，你也可以看一下自己的是哪个，在我这里是en1输入命令抓取en1网卡的数据,输入src过滤,比如我这里ip地址,源是 192.168.1.6-xx 表示十六进制-Xs X表示ACISS码 s表示全部数据sudo tcpdump -i en1 src 192.168.1.6 -xx -Xs 0这时候我们看到数据就抓到了.

网络协议分析之前向大家介绍了很多基本的网络知识，包括NAT穿越原理，NAT类型，STUN的协议头协议体，然后这个TURN协议还有给我介绍的ICE，那么接下来这么多知识之后呢，我们只是一个理论层面的，真实的网络，是不是按照这个协议是一步一步走呢，其实我们并不知道，那么现在呢，我们就通过这个工具来抓取网络包，看一看是不是这个数据包是按照我们之前所讲的协议给一步步来的。常用工具Linux服务端用tcpdump其他端 WireShark那我们要抓取这个网络包去进行分析那首先要有非常好的工具，那么

今天我们来介绍一下ICE，那什么是ICE呢 ？那什么是ICE呢？其实下面的这张图就表达的非常清楚 ，我们来看一下，第一个是双方通信的Peer 有两台机子A和B ，他们都是在NAT之后 ，这里有两个NAT，在NAT外面有两个STUN 服务，其实也可以用一个STUN服务对吧，他们主要用于这个其中的这个一个终端去穿越NAT时候进行NAT穿越使用的。所以在这里会形成一个这个映射后的公网的IP地址。所以这两个可以是两个，也可以是一个，甚至可以是多个，那么还有一个呢，就是relay server，所以就..

今天我们来介绍一下TURN协议，那么TURN协议出现的目的是什么呢？其目的是解决对称NAT无法穿越的问题在之前我们介绍过，NAT的四种类型(完全锥型NAT (Full Cone NAT)、地址限制锥型NAT(Address Restricted Cone NAT)、端口限制锥型NAT (Port Restricted Cone NAT)、对称型NAT (Symmetric NAT))。当我们检测到一端是端口受限锥型一端是对称型或者两端都是对称型，那肯定是无法穿越的；在NAT无法穿越的时候，我们.

今天我们来介绍一些STUN协议。STUN存在的目的就是进行NAT穿越STUN 存在的目的就是进行NAT穿越，NAT有四种类型，每种类型如何穿越它的基本原理是什么，都是属于STUN协议中的一部分。STUN是典型的客户端/服务器模式。客户端发送请求，服务端进行响应RFC STUN规范RFC STUN规范中，实际上有两套STUN规范第一套叫做RFC3489/STUNSimple Traversal of UDP Through NAT它就是将STUN定义成简单的通过UDP...

今天我们讲一下NAT类型的检测，看看我们自己是属于哪种NAT类型，是否可以打洞 成功，下面我就看一下这个整体的判断逻辑，当然在这之前我要有一个限定条件，就是在我们的云端一定要部署一个STUN服务。这个STUN服务要有两个IP地址和端口，这两个IP地址的作用稍后我们会在逻辑判断的过程中给大家介绍。首先客户端要发送一个ECHO请求给服务端，服务端收到请求之后会通过同样的IP地址和端口在给我们返回一个信息回来。那在客户端就要等这个消息回复，那么设置一个超时器，看每个消息是否可以按时回来，那如果我们发送

今天我们来看一下NAT穿越的原理NAT一共有四种类型，分别是完全锥型NAT (Full Cone NAT)、地址限制锥型NAT(Address Restricted Cone NAT)、端口限制锥型NAT (Port Restricted Cone NAT)、对称型NAT (Symmetric NAT)，对NAT穿越来说，其实每一种穿越都不一样，下面我就来看一下每一种不同类型，如何进行NAT穿越。完全锥型NAT完全锥型是非常简单的 ，左边是内网的主机，它有自己的内网IP地址和端口 ，通过防.

今天我们来介绍WebRTC传输相关的基本知识，那么在介绍这些基础知识之前 ，我们首先要清楚使用WebRTC的目的以及解决的根本问题是什么？那么WebRTC首先要解决的是两个浏览器之间如何实现音视频的实时互动，对于底层来说就是如何实现两个端点之间高效的网络传输，为了解决这个问题WebRTC引入了很多的传输协议，下面我们就来介绍一下。NAT (Network Address Translator)下面我们以传统的邮件作为例子，给大家说明NAT是什么？比如A和B两个人要发信，那B告诉A它在某个楼的某层

今天我们使用信令服务器来实现一个简易的聊天室。安装npm install --save socket.io http https express serve-index log4jssocket.js/** * Module dependencies. */var Emitter = require('events').EventEmitter;var parser = require('socket.io-parser');var url = require('url').

WebRTC是没有将信令服务纳入到整个的规范中，更多的是规范了客户端这边的所有的过程，那为什么没有将信令服务器放到规范中，各个公司它的业务模型都是不一样的，很难将每个公司的信令都统一订成一套规范。所有与其这个不如让他们各自自己去定义。只有是我必须的这些信息的交换可以实现，其他的业务你可以自己去定义，这个比较灵活，各个公司也比较容易接受这套方案。其实这个对整个WebRTC的推广其实是有好处的。下面我看看 信令服务器的作用。如果我们没有信令服务器，WebRTC之间是肯定不能通信的，这个大家是

今天我们学习用socket.io发送消息，socket.io发送消息发送消息的情况非常多 ，大概有十来种情况。其中有四五项是我们要清楚和了解的。给本次链接发送消息socket.emit()这表示客户端发送了一个消息给服务端 ，服务端收到这个消息之后给了一个callback. 也就是一个返回，比如说我要加入房间，当我加入之后他给我回一个已经加入成功。只是给我本人发的。我收到加入成功之后，我就可以做后面的逻辑处理了。这样就形成了一个异步的操作。给某个房间内所有人发消息io.in(room

今天我学习一下通过WebRTC捕获桌面，其实这个功能在我们日常的直播系统中，基本上都必备的一个功能。首先我们来看一下获取桌面的APIgetDisplayMedia基本格式var promise = navigator.mediaDevices.getDisplayMedia(constraints);constraints可选constraints中约束与getUserMedia函数中的一致。下面我们来实践一下：这个功能在chrome中是实验性的项目，所以只有对最新的.

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

今天我们介绍 一下如何通过WebRTC录制媒体流，实际上就是录取我们之前获取的实时音视频数据，当然它还可以录制桌面的数据，对于桌面我们会在后面的课程中给大家介绍，我们现在就把她理解成录制音视频数据。在这里我们要介绍一个重要的类，叫MediaRecoder这个类就是用来实现媒体流的录制，它有很多的方法和事件，我们一个个来看，首先我们看一下基本格式,var mediaRecorder = new MediaRecorder(stream,[options]);我们传入一个参数，也就是我们通

今天我们来重点介绍一些MediaStream的方法和事件在这些方法中主要是和Track相关的，此前我们已经介绍过了。在webrtc中包括了流的概念和轨的概念。在一个媒体流中可以包含很多的媒体轨，音频媒体轨，视频媒体轨。MediaStream.addTrack()MediaStream.addTrack()表示向流媒体中加入不同的轨MediaStream.removeTrack()将媒体流中不想要的媒体轨移出去MediaStream.getVideoTracks()将媒体流中.

今天我们介绍一下如果通过WebRTC只采取音频数据，这个功能之前已经给大家做了一些介绍，但是上次的介绍是在videoplay，也就是video标签里面做的实验。这次我们实验audio标签，这有什么好处呢？就是直播系统里面有很多的应用，并不希望有视频，只希望有音频就可以了，比如说喜马拉雅，它所有的内容都是通过音频的形式展现出来的。所有我们通过只 获取音频是什么样子的 。将constraints里面的audio设置为truegotMediaStream方法里面改成获取音频流index.h

今天我们讲一下从视频中获取图片，比如我们正在直播的视频，从中获取某一帧的视频帧。如果我们共享桌面，我们也可以截取桌面的图像，我们还可以对这些图像进行一些编辑，这些都是后续的 功能了那么在浏览器中的视频中获取图片如何实现呢？其实非常简单，就是通过HTML中的canvas标签，从视频流中获取当时的帧，然后把这个帧输出成一个图片就可以了。下面我整体理一下思路。我们下面实现一下，首先要拿到音视频流，然后我们要增加两个元素，一个是按钮，这个按钮主要是像相机的快门 一样，当我点击 这个按钮的时候就拍