013-打通小程序到云直播开发-1原创

金古奇观咱们竖接上一回，另外咱们在上一小节已经申请了腾讯云直播啊，并且配置好了我们的播放域名推流域名，生成了播放地址和我们的推流地址，那在这一小节中啊，咱们就要连上我们的小程序，咱们来试一试我们能不能把我们的呃自己啊进行直播啊，并且通过我们的播放域名来看我们自己的直播，那这样的话呢，为了演示这个功能呀，哥们需要呀，构建这样一个简易的小程序啊，大家可以看一下我们一会儿要做的小程序的界面超级简单，但他必须能够帮助我们来验证刚才两个地址是不是好用的，哎，我们的这个功能是这样的，我们在小程序界面中啊，会有两个按钮，这两个按钮非常简单，里面就是一个我是主播，哎，另一个就是我是关注啊，那这样的话呢，我们一会儿啊，我们让一个人登录这个小。

腾序运行小程序之后，然后点这个主播按钮，它就跳转到我们的主播界面呢，这个时候我们这个人就开始直播了，诶他在这里直播啊，这个图非常抽象，那另一个人的话呢，他点进去我们的小程序，他点的是我是观众这一个按钮，然后在我是观众这个按钮，他就能看到，哎，刚才那个人的一个直播状态，哎，能够看到他的这个影像，对吧？哎，这是咱们平时见直播的，所以我们应该是在主播这个页面中，我们应该是把这个人的视频，诶应该是往上走推流嘛，走入我们的腾讯服务器，所以我们的腾讯服务器云音直播在这里应该推到我们这个腾讯云直播的这个服务器中，然后我们看直播的这个人，应该是从服务器中生成的那个播放域名来观看这个视频，诶这就是我们小程序的一个基本的一个雏形，当然这个东西只是为了做演示，咱们仅仅的是在我们不。

介入于其他条件下，我们能不能打通小程序到云直播，所以这一节的内容啊，就是我们的打通小程序到云直播，那咱们可以呀，快速的构建小程序的这样一个界面啊，并且绑定好事件，能够实现我们的页面联动跳转，然后咱们在引入小程序的组件，哎，咱们来看看在这个开发过程中有什么需要注意的，那接下来打开我们的小程序的代码，还是科之前用的这个小程序代码，咱们在这里哈，在生成我认为至少需要三个页面，三个页面就是刚才我们所说的啊，一个主播的页面啊，然后一个观众的页面，而且还有我们的首页，能够看到这两个按钮，分别点击不同的按钮来进来啊在这个过程中啊，很多人会说，哎呀坑，将来就这一个直播间嘛，哎，咱们先把一个给搞通了，对吧，先走完第一步，你别想着一下子走完这100步啊，所以咱们在这个APP里精神中啊，咱们是不是得生成几个页面呀，我。

首先要生成一个我们的首页home页面，咱们生成首页的方式啊，你可以在配置文件夹下新建文件夹啊，然后的话在新建配置，你也可以在这里是不是直接写一个Jason诶，然后我们保存之后，Home文件夹就会自动的创建出来，哇，太方便了是吧？啊，然后咱们再来再生成两个页面，就咱们的home页面嘛，然后咱们再生成一个什么主播页面，主播页面咱们叫owner吧，就是我们这个直播间的拥有者，然后再来生成一个观众这样一个页面，我们在这里再来一个player啊，我们的这个观众啊页面player页面，好，我们把这两个页面呢，咱们给它写好了之后来列为一保存，咱们看一下是不是这块就出现了这样三个页面了，此时我们的home是咱们的首页，那这一会儿的话，咱们来到我们的这个home页面中，诶，有时候它不好用，你重新编译一下啊，这样的话从首页开始，我们的首页中的话呢，啊非常简单，就两个按。

