开发者学堂课程【低代码音视频开发教程：【视频】低代码样板间快速集成教程与扩展开发】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/936/detail/14876
【视频】低代码样板间快速集成教程与扩展开发
内容介绍：
一、课程该要
二、概览
三、快速集成
四、扩展开发
一、课程概要
第一部分是对于样板间 SDK 的快速集成，第二部分是包含对于样板间 SDK 的扩展开发。
二、概览
1、低代码是相对于 SDK 集成方式的，因此本质上是对 SDK 集成的二次封装，而不是额外另起的 SDK；
2、低代码集成中包含了实现一套标准直播间所需要的 UI 控件，而 SDK 集成中，只包含 API 接口，不涉及 UI。
第一部分，开通服务。在阿里云的控制台上面开通服务。在开通服务后进行创建应用，接下来进行配置应用。再进行集成应用，到了这一步之后，SDK 基本上已经集成完毕。如果业务上有自己额外的定制的话，可以选择扩展开发。最后整体算是接入完成。因为客户端的 SDK 集成，包含安卓，iOS还有web等多个平台。以安卓平台进行展开。
三、快速集成
1.控制台新建应用
(1)快速集成里面的第一步是在阿里云控制台上新建应用，新建应用时可以参考那阿里云控制台文档，在低代码音视频工厂上。下面的控制台指南里面的创建应用，可以参考文档中样板间应用。
需要注意的一点是选择集成方式时不要选择 SDK 集成，而是要选择样板间集成，当我们选择样板间集成时，服务端会自动生成相对应的服务，包含通用获取等关的能力。
(2)第二步，应用创建完成之后需要获取的相关参数以供客户端集成进行使用。
当应用创建完成之后会看到应用管理列表。需要核心关注的一点是集成方式对应的要确认下来是一个样板间，而不是 SDK 集成，SDK 集成就是基于底层的原子能力是不包含 UI 的，我们要确认选择的应用是样板间的集成方式，同时在左侧可以看到对应的应用 ID 和名称，核心要看到应用 ID，指的是客户端集成中选择的 AppID 同时对应的是 AppKey。另外两个参数是关于 serverSecret 和 serverHost，都是在样板间集成里面，点击展开之后里面可以看到详细的信息。
2.客户端集成
下面进行客户端集成的步骤。
(1)客户端集成第一步，直接克隆 Github 开源Demo;
(2)第二步，在克隆的代码里找到对应的App.Java类，替换appId、appKey、serverHost和serverSecret四个参数。替换完成之后，可以将 SDK 跟当前的应用进行关联。可以做到数据级别的割离。
(3)第三步，进行运行。在安卓 studio 上面进行运行。
如上图可以看到对应的两端，一端是主播端，一端是观众端，其中，主播端多了一个页面是起播页。当进入直播间页面后，需要有一个提前的预览过程，预览过程的时候并没有开播。这是整个的样板间 SDK 的快速集成过程。到此 SDK 的基础功能已经集成完毕。
四、扩展开发
1.组件概念
(1)举例
扩展开发首先有一个前提就是有一个组件的概念。组建的概念在安卓的 SDK 中。会定义一个 ComponentHolder 接口。当 View 实现了这个接口，就称 View 是这个直播样板间的组件。下面举一个简单的例子，以点赞组件为例。
public class LiveLikeView extends FrameLayout implements ComponentHolder{
private final Component component=new Component();
//略...
@Override
public IComponent getComponent(){
return component;
}
private static class Component extends BaseComponent{
private void sendLike(){
//组件内部可以拿到 SDK 相关的原子服务进行调用
chatService.sendLike();
}
(2)代码说明
LiveLikeView 是 FrameLayout 的 View，它实现了 ComponentHolder 接口，这个借口只有一个带时间的方法，
@Override
public IComponent getComponent(){
return component;
}
//getComponent 需要返回一个 Component 的实例，这个 Component 实例需要在组件 View 中自己去实例化。这个类的声明就是继承 BaseComponent，在继承 BaseComponent 之后，组件内部可以通过包含 chatService 的一系列的跟 SDK 相关的 API 能力进行交互。
public class LiveLikeView extends FrameLayout implements ComponentHolder{
private final Component component=new Component();
//当用户点击点赞相关的 View 之后会触发一个点赞操作，内部就会调用 Component 的 sendLike 方法，而 sendLike 底层要的就是 chatService.sendLike 以实现点赞的操作。
2.添加组件
样板间如何添加组件。
(1)内容
添加组件实际上指，在开发样板间时会预留几个预测的坑位。其中包含主播的起播页面，右上角的菜单栏、自定义的商品卡片以及腰部视图。
LivePrototype.getInstance().setLiveHook(new LiveHook()
//自定义主播的启播页视图
.setReadySlot(context -> new CustomLiveStartView(context, null))
//自定义右上角视图(信息视图和停止直播之间的空间)
.setUpperRightSlot(context -> new CustomL iveRightUpperView(context, null))
//自定义商品卡片视图
. setGoodsSlot(context -> new CustomLiveGoodsCardView(context, null))
//自定义腰部视图
. setMiddleSlot(context -> new CustomL iveMiddleView(context, null))
(2)以自定义交互式文档为例
点击开始直播之后，当前的页面指的是一个起播页，对应的是 ReadySlot，也就是说，整个 View 都是支持我们进行自定义的。自定义后，可以改变当前起播页面的相关输出。如果觉得默认的足够满足实现诉求，可以不进行自定义。
接下来开始直播，从左上角直播信息到关闭的图标中间的空白区域指的是 UpperRightSlot，这块内容也支持自定义。一般会放一些购物车、消息等相关的 APP 图标。下方的信息面板和底部栏之间会有一个商品卡片，以供选择。商品卡片主要运用于电商场景，当 APP 需要对一些商品进行宣传、售卖时。会把商品卡片弹出来，预埋了这个功能。商品卡片对应的就是 GoodsSlot，MiddleSlot 对应的是整个页面的腰部，该区域支持自己进行 View 相关的填充，填充的过程中需要返回 View。
3.更改组件
(1)和添加组件的区别
相对于添加组件，添加组件是针对于样板间里没有的视图进行额外自我定制。更改组件是针对于样板间里已经有的组件内容进行二次定义以及更改。会提供针对于每一个组件的定制方式，最核心的 API 是通过 replaceComponentView。
(2)举例
以其中一个为例，replaceComponentView 在 SDK 中默认的组件 LiveInforView 对应在页面即包含头像、昵称、观看人数、点赞数及后面的背景。可以优先点击看到 LiveInforView，
//将 LiveInforView 组件，替换为 CustomLiveInfoView 组件
LivePrototype.getInstance().setL iveHook(new LiveHook()
.replaceComponentView(L ivelrifoView.class, CustomL ivelnfoView.class)
而 CustomLiveInfoView 就是业务程序上进行自定义的注解。
(3)其他
以此类推，都可以进行额外自定义。
LivePrototype.getInstance().setLiveHook(new LiveHook()
.replaceComponentView(LiveInfoView.class, CustomLiveInfoView.class)
//自定义右上角的直播停止视图
. replaceComponentView(LiveStopView. class, CustomLiveStopView.class)
//自定义左下角直播信息面板视图
.replaceComponentView(LíveMessageView.class, CustomLiveMessageView. class)
//自定义页面底部输入框视图
. replaceComponentView(LiveInputView. class, CustomLiveInputView.class)
//自定义页面底部分享视图
. replaceComponentView(LiveShareView. class, CustomLiveShareView.class)
//自定义页面底部点赞视图
. replaceComponentView(LiveLikeview. class, CustomLíveLikeView.class)
//自定义页面底部美颜视图
. replaceComponentView(LiveBeautyView. class, CustomLiveBeautyView.class)
//自定义页面底部更多视图
. replaceComponentView(LiveMoreView. class, CustomLiveMoreView. class)
//自定义页面渲染视图
.replaceComponentView(LiveRenderView.class, CustomLiveRenderView. class)
4.重组组件
(1)背景
在 SDK 设计阶段，考虑到默认的组件可能和用户业务诉求相差较大，也就是样板间与用户的实际业务诉求的 UI 差距还是很大，这种情况下，就不建议以上添加组件或是更改组件的方式进行 SDK 的方式集成，而是重组组件。
重组组件指如果还不能满足自定义的诉求，参考如下方式来替换整个 xml 布局文件，支持任意维度自定义。此处以自定义一个能够监听弹幕信息的组件为例，来对组件定制方式进行实际说明。
(2)新建自定义组件 CustomMessageView
public class CustomMessageView extends AppCompatTextView implements ComponentHolder{
private final Component component=new Component() ;
public CustomMessageView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setTextColor(Color.RED);
setTextSize (TypedValue. COMPLEX_ UNIT_ SP, 24);
@Override
public IComponent getComponent() {
return component;
private class Component extends BaseComponent {
@0verride
ok1ie woid onTnitll iveContext liveContext) {
super. onInit(liveContext);
//设置互动服务的回调监听事件
chatService . addEventHandler(new Samp leChatEventHandler() {
@0verride
public void onCommentReceived (CommentEvent event) {
setText(String. format("%s: %s", event. creatorNick, event.content));
(3)代码说明
首先，创建一个 CustomMessageView ，这是一个普通的 View ，没有额外的逻辑，但也实现了 ComponentHolder 。在初始化时，做了一个监听，监听了 onCommentReceived，也就是监听弹幕消息接收到的事件时，调用组件的 setText 的方法，展示的是发消息的人和发消息的内容。相当于把收到的消息通过 View 展示出来。而 setTextView 调用的的就是当前的 setTextView ，因此这个组件就是做弹幕消息的监听动作的部门。
实现组件后只是将组件来历写出来，并没有地方进行申明、使用。
（4）接下来看第二步，找到 SDK 样板间默认的布局文件 ilr_activity_live.xml（这个文件名是固定的，固定的文件名在 SDK 中集成），然后复制一份重命名为 activity_custom_live.xml 到工程资源目录下
(5)在 activity_custom_live.xml 中的 LiveContentLayer 节点里的最后面添加的自定义组件，实际本质上只是一个 ViewGroup，只是为了方便看 View 的实现。
<!--此处为我们自定义的信息监听组件-->
<com. aliyun. liveroom. demo. CustomMessageView
android:layout_width ＝"wrap_content"
android: layout_height＝ "wrap_content"
android:layout_centerInParente"true" />
(6)把新的布局文件设置给 SDK
把 CustomMessageView 塞到 LiveContentLayer 节点下，接下来需要把当前布局的新的 activity_custom_live 报出 SDK，需要把老的布局文件换成新的进行替换，其中最核心的是通过 LivePrototype.getInstance() .setLiveHook(new LiveHook() 需要调用 setLiveLayoutRes 的方法把新的布局文件 R. layout. activity_custom live 设置给样板间，即:
static {
LivePrototype.getInstance() .setLiveHook(new LiveHook()
. setLiveLayoutRes (R. layout. activity_custom live)
);
(7)接下来进行运行并安装应用，进入直播间后，此时在底部输入框发送弹幕时，便能看到自定义的信息组件，中间的消息便是新添加的 CustomMessageView，当它收到消息后会调 setTextView，收到方法后，就会进行当前的展示。这就是整个的样板间扩展开发的核心流程。
