014-打通小程序到云直播开发-2原创

好了两位诶关注客人不迷路，家里都长发财树啊啊客文要开始我的第一次直播了，露脸直播呀啊他在直播之前我忽然发现个问题啊，刚才我们预览完之后啊，我们生成的这个二维码怎么出现了一个叹号，其实在这里它对于我的代码质量呢进行了一个检查，在检查的过程中啊，他给我扫描出一个可能的一个隐患哈，或者是可能影响性能的一个地方，咱们也顺便给大家说一下啊，因为新版的这个微信中啊，会有扫描代码质量这个地方，大家会发现我这个未通过的是因为说我没有开启这个组件的按需注入，嗯，这什么意思呢？就是等我打开这个首页的时候，其实他把这些页面所有页面的组件啊都给我加载进来了，但其实不需要的啊，咱们可以开启按需注入，就是等我切到我们的owner页面中，再把我们相应的组件给注入进来，切到普列中，再注入我们相应的组件，包括我们自己的组件，写的都是一样的哈。所以咱们在这里可。

里启用我们的组件的按需注入这块的教程呢，非常简单，就加一个字段就行了，可以看一下，你可以把这个什么字段呀，列y lazy code loading这个字段设置成水块的components，你把这句话给它复制过来就可以了啊，我们在这里CTRLC复制啊，来到我们的这个代码中啊，来到这里我看一眼哈，在我们这个文件中吧，是不是我们当时app.jason是咱们的核心配置文件，然你把它粘到这个位置来啊，一保存之后，你这个时候呢，再生成你的这个，呃，编译预览这个二维码啊，咱们可以看一下，此时这一块我们小程序表现良好，未发现代码质量问题啊，就没有问题的，这个时候呢，我就可以拿出我的手机来，但然这一会儿列我是看不到我的手机屏幕的哈，我可以单独的给大家呀，录一个手机的屏幕视频，嗯，我得先开启啊，我的这个手机的这个屏幕录制啊，然后呢，再用我的微信啊进行扫描，一会儿我也得给大家解释一下哈，因为科。

工人啊，有两个微信号啊，真的两个微信号，一个微信号的话呢，啥也没干啊，不像大家想的那样的，哎呀，干起那种事情啊，微信号就是为了测试的，好为这个录这个视频还申请了一个新的微信号，太难了啊，我们先开启一下我这个手机的一个录屏模式，然后把这个录屏模式中啊，我给他录制啊我们的声音好，然后接下来我再用我的这个微信，第一个微信的话呢，我先扫一下啊，扫了一下这个二维码，好开启了啊好，我把它拿到这里来，然后的话呢，我再开启我的第二个微信，然后再扫一下，那这样来说的话，我是不是就相当于我这两个微信都打开了我们这个小程序啊，这个界面来了啊，这个时候客人可以点击这个录屏了。好了，开始已经开始录制屏幕了啊嗯，我这个手机啊，用的是坚果的R2手机，这个手机最大的特点大家能看到啊，他在这里啊，成功的把我这个屏幕的话呢，其实它能同时显示四个应用在一个屏幕中，这样就非常方便我给大家做这个演示，你说要坑没这个手机演示不了的，那这个时候我可以点一下什么呀，大家可以看一下，现在在我的这个比较大的这个主屏上的话呢，我点一下我是主播，这是我第一个微信扫出来的小程序，所以我点一下我是主播，主播一开启之后，大家现在能够看到哈科在这里进行直播了啊，看到科文专业的设备了吧，看到科文这个嘴了吧，你是看不见的啊，看不见就对了啊，然我点一下这边这个哈，我点一下这块的，这是我另一个微信扫出来这个小程序，所以我说嘛，你得亏是坑有这个手机这样的话呢，你想我那边在直播着呢，现在我开始点一下我是观众，如果一会儿我是观众这个页面能看到坑直播的画面的话呢，就说明刚才我们。

这个功能是完整成功的，大家可以看到已经能够看到科这个画面了，哎，所以在这里我认为啊，我们已经成功的列位啊，你看这个屏幕的话呢，是我是主播页面，他现在在采集的可摄像头的音频，在录制的我的这些音视频呢啊，实时录制的，他推到我们小程序，呃，云直播啊这个推流服务器上，然后我这个我是观众页面是我另一个微信开启的，他故意进来的是我是观众啊，这样的话能够看到我们推流的来到这块的话呢，拉下来这个视频流，但是你会发现哈，这个视频流确实哈，不如上面那个直播的视频流清晰，因为这个是直接把我们实时采集的画面显示出来的，而这个是从我们的播放域名上拉取回来的，所以在这里它可能会有一点小问题，但课上看一下怎么这么难吗啊，显得我特别胖的样子，好吧，行了，那这样的话我就演示成功了，好吧，哎，我们在这里把这个给他停掉就可以了。