钮，两个小button按钮，两个button按钮，一个是我是主播，嗯，在这里咱们为了标识一下吧，咱们给它加上一个type primary啊，绿色的这个值，然后再来一个我是观众，好，等一会的话，咱们要对号入座才能看见是不是呀？哎，在这里这个就是default，可以不用写这个type值，这样的话我们点击上面我是主播，咱们跳到这个owner页面来，点击我是观众，跳到我们的player页面来在小程序中绑定事件，这可是咱们的拿手好戏了，也就是咱们在这里肯定得知道小程序最基本的这些工作，对吧？哎，在这还到我们的这个tap，就是我们的owner，往我们的owner去跳转的，我绑定好，然后在我们的这个函数里面，咱们怎么去写啊，是不是用上我们的跳转页面的方法，哎，在这里Wx.navigate to到哪个地方呀，配置文件夹下的owner下面的owner.js好。

一保存之后咱们可以测试一下，一点击我是主播，咱们是不是就得跳转到我的主播这个页面来来保存之后我们来测试一下这个代码啊，现在是没有问题的，我们来跳转测试一下，跳转走OK是没有问题的了，那接下来咱们是不是如法炮制，哎，把下面这一个跳转到观众页面，也一样的给它写好了，哎，这个大家函数的名字咱们给它换一个，咱们是往这个player这个页面进行跳转的，所以我在home JS中我写好这个函数，然后咱们在这里啊进行往player这个页面进行跳转啊，那这样的话呢，我们wx navigate to我们的player，哎，好了，把这两个呢，咱们都测试一下，运行之后，哎，咱们在这里重新的测试一遍，我是主播，跳转没有问题，然后我是观众跳转，诶在这里的话呢，重新编译一下哈，有时候这个小程序啊，可能有点小小的问题哈，重新编一下我们的player这块也都用。

没有问题了，所以说点击主播来到我们的owner啊，点击观众来到我们的player这个页面，咱们就说到这里，那接下来就是咱们在引用我们的小程序组建了，我们的这个小程序组建啊，一共有两个啊在这里啊，打开小程序的官方网站，这个开发者网站啊，然后在这里输入搜一个哈，叫live，什么push设我们这块应该在在之前我们介绍过一下啊，就是我们的这个组件非常关键啊，就是如果你想用这个组件，客人再次强调一遍，这个组件必须是让你的企业开发小程序账号啊，能够开通我们的这个类目啊，里面不管是社交直播的，还是什么教育在线视频课程的，反正你开通的其中的一个，并且打开实时录制音视频流，实时播放音视频流两个开关才能够去使用这个组件，也不要抱任何侥幸的心理，说坑我之前都不行，但是我就想运用组件，我想看看效果可不可以呢，完全。

不可以，就是在模拟器上都不可以列外，你说我就在模拟器上玩一玩都不行吗？那也不行啊，所以在这里哈，这个组件要想使用啊，就必须在开通权限，如果你列微啊真的没有权限的话呢，那你先可以看着合文视频啊走一遍啊，等你真正有了账号权限之后呀，你再来看也不迟好类务铺设组件和类务普列组件两个从名字上就能区分出来，铺设就是我们的推啊，所以我们用这个组件是把我们小程序录制的我们这个人的视频流，音频流，然后我们推到我们给他的这个地址上，就是我们的推流地址上，推到我们的腾讯云直播的服务器上，然后再通过player这个组件来进行播放就可以了啊。所以两个组件用起来其实比较简单，只不过它也有很多的属性啊，咱们可能再跟大家去看一下，有些属性啊，得需要注意一下，可能会告诉大家的，嗯，在这里这个怎么申请这块咱们就不说了啊，因为咱们。

在之前已经说过这个事情了，所以我想往下走走走，诶这个组件的话呢，有非常多的属性，有UR这个属性，URL这个属性是你的推流地址，而且注意了哈，划重点只支持RTMP，如果咱们申请的这个腾讯云直播它不支持RTMP格式，那咱们就白玩了啊，但索性啊这个是支持的啊，所以这是一个好事，嗯，没有问题，那接下来就是我们的mode的模式，你要录制什么标清、高清超清实时通话的，诶选中这个mode模式，我们在这里的话，用这个RTC实时通话模式啊，Auto push一定要打开，而这个值的话呢，它一开始默认值是个false，也就是说你已经点开我要直播之后，你不需要再点一下按钮，所以这个直接就自动推流，只要咱们跳转到我们的主播页面去，我们就直接自动的开始采集摄像头，采集我们的麦克风的数据，直接推到我们的腾讯。

