前段时间使用过某教育产品的web网页进行公开课类型的直播，于是自己也尝试使用 TRTC 搞了一个功能类似的web网页。
首先介绍一下该教育产品的直播流程图：
说明：
屏幕分享和摄像头之间可随意切换。
点击开始直播后，切换屏幕分享/摄像头后，会自动推流，不需要用户再次点击开始直播；即点击开始直播后，只能点击结束直播。
前提条件：
1、注册一个腾讯云账号，完成实名认证。
2、登录实时音视频控制台，创建一个应用，在【应用管理】-> 【功能配置】->【旁路推流配置】中开启旁路推流功能，至于为什么要开启旁路推流功能，一是公开课类型的直播人数会比较多，而 TRTC 直播时单房间有人数限制，价格也高的多；二是为了支持移动端网页也能播放，因为 CDN 旁路直播采用多种协议传输音视频数据，在移动端中不需要担心兼容性问题，而 TRTC 移动端浏览器的兼容性非常不理想。
3、在云直播产品中配置播放域名并完成 CNAME。
费用：新创建的实时音视频应用会有套餐包和流量包赠送，足够用来测试功能。
如何跑通直播：
如上图所示，跑通直播很简单，只需要调用5个 API 即可。
接来下就根据上图的跑通直播流程图实现 Web 网页直播功能。
设备检测的实现：
第一次检测：设备检测组件mounted后，创建一个client对象，加入房间，创建一个音视频流并播放。如下为示例代码。
麦克风检测的现实需要使用stream对象的getAudioLevel()方法获得当前音量大小，以及使用setInterval实时获取音量大小。
非第一次检测：因为此时已经创建了client对象并且加入了房间，直接创建音视频流并播放就可以了。
摄像头、屏幕分享切换实现：
在第一次的设备检测弹窗中，点击"去直播"后, 退出房间然后重新创建client对象和加入房间(这里主要参考了上述教育产品实现流程，由于将直播的 API 封装成了一个RtcClient类，在负责直播的组件里重新创建client对象写起代码来也比较方便)。
未开始直播时，摄像头和屏幕分享模式的切换，不需要改变直播按钮状态和自动推流。从摄像头模式切换为屏幕分享后，调用stream.close()关闭音视频流(stop方法不会关闭摄像头)，然后创建一条屏幕分享流，创建方法很简单，只需要在createStream()方法中指定{screen: true, audio: true}参数即可。需要注意的是，分享屏幕时，如果按了取消或者停止共享，那么此时是没有音视频流的，就需要把"开始直播"按钮变为disable状态。
已开始直播时，从摄像头切换为屏幕分享后，先unpublish和关闭音视频流，此时"结束直播"按钮变为disable状态，接着创建屏幕分享流，待publish成功后，直播按钮状态再次变为"结束直播"。由于用户只需要点击一次"开始直播"按钮，这意味着取消屏幕分享或者停止屏幕分享时，需要弹窗让用户选择摄像头模式还是屏幕分享模式。直播推流后，通过监听network-quality事件，可获取网络质量信息。
下面为实现的效果图：
播放地址：
开启旁路推流功能后， TRTC 房间里的每一路画面都配备一路对应的播放地址，该地址的格式如下：http://播放域名/live/[streamId].flv
其中streamId为直播中一条直播流的唯一标识，streamId可以自定义，也可以使用系统默认生成的。
播放测试：
可使用 VLC 播放器测试直播流，可到 VLC 官网下载 最新版本软件。
注意点：
一开始的实现方式是，只要没有stream流时就退出房间，当时是想着节省点资源费用，因为只有1个人在房间的时候，即使不推流，也会占用 TRTC 的云服务资源，需按语音时长统计服务用量。但后面发现这样做会导致一些问题。
- 已经直播推流且网络状况极佳，之后退出房间再重新加入房间，接着创建stream流和publish，此时网络状况就会变为未知。
- 已经开始直播时，从摄像头切换为屏幕分享后，远端正在观看的直播视频会停止，不会自动切换为屏幕分享流，需要手动刷新才能继续播放。
然而上述教育产品并没有这个问题，它是怎么做的呢？
为了解决这个问题，我再次使用该教育产品的 Web 网页直播了一次，查看控制台下 TRTC 的日志，看看其是何时加入房间和退出房间的。查看后发现其进入直播页面后，显示设备测试弹窗，加入房间一次，点击“去直播”后，退出房间，退出成功后接着重新加入房间，之后都不再加入房间了，直到结束直播时才退出房间。我按照着他的思路实现后，之前的问题就都不存在了，说明推流后不能再退出房间除非是要结束直播了。
总结：
基于腾讯云的 TRTC 服务，我们可以很容易实现基本的直播功能(简单的推流-拉流)，但处理业务的直播流程和直播状态则需要花些时间多多尝试才行。
