用三行代码创建一个Android视频流应用程序

适用于Android的Agora UIKit使视频流传输比以往更加轻松

12WxGWQ9hnUQS7wcB4HwnDQ-1

当您使用Agora设置自己的流式应用程序时,一些技术步骤可能会降低您的速度。现在,借助适用于Android的Agora UIKit,您可以像在应用程序的视图中放置视图一样轻松地创建应用程序

先决条件

  • 一个Agora开发人员帐户(请参阅如何开始使用Agora
  • Android Studio
  • 运行Android 24以上版本的Android设备
  • 对Android开发的基本了解

设置

使用Android Studio创建一个Android应用程序,然后打开您的根目录build.gradle并将jitpack添加到存储库的末尾:

allprojects {
  储存库{ 
     ... 
     maven { url'https://www.jitpack.io          '} 
  }      
}

添加适用于Android的Agora UIKit依赖项:

依赖项{
实现'com.github.AgoraIO-Community:Android-UIKit:v2.0.0' 
}

同步gradle文件后,应已安装该模块并可以使用。

将视频流添加到您的应用

在此模块中,主要类类型为AgoraVideoViewer。要创建此类的基本实例,您只需要准备好Agora App ID:

val agView = AgoraVideoViewer(
this,AgoraConnectionData(“ app-id-here”)
))

在这里,将视图放入您的活动中。在此示例中,它将填充整个屏幕:

this.addContentView(
agView,
FrameLayout.LayoutParams(
   FrameLayout.LayoutParams.MATCH_PARENT,
   FrameLayout.LayoutParams.MATCH_PARENT 
)
)

最后,加入一个频道,然后AgoraVideoViewer找出其他所有内容:

agView.join(“测试”) 

1gwPCdxKQFc6YwhfO3Z2l1A-2

默认功能

默认情况下,适用于Android的Agora UIKit在进行任何自定义之前都包含以下功能:

  • 自动布置所有视频流
  • 在浮动布局中以更大的显示屏显示有源扬声器
  • 允许您将任何流固定到浮动布局中的较大显示
  • 用于禁用相机或麦克风以及切换相机的按钮
  • 用于指示已禁用本地或远程流媒体麦克风的信号的图标
  • 自动订阅高品质或低品质的视频流,具体取决于布局
  • 两种布局可供选择:浮动和网格

使用AgoraSettings进行基本自定义

该库中的一些基本和更高级的功能使它可以根据您的需求进行自定义。而且,使用AgoraSettings定制的东西越来越多。

定位元素

使用浮动布局时,所有彩带的采集视图的位置以及按钮的采集(例如静音麦克风和sw)可以分别通过floatPosition和来移动buttonPosition。您可以选择该枚举的顶部,右侧,底部和左侧。floatPosition默认为顶部,buttonPosition默认为底部。

颜色

可在中找到可以更改的颜色AgoraSettings.colors,并且该属性的类型为AgoraViewerColors

可用的颜色是micFlag,floatingBackgroundColor,floatingBackgroundAlpha,buttonBackgroundColor和buttonBackgroundAlpha。下图带有注释,以显示所有这些内容:

var agSettings = AgoraSettings()
agoraSettings.colors.micFlag = Color.RED

1yAArWiguZUUE9XP-9Aj2-w-2

选择按钮集

默认情况下,将添加所有按钮(启用/禁用摄像头,切换摄像头,使麦克风静音/取消静音)。按钮集是使用参数enabledButtons创建的。enabledButtons是一个可变的列表enum中,BuiltinButton类型。

如果只想显示用于启用和禁用相机的按钮,则可以这样设置enabledButtons:

val agoraSettings = AgoraSettings()
agoraSettings.enabledButtons = mutableSetOf(AgoraSettings.BuiltinButton.CAMERA)

或者,如果您想显示摄像头,麦克风和切换摄像头按钮:

val agoraSettings = AgoraSettings()
agoraSettings.enabledButtons = mutableSetOf(
AgoraSettings.BuiltinButton.CAMERA,
AgoraSettings.BuiltinButton.MIC,
AgoraSettings.BuiltinButton.FLIP 
)

然后使用AgoraVideoViewer初始化程序应用以下设置:

agView = AgoraVideoViewer(
this,AgoraConnectionData(“ app-id-here”),
agoraSettings = this.settingsWithEnabledButtons()
)
 
val set = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,FrameLayout.LayoutParams.MATCH_PARENT)
this.addContentView(agView,放)agView !!。join(“测试”)

在下面的“高级自定义”部分,您将了解如何添加自己的自定义按钮。

影片设定

您可以在AgoraSettings中找到一些参数来更改视频流的外观。

使用AgoraSettings.videoRenderMode,您可以为本地设备上渲染的所有视频选择AgoraVideoRenderMode,并在填充,适合和隐藏之间进行选择。请在此处查看有关AgoraVideoRenderMode的完整文档。

使用AgoraSettings.videoConfiguration,您可以添加自己的AgoraVideoEncoderConfiguration,并提供尺寸,帧率,比特率,方向等选项。请在此处参阅AgoraVideoEncoderConfiguration的完整文档。

您还可以通过多种方式自定义双码流模式的设置。默认情况下,使用AgoraVideoViewer创建的会话启用双流模式,并采用与以下示例所示相同的默认低比特率参数。可以通过设置AgoraSettings.lowBitRateStream进行自定义,如下所示:

val agoraSettings = AgoraSettings()
agoraSettings.lowBitRateStream =“”“ 
{ 
   ” che.video.lowBitRateStreamParameter“:{ 
     ” width“:160,” height“:120,” frameRate“:5,” bitRate“:45 
    } 
} 
”“ ”