直播服务器上，所以这个auto push属性我们要给它设置成触啊，这样的话呢，我们会让我们的视频流音频流直接开始啊自动推流，嗯，Mute就是是不是要静音哎，这个值默认是false，所以咱们在这就让它false就行了，哎开启摄像头索性这两个值啊都是触，所以咱们在这就不用管它的什么开启摄像头自动聚集啊，就不用管了，画面方向这个好理解，什么垂直的水平的啊，大家都能知道什么意思诶这个很关键了哈，美颜是不是开启啊，就是腾讯这块还是很良心的啊，小程序中啊，咱们这个内部铺设组件啊，知道说作为一个主播啊，这个开启美颜是非常关键的，要不然谁看你直播呀啊，所以坑们一会的话，一定要把这个beauty这个值啊设置成酒哎最高美颜师，然后大家来感受一下啊，然后这个美白whiteness是咱们这个职业的去酒哎最美白的状态下啊，所以在这大家自己去玩的时候可以自己试一试啊，不开是什么样子的。

啊，后面这块是宽高比啊，就是你录制的啊，就是你实时直播的这个视频的宽高比，还有什么最小码率，最大码率的一个设置，咱们都可以保持这些值啊，是默认的，还有什么高音质低音质的都可以保持是默认的啊高音质的，嗯，然后后面这些什么进入后台时这个推流等待画面啊，如果你设置一下，就是在一开始的时候，它可能会这个没有实时直播，那这个时候它可能会出现一个等待画面，嗯，Zoo幕式调整这个焦距啊，Zoo母这一块，还有我们的设备的话呢，是采取了你的前置摄像头还是后置摄像头啊，一般我们作为主播直播的话呢，我们开启的是我们的啊，前置摄像头默认是前置的啊，如果你要开启后置的话，你传一个bug就可以了，当然你也可以在你的画面中，你是不是动态的改变这个值，这样的话我们就能够是开启前置还是后置啊，就是我们所谓的什么是一个功能反转的啊，就是我们前置后置的这样一个反转摄像机的功能。

能传一个动态的值来控制，点一个按钮就可以了啊，就反转了，OK，咱们一会儿可以去试一试都啊还有是不是进入后台的静音这些啊，后面有些属性的话就不太重要了啊，咱们在这就不再去细说了，另外啊，那咱们来看一下比较重要的这个信息，就是我们再往下走一走，呃，在这个地方啊，还有这个地方的话，这些都是一些美颜信息，大家可以自行的去设置一下哈，什么光滑美颜，自颜美颜的，还有一些什么这个啊，滤镜色彩滤镜的哈，你可以自己设置一下，后面这个很重要B的state change，就是我们在直播推流的时候，因为它这个这个铺设这个组件会经历各个状态，比如说我已经准备好开始推流了啊，我第一帧已经采取完了，我已经推到服务器上诶等等的，所以这个配绑定完事件之后，咱们再获取他这个回调能够获取里面一个code的值，这个code的值啊非常关键，因为一会儿如果咱们推流失败，这个扣的都会有反馈啊是急急急。

二零一一二零零二二零零三都分为代表什么值啊，咱们全靠他的列外很重要的啊，还有这块是我们的网络状态的一个毁掉了通知啊，说这个事件要绑好，还有这块压根就是整个铺设组件之前用错了，就是在这会渲染这个什么呀，Error走这个事件的啊，那咱们在这里要通过他呢，还要进行绑定好试件，这样才能够正常的进行工作，嗯，这个非常关键，后面还有什么背景音乐播放完成等等的，还有采集我们麦克风音量大小的毁掉啊，这些的话咱们就不去用它了，咱们最关键的就是来使用我们的铺设组件来采集我们主播的音视频啊，我们可以反转摄像头啊，我们可以在这里啊监听我们的speed的change，来看一下我们此时这个状态都对不对劲，好，接下来一定要注意一件事情，你把这所有的功能一会儿都给我写完之后，你肯定特别着急，说我要在模拟器上先试一把，很遗憾，开发者工具的话呢，是不支持的。客人当时第一次用这个组件的时。