这一次的话呢，我们直播结束啊，首秀非常成功啊，数个12345啊，科文老师会跳舞啊，雪碧柠檬可乐茶，各位老铁还想听点啥，但列位啊，其实咱们在这块是有点bug的，什么问题呢？大家可以看一下啊，看能再次开启我的手机的录屏，哎，我给大家来演示一下这个问题，就是我们现在啊，如果是主播正在正常录制的情况下，然主播正在正常录制了，好了，我们这个时候我们可以点一下啊，他已经在实时直播了，如果主播这个时候他退出了呢？诶，你会发现这个页面就直接卡住了啊，他就一直在卡住，卡住卡住，然后没有任何的反应，那正常情况下是因为它卡了一会儿，它会显示一个主播已离开直播间啊，或者主播暂时无法已经下线等等的这样一些提示啊，所以你看这是不是一个潜在的一个小问题呢？还有一个就是如果是观众我先进来。

来了，大家知道这个界面现在是黑屏的啊，如果你作为这个主播，你迅速的开播了啊，就这么一瞬间迅速开播了，你会发现还有救，还有救，诶这个时候大家会发现，诶怎么还能有救呢？就是因为咱们这一个live player这一个组件，它很有意思，他呢如果连不上那个地址，拿不到那个视频流之后，他会尝试再次去拿啊，所以他会多次去尝试，直到他超时了之后，他会说已经彻底没有救了，那这样的话就会断流了，这样就会出问题了，你比如说再给你演示一下，如果这个事儿，哎，我们主播退出啊，我们的这个观众也退出，观众先进来了啊，这个时候呢，他等了很长很长很长时间，其实这个时间不用太长，就几秒钟就行了，这个时候我跟你说，此时如果开启我的手机的调试，你会发现那个event data，那个code呀，在不断的打印一个数字啊，他会说我在尝试着连接，尝试着连接，我记得哈。

啊，应该是2103这个code的值，它会说网络已断联，正启动自动重连啊，然后直到等了非常长的时间，它会打印出来一个code叫2301，他会说网络断联，且多次抢救无效，诶所以这个时候请自行重启这个播放啊，他会告诉你，所以这个时候如果再作为主播，我进来之后，你会发现我主播正在开播，但这一会儿我们这个观众页面将再也无法进来了，除非呢，你手动的退出去，然后你在次进来之后就能看到我们主播的这一个啊视频画面了啊，所以这是一个流程，我们可以优化一下这块的一个处理，我们怎么来优化一下列位啊，我们在这里的这个优化方案就是我们如果是进来之后进到观众页面中，如果它返回了那个2103那个错误啊，或者是2301，我觉记不准，一会咱们可以看一下我们的文档，如果说他出现了这样一个错误，我们可以弹出来一个对话框，说主播暂时离线。

是否重连啊，确定咱们就重新再连一次啊，如果取消的话，那就断开了，就不连了，就啊这样的话呢，还有我们主播一离线之后，诶，这一会儿他在这里尝试去连接，连接一会儿连不上也会弹出来那个界面，主播已下线啊，然后是不是离开这个页面或者尝试重连啊都可以是吧？咱们可以把这个功能需求啊做出来，是不是感觉上来说用户体验就会更好一点的呀？OK，咱们来尝试一下这个功好的列位刚才课上所说的状态码，其实在这里，也就是说如果我们先点开了那个观众那个页面，如果这个时候没有直播流过来的话呢，它其实返回了一个叫做啊我们的2103这样一个错误状态码，叫网络断联，已启动自动重连，所以这个就是为什么说我们观众点点开之后，如果这个时候主播在一两秒之内啊重赶紧进来，其实这个观众是可以看到这个画面的，因为他在自动重连中，诶连上去了就能。

看到了，但是如果我们观众已经进来了啊，比如说一分钟了，我们的主播还没进来的话呢，这个时候你会发现状态码就早就变成了负的，2301的说断联经多次场抢救无效啊，更多重试请自行重启播放，所以就是这个状态码的时候，就说明已经没救了，它已经不再自动重连了，你主播再进来，我这个观众也无法看到了，所以咱们一个是判断是这个状态码的时候，咱们自己通过GS代码手动的让这个普组件再次连接一下咱们的直播，再次进行这个普利进行播放，这样的话呢，他才有希望啊，包括我们主播退出之后，他也会多次重新连接啊，这个时候他也连不上，连不上怎么呢？哎，最终还是会报2301这样一个错误，那咱们就在这里case到这个分支之后，就立即弹出对话框啊，提示我们的用户赶紧的进行这一个重连啊，或者是关闭当前页面啊，这是你自己的一个选择。