为了更好地理解此设置,以下文章深入讨论了双流模式和低比特率流参数:

多用户视频—在视频通话或交互式视频流方案中,如果多个用户同时发布视频流,则用户…

使用AgoraVideoViewers,浮动视图集合中的所有视频都订阅了低比特率流,直到它们移至主视图或布局更改为网格模式为止。如果网格中的视频数量超过阈值,则网格模式也可以订阅低比特率流,该阈值可在AgoraSettings.gridThresholdHighBitrate中找到。

该值可以设置为任何整数。默认值为4。这意味着,如果在网格视图中显示5个视频,则它们都订阅了低比特率的提要。

订阅低比特率模式很重要,原因有两个:减少订阅了提要的所有用户使用的带宽。通过达到更高的流域带宽,它可以帮助避免在您的Agora帐户上花费更多的时间。

代币获取

当前在此库中的最后一个参数是AgoraSettings.tokenURL。此属性是一个可选字符串,如果提供的令牌已过期或即将到期,则可用于自动获取通道的新访问令牌。

请求新令牌的功能要求令牌遵循GitHub上位于Golang令牌服务器中的URL方案:AgoraIO-Community / agora-token-service

要设置此属性,您可以添加以下代码,用您自己的令牌服务器的URL路径替换地址:

val agoraSettings = AgoraSettings()
agoraSettings.tokenURL =“ http://10.0.2.2:8080

join在您的AgoraVideoViewer上调用方法时,可以触发此功能,如下所示:

agView !!。join(“ test”,role = Constants.CLIENT_ROLE_BROADCASTER,fetchToken = true)

仅当在AgoraSettings中为此AgoraVideoViewer对象提供了tokenURL时,才会触发任何尝试获取新令牌的尝试。

AgoraVideoViewer的高级自定义

选择默认布局-网格或浮动

您可能希望以“网格”或“浮动”的形式设置视频视图的样式。您可以为此使用Style方法。要使用网格布局,必须为AgoraVideoViewer该类设置样式:

agView = AgoraVideoViewer(
this,AgoraConnectionData(“ app-id-here”)
)
agView !!。style = AgoraVideoViewer.Style.GRID

您可以类似地创建一个浮动视图,如下所示:

agView = AgoraVideoViewer(
this,AgoraConnectionData(“ my-app-id”)
)
agView !!。style = AgoraVideoViewer.Style.FLOATING

使用AgoraVideoViewerDelegate添加更多按钮

您可能需要将自己的按钮添加到enabledButtons。您可以为此使用委托方法extraButtons。要使用extraButtons,必须将代理设置为AgoraVideoViewer。AgoraVideoViewer初始化程序中有一个用于此的参数。

extraButtons的示例实现可能如下所示:

val agoraSettings = AgoraSettings()val extraButton = AgoraButton(this)
extraButton.setImageResource(android.R.drawable.star_off)agoraSettings.extraButtons = mutableListOf(extraButton)
1chAznLYG8g2K0KSm3acTmg-1

1chAznLYG8g2K0KSm3acTmg-2

这段代码添加了带有星图android.R.drawable.star_off的按钮。它被添加到按钮集合的末尾,采用与集合中其他按钮相同的样式。

您可以使用clickAction以与其他按钮完全相同的方式向按钮添加一些功能:

val agoraSettings = AgoraSettings()val extraButton = AgoraButton(this)
extraButton.clickAction = { 
it.isSelected =!it.isSelected 
extraButton.setImageResource(if(it.isSelected)android.R.drawable.star_on否则android.R.drawable.star_off)
it.background。 setTint(if(it.isSelected)Color.GREEN else Color.GRAY)
} 
extraButton.setImageResource(android.R.drawable.star_off)agoraSettings.extraButtons = mutableListOf(extraButton)返回agoraSettings
1zMSciTFo8JU7TTKUJ8VyRA-1

1zMSciTFo8JU7TTKUJ8VyRA-2

由于这些按钮是添加到一组现有按钮中的,因此建议不要过多地自定义这些按钮,以免发生设计崩溃的风险。如果要添加完全自定义的按钮,最好的方法是将它们添加到AgoraVideoViewer对象的顶部,然后将enabledButtons设置设置为空集。

AgoraSingleVideoView

除了将所有视频视图一起显示之外,您可能还希望独立放置和组织它们。您可以使用AgoraSingleVideoView进行此操作。

这与AgoraVideoViewer显示框的方式相同。但是,如果您想自己为远程用户创建视图,则可以这样进行:

重写乐趣onJoinChannelSuccess(channel:String ?, uid:Int,elapsed:Int){ 
super.onJoinChannelSuccess(channel,uid,elapsed)
val vidView = AgoraSingleVideoView(this.context,0,Color.BLUE)
// agoraEngine是对您的活动RtcEngine 
agoraEngine.setupLocalVideo(vidView.canvas)
//将vidView放置在您的场景中…… 
}

AgoraSingleVideoView的文档可以在这里找到。

结论

如果您认为可以将许多用户将从中受益的功能添加到适用于Android的Agora UIKit中,请随时分叉存储库并添加拉取请求。或通过功能请求在存储库中打开问题。

计划是要扩展该库,并在所有受支持的平台上提供类似的产品。React NativeiOS已经有类似的库,因此请务必将它们签出。

其他资源

有关使用Agora SDK构建应用程序的更多信息,请参阅《Agora视频通话快速入门指南》和《Agora API参考》

我邀请您加入Agora Developer Slack社区