之后呢，哎呀，真是特别难受啊，因为老是在我们的这个软件上模拟器上跑不通啊，哎，我就纳闷了哈，我权限都开了，它怎么就不好用，我没看见这句话啊，开发工具上赞不支持，但是当时给我急的满裤兜子里面都是汗，后来也不知道到底是汗还是什么啊，反正当时一个人捧着金瓶梅都看不下去，特别难受啊。好了，这个工具不支持列位啊，自己有点数啊，所以你要在我们的真机上来运行，所以我说呀，你要进行什么呀，咱们典型的嘛，预览啊，生成二维码扫描在手机上来进行观看，那这会儿就出现的问题，在录制视频的时候，可能可能就要录制一小段我的手机的啊这个界面视频，那这样的话会插到我们这个这个录制视频里面去，到时候大家看看在我的手机啊，这个视频上啊，我这块是怎么处理的啊，这个效果是怎么样子的，所以我会有这个我的手机的一个视频的一个录制过程啊，进行录制我手机屏幕啊，大家都。

好好的来看一下就可以了，好了，接下来这些状态码，一会儿遇见了再说吧，那这样来说就没有什么了，所以这个组件啊，虽然东西挺多，大家大家好多人都已经忘了干什么用的，没关系哈，咱们接下来就把这个组件的代码的话呢，诶拿过来来试一下，就这段代码呗，Live push CT c啊，他给了一个这个代码哈，咱们可以拿过来呀，来试一下哈，来到我们的这一个哪个页面来呀，我们的owner，诶这是铺设组件，是不是是我们的owner这一块，好，咱们放在这里，然后我把这一块的话呢，咱们为了将来打开手机知道是哪个页面，我也写一写哈，我是这个主播页面，OK，保存之后，嗯，这样来说，我们的owner这个页面的话呢，哎，到时候切过来就显示它就可以了，我是主播页面大家可以看一下内铺组件地址的话呢，诶一会去找哈Mo r TC啊，咱们说的实时通话模式自动推流啊，就说一打开页面就自动开始推流了，宽框啊，咱们给它多少呢？哎，给他一个我们屏幕的100。

来VW啊，然后再来一个什么100V这样一个界面，VH保存怎么样这个效果啊，然后一会儿的话呢，咱们把这个地址给它粘过来，把这个回调函数也得写好，回调函数咱们写写成这个什么呀，你万一将来出错的话，不都在这个回调函数里面那些信息嘛，EVT啊在这里EVT啊，从刚才文档中看的话，应该是e VT detail.code的里面，是我们关键的这个code的值都在这里面呢啊，所以它才是最关键的是吧？啊然后我们可以看一下这个log制组件，还有没有什么需要注意的呀？诶刚才科文好像说了哈，我们在开启这个美颜啊，要是不开启美颜的话呢，可能嗯比较难看是吧？嗯，咱们找一下是哪个字段来着，来，是不是叫beauty这个字段呀，我能找到他啊，我们的这个字段啊，在这里beauty这个字段啊，客给了个九，Whiteness这个字段啊，也给他一个九啊，这是对自己多么的不自信才去。

要开启这样两个字段，还有一个叫什么呢？Whiteness，嗯，Whiteness字段咱们也给他一个九这一个好了，我现在都给他了，还有我们在这里我看一下这个宽个二比，咱们就在这里不用去设置了，就这样吧，所以这样来说的话呢，我们这个内部铺设组件，我们现在就唯一差了是我们的域名了啊美颜也都开启了，好接下来我们可以把这个地址的话呢，来找一找，我们当时语音直播的，我当时让你生成地址生成器啊，在这里啊，咱们还是一样的推流地址嘛，所以在这选中推流地址，这个是它默认给咱们提供的推流域名，另有当时我说你这块写成科文啊，过期时间的话呢，你随便去选好吧，在这里的话点击生成地址，大然，有人说科文跟之前的是一样的嘛，其实是一样，你会发现在这里的话呢，我们有一个RTMP，因为我记得他说的话只支持咱们的这个RTMP这个格式的是不是。

