2020年08月_xyphf_和派孔明

12月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创 H5页面直接扫码二维码插件

H5页面直接扫码二维码插件https://github.com/wkl007/vue-scan-demo

2020-08-31 12:53:40 2288

原创 WebRTC之搭建coturn服务遇到的问题【转】

https://blog.csdn.net/qq_28880087/article/details/106960293

2020-08-16 14:02:46 1035

原创 vue.config.js webpack配置 px2rem-loader自适应处理

config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('sv...

2020-08-11 14:10:37 3134

原创实现1V1音视频实时互动直播系统十二、第十一节共享远程桌面

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

2020-08-06 23:49:07 598 1

原创实现1V1音视频实时互动直播系统十二、第十节直播客户端的实现

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

2020-08-06 22:40:58 420 5

原创实现1V1音视频实时互动直播系统十二、第九节直播客户端的实现

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

2020-08-06 21:03:10 728

原创实现1V1音视频实时互动直播系统十二、第八节 WebRTC客户端的实现

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

2020-08-06 00:59:44 414

原创实现1V1音视频实时互动直播系统十二、第七节 WebRTC客户端的实现

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

2020-08-05 22:02:10 702

原创实现1V1音视频实时互动直播系统十二、第六节 WebRTC客户端状态机及处理逻辑

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

2020-08-05 01:12:38 549

原创实现1V1音视频实时互动直播系统十二、第五节再论CreateOffer

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

2020-08-05 00:07:41 580

原创实现1V1音视频实时互动直播系统十二、第三节直播系统中的信令及其逻辑关系

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

2020-08-04 21:04:13 1184

原创实现1V1音视频实时互动直播系统十二、第二节再论RTCPeerConnection

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

2020-08-04 00:47:12 655

原创实现1V1音视频实时互动直播系统十二、第一节 STUN_TURN服务器搭建

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

2020-08-03 23:13:02 1036

原创 WebRTC核心之SDP详解十一、第三节 WebRTC中Offer_AnswerSDP

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

2020-08-02 22:08:02 1559

原创 WebRTC核心之SDP详解十一、第二节 WebRTC中的SDP

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

2020-08-02 19:20:56 1575

原创 WebRTC核心之SDP详解十一、第一节 SDP规范

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

2020-08-02 17:52:57 1204 1

原创端对端1V1传输基本流程十、第五节获取 offer/answer 创建的 SDP

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

2020-08-02 16:24:21 879 1

原创端对端1V1传输基本流程十、第四节本机内的1:1音视频互通

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

2020-08-02 15:11:28 753 1

原创端对端1V1传输基本流程十、第一节媒体能力协商过程

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

2020-08-02 03:16:35 1545

原创端对端1V1传输基本流程十、第三节一对一连接基础流程

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

2020-08-02 02:00:12 1089