那你想怎么去做好吧，OK，这就是我们这一块，那接下来大家跟着科啊来看一下我们这个功能呀，咱们将如何进行一个代码上的一个实现，然后一会儿坑再用手机扫完之后再录一个小视频，把刚才这个过程呀给大家呀一样的放在咱们的这个录制视频中啊，到时候大家对比着坑的话啊，跟我们录制的手机屏幕，那就明白了我们这个代码的工作，所以其实录这段视频太不容易了啊，因为我现在需要的是我们必须在安卓真机上，当然你iOS也一样，但Q是安卓啊，而且科的手机非常好是吧，它能够同时的展示我两个应用在同一个页面中，其实四个应用老厉害了啊，所以不得不为这个坚果R2的话呢吹一波，但这个手机已经停产了，另外啊，去闲鱼上去看看吧，啊好了，接下来咱们闲言少叙，来写代码的我们应该是在哪个地方去写啊，在我们的这个点GS中来去写对不对？在普GS中我们应该case到这个分。

这时候哎，Switch做一个选择，ET点点code的我们Switch这个分支，如果我case是的2301这样一个状态码的时候，另外case如果是的负2301这个状态码，我们一个WX点我们受那个model，这这个model这个命令是干嘛用的？这位诶我这块是不是一个中文的呀，好了好了，呃，竖这个model弹出一个对话框啊，我们在这个对话框中列位可以去查一下这个文档对吧？数model是咱们小程序弹出对话框来，咱们弹出一个什么呀，主播啊暂时离开了，然后在这里我们写一个什么呀，Success啊写一个回调函数，在这个回调函数中的话呢，我们如果是这个时候点击的这个确认if，我们的这个re s.confirm就是我们如果确认点击的是确认，我们应该是怎么样呀，我们是重新。

音连接啊，我们的这个地址啊，直播播放地址，播放地址如果失败了的话呢，咱们就退出这个页面就行了，WX我们的NAV back啊退回啊，我们的上一个页面啊，就可以na back啊退回就行了，所以这个怎么样能够重新播放这个地址呢？诶这块就是咱们的一个GS的一个代码，因为咱们这个组件叫live，呃，Player和live play组件，它其实呢，也可以通过咱们这个相关API进行创建啊，因为你这个组件是咱们的这个啊，在我们WSM中就写的，咱们可以通过这个方法能获取这个组件的实例，然利用这个实例里边有一个方法就可以进行重新连接和播放了，所以你要利用WS啊，Create live player con，你传入咱们这个ID啊，传入咱们这个直播ID，传进来之后，这个时候呢，它返回的就是咱们当前这个直播对象了，然后直播对象里面。

有相应的方法，有什么方法，有普利方法，这个普利方法的话就是管着是吧，让咱们重新啊再开启一次播放好了，那这个意思就是可能一会会复制这个方法，然后的话，在我们这个play组件一加载进来的时候的话呢，就赶紧的创建啊这一个player这个对象，然后咱们复制给这次player，好，然后你这传的是一个什么ID，就是这个组件的一个ID，你要给这个组件设置一个什么ID，咱们称之为叫player这个ID，然后你把这个ID当成这个参数呀，直接传进来，另外能明白，所以一进来on load的时候，我们就立即利用create live player content上下文对象，然后咱们把这个组件的ID传进来，它就能获取到这个组件的一个实例，咱们给它复制给我们的Z啊，拿到这个z player之后，另外只要你点击的确认，你不用担心说吧，客户点确认的时候，这个生成了吗？Lo的这个。

函数生命周期一上来就会先执行一下，所以一定会及早的早早的拿到我们这个普列尔对象，拿到普列尔对象之后，等你点击说我重新连接之后，我就调用他那个叫普那个方法就可以了。好，咱们在这里把这个思路给大家重新的捋一捋啊，我们解决的问题就是防止主播离开之后，或者防止主播没开始之前咱们进来了啊，然后导致我们卡在这个啊观众页面啊，不知所措啊，所以我们在这个WSM中给他起了一个ID啊，起这个ID的目的是我们一进来这个观众页面，我们先获根据ID获取这个普play，就是我们这个直播组件，直播播放组件的一个上下文对象，拿到这个对象它的要求方法必须传入ID，传进来之后，咱们生成的这个对象，等我们一直重连拿不到我们的播放预留这个地址的时候，我们弹出来这个什么对话框啊。