你要是其他格式的我还真的不支持呢啊，所以在这里这些格式都有，但是我们小程序端的话，只支持这个格式的，我点击了一下复制，所以扔到这里来，那将来的视频就会推到这个里面来啊，当然我们在模拟器上是无法使用的，好了，这是咱们的主播页面啊，那接下来的话，咱们再来看一下我们的什么页面呀，哎，我们的观众这个页面，大家说你看快给我演示一下呗，哎，我这个待会演示吧，因为我一会儿就是开启了之后，大家也不知道这个流儿到底推没推过去呀啊所以最关键的是咱们如果能让观众能看到，哎，这样的话就说明我们这个验证呀，也就成功了。好，咱们来到我是观众这个页面来，咱们开始打开呢，我们这个普这个WXML这一块，来咱们来找一下这个普player这个组件也是在它相邻的这个位置，这个组件也一样的啊，它呢只针对于我们国内主体如下类目的小程序开放你必。

去通过类目审核，所以说的话呢，你我当时说了，我当时用的是教育在线视频课程，并且传了相关的资质证明才能开启这个组件，所以他典型的是用来播放的，实时播放的啊，实时音视频播放的，那接下来用法的话还是一样的，哎，看SR这音视频仅支持这个FLV格式，还有一个RTP啊，有点看不出来了啊，在这里的话大家可以啊，其他工具自己看一下这句话就行了啊，咱们作为这个web开发人员，这挡着年了就没招了吗？对吧？啊，所以在这里FRV格式也行，嗯，RTP格式也行啊，Mo的话，咱们用这个什么RTC的还是实时通话的，该模式是延时更低啊，所以在这里其实两个我都试过，都没有问题啊，这个延时能更低啊，就是是我这边刚直播那边就开启了这个观看啊，实时的直播流一定是自动播放呀，另外啊，咱们不要说进来之后还在说是否要播放主播的信息，这就没有意思的，就像你打开抖音一样，你点进去之后就已。

经自动开启这个主播的实时的内容的啊，所以咱们用这个auto play给他一个触置静音也不静音，那就啊，嗯，还有这个直播的这一个方向啊，然后还有我们诶这个咱们再看一下填充模式这一块呀，咱们这块用的是什么呀，咱们也让他这个图像呀，铺满屏幕就行了啊超出了部分的话呢，被裁掉，当然你也会发现在这里像极了咱们那个背景的那个cover，还有那个content啊，我们的background赛的那个属性是吧？嗯，好了，在这儿的话，还有下面这个什么背景是否静音，还有最小缓冲区，最大缓冲区，还有生成输出的方式，是扬声器还是听筒的，这都可以动态的进行设置啊，后面的话呢，还有咱们如果你这个是小窗模式，弹起来这个组件它是怎么怎么样子的，对吧，都会给你的，所以你可以在这里去试一试，咱们在这里的话呢，用咱们最重要的几个属性就可以了，B Switch change又是最重要的一个回调函数了，因为这里会告诉你此时这场直播。

啊，为什么看不了啊，是因为你连不上网络，或者已经主播断联了，怎么怎么样子的，咱们可以通过放的change的回调函数，还是那个detail，还是那个code的字段中能够看得到这个信息，太关键了，列外好了，这个是全屏，如果你要全屏观看啊，怎么怎么样子的啊，还有绑定了我们网络的一个状态，好吧，诶后面还有对于状态码的一个具体的一个演示啊，咱们到时候还得用这个状态码呢。好了，接下来再就是我们网络的这个数据的这个回调的啊，每一个数据代表词，这个这个状态是怎么样子的啊，到时候出问题的都可以回过头来来查看这些值。好，接下来我们在这里还要关注一件事情，这个开发者工具上暂不支持，也就是说我们一会啊，整个这一个主播啊，直播，还有我们的观众观看这一块，都不能在我们的模拟器上来演示，所以列位一定要在自己的手机上来进行演示啊才能。

