基于腾讯云移动直播的微信小程序直播技术开发与实现

　　2020年1月初，腾讯公司高级副总裁张小龙说，微信的发布内容应该各式各样，如文字、图片、视频等，不仅是是现在的图文。张小龙的讲话之后，微信直播应用的开发成为技术热点。但是，微信推出的看点直播限制太多，不能满足大量小众客户的需求，开发自己独有的小程序直播成为很多商家的需求。本文将围绕微信小程序借助腾讯云移动直播平台，开发嵌入在微信小程序中的直播应用的技术方案进行简单阐述，希望能对技术开发者提供启发和帮助。微信小程序准备条件
　　开发之前需要了解各种限制条件，并准备实现的工具。借助腾讯云移动直播开发微信直播小程序，需要了解腾讯云直播拉流推流的限制条件。下图为借助腾讯云在微信小程序中实现直播行业的限制，也就是拥有哪些许可在可以在微信小程序中插入直播应用。
　　腾讯云与微信小程序公众平台对开发者许可做了严格的限制
　　微信小程序推流拉流直播的行业限制
　　满足行业要求，通过一系列审核之后，在微信小程序公众号后台开发设置中，打开实时播放音视频流，实时录制音视频流选项。就可以就行开发了。
　　微信小程序公众号后台直播录播组件开关设置
　　微信小程序直播是通过小程序内组件和标签来实现的。在观众端前端使用和就行推流和拉流。基于腾讯云移动直播的微信小程序直播架构设计
　　上面，我们已经按照要求，准备了基本的开发条件。下面我们进行的技术架构设计。系统的技术架构包括系统的角色和系统的用例视图、设计视图、实现视图、进程视图、分布视图等各个层面描述的视图，为了简要期间，我们只列出基本的要点，不全面展示各个视图和要点。
　　系统的角色主要包括：观众、主播、腾讯云直播平台、直播管理平台几个发面。其中，腾讯云处于拉流和推流的中转站。
　　基于腾讯云移动直播的架构方案
　　主播通过手机、摄像头将数据采集，经过一定的算法，打包成一定格式的文件，通过RTMP协议推送到服务器，服务器进行两个方面的技术操作。一方面是，通过直播转码推送到直播源站，通过CDN分发到观众端，观众端通过拉流解压缩流媒体数据包进行观看；另一方面，主播在播放中，可以同时和观众互动，以及视频同步的录制。直播推流拉流就是这样的大概过程，在设计好基本的框架之后，我们就可以着手进行开发了。拉流端、推流端、转码平台的设计与实现
　　因为我们开发是微信小程序直播，所以观众端，是在微信小程序中实现的。也就是拉流是通过小程序进行的。我们先看一一个DEMO。
　　腾信云移动直播提供的DEMO，我们可以在此基础上开发
　　腾讯云和微信公众平台提供了小程序端开发的demo，我们可以充分利用开放的demo进行设计和开发。我们知道，小程序之类的轻应用是基于nodejs框架开发的，微信小程序建构了自己的开发框架，并提供了开发的接口，我们可以按照微信公众平台提供的开发接口进行定义开发。
　　微信小程序拉流端属性的定义
　　定义一个直播间viewidvideobox定义一个videobox相当于HTML5中的DIVliveplayerwx：for｛｛player｝｝idplayer｛｛index｝｝modeRTCobjectfitfillCropsrcc2021imgdataimg。jpgdatasrc｛｛item。playUrl｝｝autoplaytruebindstatechangeonPlayliveplayerview
　　因为要引入组件，所以按照微信小程序的开发，需要在配置文件中进行说明，详细的开发包，可以参照腾讯云官方提供的demo，本文只做示例性的说明。例如，在分包内引入直播组件liveplayerplugin代码包，项目根目录的app。json引用，示例代码如下：｛subpackages：〔｛root：packageA，pages：〔pageshomehome〕，plugins：｛liveplayerplugin：｛version：1。0。0，填写该直播组件最新版本号代码不完整，删除细节，开发时参考正式的demo〕｝
　　观众端需要开发的代码文档目录获取直播状态接口
　　直播状态说明：101直播中：表示主播正常开播102未开始：主播还未开播103已结束：关闭的直播，或系统强制结束的直播104禁播：表示因违规被禁播105暂停中：表示在MP后台操作暂停了直播106异常：表示主播离开、切后台、断网等情况107已过期：表示直播间一直未开播
　　调用方法：若要调用获取直播状态接口getLiveStatus，需在小程序页面顶部引用【直播组件】liveplayerplugin，示例代码如下：letlivePlayerrequirePlugin（liveplayerplugin）引入获取直播状态接口首次获取立马返回直播状态，往后间隔1分钟或更慢的频率去轮询获取直播状态constroomIdxxx房间idlivePlayer。getLiveStatus（｛roomid：roomId｝）。then（res｛101：直播中，102：未开始，103：已结束，104：禁播，105：暂停中，106：异常，107：已过期constliveStatusres。liveStatus｝）。catch（err｛console。log（err）｝）
　　推流端开发推流可以采用PC端，安卓、iOS等不同的方法。下面以小程序作为推流示例。
　　微信小程序推流端属性的定义viewidvideoboxlivepusheridpushermodeRTCurl｛｛pusher。pushurl｝｝autopushtruebindstatechangeonPushlivepusherview
　　微信小程序推流端代码示例livepusherurlhttps：XXXpushstreammodeRTCautopushbindstatechangestatechangestylewidth：300height：225Page（｛statechange（e）｛console。log（livepushercode：，e。detail。code）｝｝）平台端直播间管理，登录、注册、回放等功能的实现
　　直播服务平台的搭建
　　我们已经将一个有基本推拉流、聊天互动的小直播运行起来了。但是因为没有后台，无法实现账号注册登录、回放列表等功能。所以，我们需要架设一个平台，将上述功能实现。
　　这个平台的是管理平台，平台用户主要是主播和系统运营管理方，平台要实现域名添加、域名管理、流管理、模板管理、统计分析、日志管理、导播管理等功能。主播具有注册直播间管理直播间的功能，平台具有用户注册管理和直播间管理的功能。这是系统级别的要求。
　　开发这个管理平台需要系统级别的架构，可以自己进行开发，也可以利用云平台现有的功能进行集成。
　　经过以上步骤，小程序直播基本实现了。不过，如果要实现高级的功能，就要使用高级的功能接口了。比如连麦互动、AI变脸和挂件、自定义采集和渲染、SDK指标监控、禁播和流管理等。编译测试
　　经过一系列的开发，我们就要进行编译测试小程序了。实际上开发和编译测试是同步进行的，为了更加清晰的逻辑说明，我们将开发和编译测试分不同的侧面进行阐述。编译测试的步骤如下：
　　1。打开微信开发者工具，选择【小程序】菜单栏，然后单击新建图标，选择【导入项目】或者打开已经存在的项目。
　　2。输入小程序AppID。
　　3。系统生成二维码，通过手机微信扫码二维码登录小程序开发者工具平台即可进入。
　　4。需要注意的是小程序和标签需要在手机微信上才能使用，微信开发者工具上无法使用。
　　微信小程序调试实例图发布上线
　　至此，经过多次编译测试以后，就可以在后台提交上线了。利用腾讯云直播，开发自己的微信小程序直播应用基本逻辑就是这样的。