而你不能说什么时候都弹任何一个错误都弹，必须是2301，负的2301啊，咱们在这里一已经看到这个状态码的啊，它必须是负的2301啊，如果不是2301，你其他的话你都弹的就不对了，嗯，所以说附带2301的时候多次抢求无效，咱们再尝试的哎，自己弹出对话框，让用户选择到底，如果他选的是确定，咱们就让他重新连一遍调用，就是让我们按照当时这个src地址再重新的去连一遍，重新的去播放一次啊，就主动的再来一次就行了，如果他点击来取消，就是关闭这一个页面就可以了啊可能在这里用了一个非常简单的一个我们的微信的弹出组件框这样一个组件，好吧，OK，关于这一块咱们差不多了，那接下来的话又Z来到我们的小视频直播阶段啊，咱们来重新的进行这个编译啊，预览好了，又生成了这样一个二维码啊，可能在这里的话呢，还得进行录屏呀啊，我们在这里还是我先扫一下啊。

嗯，大家可能听到叮的一声哈，没听见的话就算了是吧，我得重新再扫一遍啊，都得扫一遍，两个微信都得扫一遍啊，演示这个功能太麻烦了啊好了，接下来的话呢，来列位看坑们给你演示一下啊，我现在开始这个录制，我的手机屏幕，我先点的是我是主播这一块，我点一下我是主播好了大家看一下，我又开始直播了啊，没想到真是开了这个美颜，开了这个美白之后还是不错的，你看啊，还是不错的哈，然后我们再点击这个，我是观众一进来之后正常的开始啊，能够得到这个视频流怎么有点慢哈，好了，能看见了吧，嗯，这一会咱们模拟的是这样一个过程，如果主播离线了，看主播走了，大家会发现这个页面中的话，一会儿哈，就会弹出对话框来，如果能弹出成功的话呢，就说明咱们这个功能的话呢，是生效的啊，诶主播暂时离开了，那这一会儿的话咱们怎么办呢？咱们点击取消吧。

啊，那主播都离开了我干啥呀？我就点击取消，就回到这个页面来了，好，咱们再模拟，我进来之后，我是一个观众，注意我这块点的是我是一个观众，我要点了哈，我是观众进来之后，诶，如果我们的主播立即进来，诶大家会发现一会儿这个我是观众这个页面他能收到咱们之前就是好用的啊，但这一会儿的话，咱们再退出，重新来演示这个过程，如果这个时候我先点了我是观众了，我是观众页面，我等了好久好久好久，我的主播你在哪里，我想死你了，对吧？主播在哪里啊，在我的心里啊，没想到主播还不来，诶弹出来了，主播暂时离开了，但这个时候如果主播开播了啊，咱们在这里的话呢，说呃，离开了，你是重新的再确认一下，当然咱们这个模态框可以把下面就是取消和确定这一块，咱们给它改成啊，重新连接，还有离开页面啊，比如说点击确定，大家知道是我重新调用的普这个。

方法你会发现他能够重新的连接上那个主播的页面，你看就可以了，然后说这个过程模拟的非常成功嘛，是吧？啊，所以主播再离开了话还是一样的，哎，主播说啊，我走了，不直播了，哎，咱们在这里的话呢，我观众这个页面就卡住了啊，但一会就会弹出来说主播已经离开了啊，你是一个是否重新连接或者是关闭当前页面啊，咱们说把这个模态框呢，下面两个给大家关掉就可以了，好吧，点击取消就是关掉页面，嗯，你看我这个小视频录制的啊，配合客们的这些话应该没有问题吧，能够理解我们刚才所做的这个功能，OK，这就是咱们关于这一小节中的重要内容，我们在这一小节中成功的解决了我们在一些用户体验的一些问题，但在这一块呀，我们不得不引发另一个思考，就是诶康，你说你刚才整个项目中，我看哈创建的话呢，就是我是主播，我是观众，那将来你这个小程序。

咱们这个项目做完了之后，不是就这一个直播间吧，你想我们将来模拟的场景，大家也看到我的演示了，就是谁登录进来之后，哎，谁都可以成为主播播放，谁也可以成为观众去看，想想抖音就行了，抖音你可不可以作为一个哎普通用户去看别人的直播可以吧，同样的抖音，你注册完抖音之后，你可不可以当成一个主播来进行直播呢？别人来看你呢，也可以，但现在问题是咱们就这一个直播间列外看一下，就这一个直播间，那你说任何人进来都用这这个直播间，那么直播流流窜了吗？我本来我这个人直播往这推，那个直播往也往这推，那你说我作为观众到底看的是谁的呢？所以说这就出现问题了，我们云直播这个功能，它只能生成这唯一一个地址吗？如果只是一个唯一一个地址，一个推流一个拉流地址啊，就是我们一个播放地址，就这两个地址，两个地址只能给一个直播间去用那多个直播。

天就毁了，所以就根本实现不了，咱们类似于抖音那种啊，每人都可以开直播，每人都是自己心中最美的主播，你做不了了，你没法开直播了，对大家都只能是啊看呃一个直播，这样就就不对劲儿了，就啊所以我们要做的就是在下小中咱们可以看看啊，能不能实现开通多个直播间，那这个功能很难吗？诶下一小件咱们给大家来解释一下。