看得到对吧？啊，所以在这里接下来就是我们的代码的这个简单的一个预览，所以咱们还是把这句话CTRLC哈，给它复制过来，粘到咱们的这个页面来，粘到这来，我得把这句话给它改成什么呀，我是这个观众页面，接下来咱们这个地址一会给它改，还是move的，是咱们的r TC auto play自动开始播放两个回调函数课一号写好，还有这一块我还是写成这个100VW行吧，还有这个100V我都给它写好就行了，嗯，VOK，然后再就是我们所说的哈，咱们要将这个什么呀，我记得说下，将它的这个调整回这个字段啊，叫object的fit字段，这个啊，咱们给它调整成这个什么图像铺满屏幕给它crop，这个啊，咱们把这个值给它加上去，给它设置成这个fill啊，Crop这个字段，那这样来说呀，咱们。

现在把两个回调函数一写，再把咱们的播放地址一写，哎呀，我感觉这个马上就要成功的列位啊，在普列这个页面中，诶在这里面写好我们的两个回调函数，Stay change一个，还有我们的一个error这一个拿过来放在这里好，咱们在这里的话呢，打印啊，到时候出问题的话，咱们打印这个出错了啊，然后这一块的话呢，诶拉了一个逗号啊，直接报错了，在这里的话，咱们打印将来的这个什么呀，evt.detail点扣的这个值啊，在这里的话呢，本来这些东西都是应该一步步的啊，告诉大家说为什么EVT下面有data，然后打印之后发现的啊，我现在的话呢，每一次在手机上测试实在是不方便，所以我们最终知道EVT这个对象下面有个对属性对有个扣的关键字啊，这里面的这个状态码非常重要啊，所以坑文在这儿就直接告诉大家了。嗯，现在咱们把。

PLAY2中的这个地址啊，给它替换成我们真正的播放地址来，来到这里之后就是推流的给它改成播放域名，播放域名这里请选择坑那个已经备案好的那一个域名管理中，你看是不是AAA，这个是绿色的啊，你可别弄错了啊，回来了，播放域名选择 AAArank.net还是这块写成这个科文，然后的话呢，这块生成这个地址，好，它支持FLV格式的，还有RTP格式的，两个都支持，我这次用FLV格式的保存之后，那这样来说，我认为啊，我们这一个差不多的，另外在这里我们简单的把我们这一节所做的东西的话呢，给简单的想一想，回顾一下，我就是一会儿登录我们的小程序之后，哎，我们可以点击，让一个人点击我是主播，诶，在这个主播页面中，咱们就开始采集主播的信息。

并把主播的信息的话呢，推流到我们的腾讯云直播的这个推流地址这一块，那这样的话呢，另一个人的话，他登录小程序看到的是我是观众这个页面，他在这里的话呢，就需要哎能看到的是我们从腾讯云直播中生成的那个播放地址，你想想那是他生成的推流和他的播放一定是一对的，所以我们就在这里把在这里播放这个地址啊，最终的话，我们将来就能看到这样一个界面了，那边啊，这个录制的啊，那边实时录制的，这边就能够实时的进行观看啊，所以这一会儿我们所要具备的条件就是我们必须让我们的这个小程序啊，能够支持我们的实时播放音视频引流，实时录制音视频的开关才能打开啊，它已经符合小程序的两个组件的使用规则了，并且在你的手机上要有两个微信对吧，也就你得有两个微信，你扫完之后一个微信给大家展示你在录制这个。

一个微信在这里展示的话呢，我们在这里去观看直播的，而且这个东西必须在真机上来进行演示，所以客人在这里生成了一个二维码，但这个二维码的话呢，列外啊，你扫完之后你有权限嘛，你肯定是没有权限的，那谁有权限呀，肯定是坑，要把你的这个微信ID啊，已经写入到给你开通我们的开发者权限，但问题是我怎么能给你开通呢？谁在看我的视频，在弹幕中告诉科文一声好不好？好了，咱们在下一小节来给大家来看一下啊，可的这个第一次的直播。