让你意想不到的直播插件

简介

声网直播uniapp原生插件是由赣州智悦科技有限公司编写的一款在uniapp中接入声网视频互动直播的原生插件,使用此插件可以完美地对接视频互动直播,合图推流到CDN并播放视频,实时消息发送与接收功能。

目前仅支持Android版,iOS版在计划中。

有任何使用问题,请入QQ群:320125035

其他项目文档

zywork-app-pro快速开发套件文档:https://easydoc.xyz/s/37090916
Svga动画播放uniapp原生插件文档:https://easydoc.xyz/s/63143579

三大组件

1、AgoraView,对应于RtcEngine实例
视频互动直播组件:完成视频录制,视频转码,视频推拉流等功能。

2、AgoraMediaPlayer,对应于AgoraMediaPlayerKit实例
媒体播放器组件:完成对合流后视频的播放功能。

3、AgoraRtm,对应于RtmClient实例
实时消息组件:私人消息与频道消息,支持文本,图片和文件。

注意

1、所有组件的接口与声网官方的接口名称及参数名称保持一致,参数多使用JSON格式。
2、所有组件的接口方法调用返回JSON格式的结果,该结果基本与声网官方的返回结果保持一致(有用的结果)。
3、所有事件函数都以on开头,在组件中使用@onXXX="onXXX"的形式进行事件回调监听。
如创建RtcEngine实例的create方法,在插件中的调用形式为:

 

agoraView.create({appid: 'appid'}, res => {console.log(res)})

如监听joinChannelSuccess事件,在插件中的使用形式为:

 

AgoraView直播组件

使用方法

1、在uniapp插件市场中直接下载插件后解压
2、把解压后的zywork-agora目录拷贝到uniapp项目的nativeplugins目录中
3、打开项目的manifest.json文件,在App原生插件中选择本地插件,勾选zywork声网直播插件
4、在nvue页面中直接使用组件
主播:

 

上麦嘉宾:

 

5、相关接口调用示例

 

/** * 主播开启直播间 */ export const openLive = (self) => { self.isHost1 = true let agoraView = self.$refs.agoraView1 agoraView.create({appid: AGORA_APPID}) if (self.houseType.onlyAudio) { // 如果只要语音,则关闭视频模块 agoraView.disableVideo(res => {}) } else { agoraView.enableVideo(res => {}) } agoraView.setEnableSpeakerphone({enableSpeaker: true}, res => {}) if (self.houseType.onlyAudio) { // 声音检测 agoraView.enableAudioVolumeIndication({interval: 300, smooth: 3, reportVad: true}) } agoraView.setVideoEncoderConfiguration({width: self.houseType.width, height: self.houseType.height}, res => {}) agoraView.setClientRole(1, res => {}) if (!self.houseType.onlyAudio) { // 是否启用视频 agoraView.setupLocalVideo({channelName: self.liveChannelId, uid: self.hostInfo.userId}, res => {}) agoraView.setBeautyEffectOptions({ enabled: true, contrastLevel: CONTRAST_LEVEL, lightening: LIGHTENING, smoothness: SMOOTHNESS, redness: REDNESS }) agoraView.startPreview(res => {}) } // 获取rtc token后加入直播频道 doGet('/agora-token/rtc/' + self.liveChannelId + '/' + self.hostInfo.userId, {}, {}, true).then(response => { let [err, res] = response if (res.data.code === ResponseStatus.OK) { agoraView.joinChannel({ token: res.data.data, channelName: self.liveChannelId, uid: self.hostInfo.userId, }, res => {}) } }).catch(error => { }) }

6、所有接口都可以参考声网官方的API文档Agora Android V3.1.2

注意事项

1、在同一个nvue页面中可以使用多个AgoraView组件,每一个AgoraView表示一个主播(上麦嘉宾)端,如直播5人间,则有5个AgoraView组件。
2、每个AgoraView都需要指定不同的ref属性;
3、每个AgoraView都使用absolutefixed定位方式,具体的定位值,宽高等可自定义;
4、在开启房间的主播端需要监听更多的事件,而在上麦嘉宾端有些事件并不需要监听;
5、在AgoraView组件中,不要使用v-if的方式来动态渲染组件,可以使用图片遮盖或动态修改定位值的方式来显示与隐藏AgoraView组件;
6、AgoraView的宽高比需要与视频采集分享率的宽高比一致(后面会有详细说明)。

接口说明

create,创建RtcEngine实例

 

create({ appid: AGORA_APPID }, res => {})

返回结果:

 

{ code: 0 | 1, message: 'RtcEngine create成功' | 'RtcEngine create失败' }

enableVideo,开启视频模块

 

enableVideo(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'enableVideo成功' | 'enableVideo失败' }

disableVideo,关闭视频模块

 

disableVideo(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'disableVideo成功' | 'disableVideo失败' }

enableAudio,开启音频模块

 

enableAudio(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'enableAudio成功' | 'enableAudio失败' }

disableAudio,关闭音频模块

 

disableAudio(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'disableAudio成功' | 'disableAudio失败' }

setEnableSpeakerphone,设置是否启用扬声器

 

setEnableSpeakerphone({ enableSpeaker: true | false // 是否启用扬声器 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setEnableSpeakerphone成功' | 'setEnableSpeakerphone失败' }

setVideoEncoderConfiguration,设置视频编码配置,主要设置视频采集分辨率的宽高

 

setVideoEncoderConfiguration({ width: 360, // 视频采集分辨率的宽 height: 640 // 视频采集分辨率的高 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setVideoEncoderConfiguration成功' | 'setVideoEncoderConfiguration失败' }

注意:视频采集分辨率的宽高比与单个直播视频窗口的宽高比要保持一致,否则会出现视频拉伸的情况。

setClientRole,设置加入频道的用户类型

 

setClientRole(1 | 2, res => {}) // 1表示主播,2表示观众

返回结果:

 

{ code: 0 | 负数, message: 'setClientRole成功' | 'setClientRole失败' }

setupLocalVideo,设置本地视频

 

setupLocalVideo({ channelName: 'demoChannel1', // 频道名称 uid: 1001 // 用户编号,int型 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setupLocalVideo成功' | 'setupLocalVideo失败' }

setLocalRenderMode,设置本地视频渲染模式

 

setLocalRenderMode({ renderMode: 2, // 本地视图渲染模式 mirrorMode: 0 // 本地视图的镜像模式 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setLocalRenderMode成功' | 'setLocalRenderMode失败' }

注意:详细参数说明请参考声网官方API文档setLocalRenderMode

setupRemoteVideo,设置远端视频

 

setupRemoteVideo({ channelName: 'demoChannel1', // 频道名称 uid: 1001 // 用户编号,int型 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setupRemoteVideo成功' | 'setupRemoteVideo失败' }

setRemoteRenderMode,设置远端视频渲染模式

 

setRemoteRenderMode({ renderMode: 2, // 远端用户视图渲染模式 mirrorMode: 0 // 远端用户视图的镜像模式 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setRemoteRenderMode成功' | 'setRemoteRenderMode失败' }

注意:详细参数说明请参考声网官方API文档setRemoteRenderMode

startPreview,开始视频预览

 

startPreview(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'startPreview成功' | 'startPreview失败' }

stopPreview,停止视频预览

 

stopPreview(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'stopPreview成功' | 'stopPreview失败' }

setBeautyEffectOptions,设置是否启用美颜和美颜参数

 

setBeautyEffectOptions({ enabled: true | false, // 是否启用美颜功能 contrastLevel: 1, // 亮度明暗对比度 lightening: 0.7, // 亮度,取值范围为 [0.0, 1.0],其中 0.0 表示原始亮度,默认值为 0.7。可用来实现美白等视觉效果 smoothness: 0.5, // 平滑度,取值范围为 [0.0, 1.0],其中 0.0 表示原始平滑等级,默认值为 0.5。可用来实现祛痘、磨皮等视觉效果 redness: 0.1 // 红色度,取值范围为 [0.0, 1.0],其中 0.0 表示原始红色度,默认值为 0.1。可用来实现红润肤色等视觉效果 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setBeautyEffectOptions成功' | 'setBeautyEffectOptions失败' }

joinChannel,加入直播频道

 

setBeautyEffectOptions({ token: 'token value', // Agora鉴权token,需要在后台生成并返回 channelName: 'demoChannel1', // 频道名 uid: 1001 // 用户编号,int型 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'joinChannel成功' | 'joinChannel失败' }

joinChannel执行成功将会触发以下回调事件:

1)onJoinChannelSuccess,本地用户成功加入频道回调事件

 

onJoinChannelSuccess = (e) => { let res = e.detail console.log(res.channelName) // 频道名 console.log(res.uid) // 加入频道的本地用户编号 }

注意:本地用户加入直播频道成功会触发此回调事件

2)onUserJoined,远端用户成功加入频道回调事件

 

onUserJoined = (e) => { let res = e.detail console.log(res.uid) // 加入频道的远端用户编号 }

注意:远端用户加入直播频道成功,则在麦上的所有主播(嘉宾)都会触发此回调事件。如A和B已经上麦,C加入成功,则A和B都会触发C加入频道的回调事件,C会触发A加入频道的回调事件,C还会触发B加入频道的回调事件。

3)onRemoteVideoStateChanged,远端视频状态改变回调事件

 

onRemoteVideoStateChanged = (e) => { let res = e.detail console.log(res.uid) // 发生视频状态改变的远端用户 ID console.log(res.state) // 远端视频流状态 console.log(res.reason) // 远端视频流状态改变的具体原因 }

e.detail.state === 1时表示本地用户已接收远端视频首包,此时可以在本地用户端调用setupRemoteVideo显示远端用户视频。

注意:详细的返回结果说明请参考声网官方的API文档onRemoteVideoStateChanged

4)onRemoteAudioStateChanged,远端音频状态改变回调事件

 

onRemoteAudioStateChanged = (e) => { let res = e.detail console.log(res.uid) // 发生音频状态改变的远端用户 ID console.log(res.state) // 远端音频流状态 console.log(res.reason) // 远端音频流状态改变的具体原因 }

e.detail.state === 1时表示本地用户已接收远端音频首包,但此时由于只需要音频,而不需要视频,则不需要本地用户端调用setupRemoteVideo显示远端用户视频。

注意:详细的返回结果说明请参考声网官方的API文档onRemoteVideoStateChanged

leaveChannel,离开直播频道

 

leaveChannel(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'leaveChannel成功' | 'leaveChannel失败' }

leaveChannel执行成功会触发以下回调事件:

1)onLeaveChannel,本地用户离开直播频道回调事件

 

onLeaveChannel = (e) => { let res = e.detail console.log(res.totalDuration) // 通话时长 console.log(res.users) // 直播频道内的用户数 }

2)onUserOffline,远端用户离开直播频道回调事件

 

onUserOffline = (e) => { let res = e.detail console.log(res.uid) // 主播ID console.log(res.reason) // 离线原因 }

注意:离线原因请参考声网官方API文档onUserOffline

adjustPlaybackSignalVolume,调节本地播放的所有远端用户音量

 

adjustPlaybackSignalVolume({ volume: 100 // 播放音量,取值范围为 [0, 400] }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'adjustPlaybackSignalVolume成功' | 'adjustPlaybackSignalVolume失败' }

setLiveTranscoding,设置视频合流参数(多个直播视频流合成一个视频流)

 

setLiveTranscoding({ audioChannels: 2, audioBitrate: 96, width: self.videoWidth, height: self.videoHeight, videoBitrate: 1200, videoFramerate: 30, backgroundImageUrl: PLAYER_BG, backgroundImageX: 0, backgroundImageY: 0, backgroundImageWidth: self.videoWidth, backgroundImageHeight: self.videoHeight, users: [ { uid: self.hostInfo.userId, x: (self.videoWidth - self.videoHostWidth) / 2, y: 0, width: self.videoHostWidth, height: self.videoHostHeight, zOrder: 1, audioChannel: 0 } ...... ] }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setLiveTranscoding成功' | 'setLiveTranscoding失败' }

注意:上面示例代码中的self.引用的数据是在nvue页面的data中定义的数据或根据屏幕大小等计算的值。详情请参考setLiveTranscoding, LiveTranscoding和TranscodingUser

setLiveTranscoding执行成功会触发以下回调事件:
1)onTranscodingUpdated,合图转码更新回调事件

 

onTranscodingUpdated= (e) => { let res = e.detail console.log(res.update) // true,表示transcoding已更新 }

addPublishStreamUrl,添加视频推流地址

 

addPublishStreamUrl({ url: 'push_address_url', // 推流地址URL,可以使用腾讯云直播生成推流地址 transcodingEnabled: true // 是否开启直播转码,如果是单个主播,不需要开启直播转码 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'addPublishStreamUrl成功' | 'addPublishStreamUrl失败' }

注意:如果需要推流到多个地址,可多次调用。

removePublishStreamUrl,删除视频推流地址

 

removePublishStreamUrl({ url: 'push_address_url', // 推流地址URL,请替换成实际的推流地址 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'removePublishStreamUrl成功' | 'removePublishStreamUrl失败' }

注意:如果删除多个推流地址,可多次调用。

enableAudioVolumeIndication,启用说话者音量提示

 

enableAudioVolumeIndication({ interval: 300, // 指定音量提示的时间间隔 smooth: 3, // 平滑系数,指定音量提示的灵敏度。取值范围为 [0, 10],建议值为 3 reportVad: true // 是否开启人声检测 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'enableAudioVolumeIndication成功' | 'enableAudioVolumeIndication失败' }

后续触发的回调事件:
1)onAudioVolumeIndication,提示频道内谁正在说话及说话者音量的回调事件

 

onAudioVolumeIndication= (e) => { let res = e.detail console.log(res) // 每个说话者的用户 ID 和音量信息 }

本地用户:

 

res = { '0': 1, // 本地用户在说话 }

远端用户:

 

res = { '1001': 0, '1002': 0 }

注意:详情请参考声网官方API文档onAudioVolumeIndication

2)onActiveSpeaker,监测到最活跃用户回调事件

 

onActiveSpeaker= (e) => { let res = e.detail console.log(res.uid) // 远端最活跃用户的编号 }

renewToken,更新Token

 

renewToken({ token: 'new rtc token' // 声网鉴权Token,后台动态生成 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'renewToken成功' | 'renewToken失败' }

getConnectionState,获取网络连接状态

 

getConnectionState(res => {})

返回结果:

 

{ connectionState: 1 | 2 | 3 | 4 | 5 }

注意:返回结果详情请参考声网官方API文档getConnectionState

startAudioMixing,开始混音

 

startAudioMixing({ filePath: '/storage/test.mp3', // 指定需要混音的本地或在线音频文件的绝对路径(包含文件名后缀) loopback: false, replace: false, cycle: 1 // 音频文件循环播放的次数 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'startAudioMixing成功' | 'startAudioMixing失败' }

注意:详细参数请参考声网官方API文档startAudioMixing

setDefaultAudioRoutetoSpeakerphone,设置是否默认使用扬声器

 

setDefaultAudioRoutetoSpeakerphone({ defaultSpeaker: true // 是否默认从扬声器播放音频 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'setDefaultAudioRoutetoSpeakerphone成功' | 'setDefaultAudioRoutetoSpeakerphone失败' }

isSpeakerphoneEnabled,判断扬声器是否启用

 

isSpeakerphoneEnabled(res => {})

返回结果:

 

{ code: 0 | -1, message: '扬声器已启用' | '扬声器已禁用' }

startChannelMediaRelay,开始跨频道媒体流转发,可用于跨频道主播PK

 

startChannelMediaRelay({ srcChannelName: 'demoChannel1', // 源频道名 srcToken: 'rtc token', // 源频道使用的声网鉴权Token destChannelName: 'demoChannel2', // 目标频道 destToken: 'rtc token', // 目标频道使用的声网鉴权Token uid: 1002 // 用户编号 }, res => {})

返回结果:

 

{ code: 0 | 负数, message: 'startChannelMediaRelay成功' | 'startChannelMediaRelay失败' }

跨频道PK,两个频道的主播都需要调用此接口。

注意:更多详情请参考声网官方API文档startChannelMediaRelay

成功调用后会触发以下回调事件:
1)onChannelMediaRelayStateChanged,跨频道媒体流状态改变回调事件

 

onChannelMediaRelayStateChanged= (e) => { let res = e.detail console.log(res.code) // 跨频道媒体流转发出错的错误码 console.log(res.state) // 跨频道媒体流转发状态 }

注意:详情请参考声网官方API文档onChannelMediaRelayStateChanged

2)onChannelMediaRelayEvent,跨频道媒体流转发事件

 

onChannelMediaRelayEvent= (e) => { let res = e.detail console.log(res.code) // 跨频道媒体流转发事件码 }

注意:详情请参考声网官方API文档onChannelMediaRelayEvent

stopChannelMediaRelay,停止跨频道视频直播

 

stopChannelMediaRelay(res => {})

返回结果:

 

{ code: 0 | 负数, message: 'stopChannelMediaRelay成功' | 'stopChannelMediaRelay失败' }

destroy,销毁RtcEngine实例

 

destroy()

其他事件:
onTokenPrivilegeWillExpire,Token即将过期回调事件

 

onTokenPrivilegeWillExpire= (e) => { let res = e.detail console.log(res.token) // 即将过期的Token值 }

onConnectionStateChanged,连接状态改变回调事件

 

onConnectionStateChanged= (e) => { let res = e.detail console.log(res.state) // console.log(res.reason) // }

注意:详情请参考声网官方APIonConnectionStateChanged

onConnectionLost,连接丢失回调事件

 

onConnectionLost= (e) => { let res = e.detail console.log(res.connectionLost) // 是否丢失连接 }

 

AograMediaPlayer播放器组件

使用方法

1、在uniapp插件市场中直接下载插件后解压
2、把解压后的zywork-agora目录拷贝到uniapp项目的nativeplugins目录中
3、打开项目的manifest.json文件,在App原生插件中选择本地插件,勾选zywork声网直播插件
4、在nvue页面中直接使用组件

注意事项

接口说明

 

 

AgoraRtm实时消息组件

使用方法

1、在uniapp插件市场中直接下载插件后解压
2、把解压后的zywork-agora目录拷贝到uniapp项目的nativeplugins目录中
3、打开项目的manifest.json文件,在App原生插件中选择本地插件,勾选zywork声网直播插件
4、在nvue页面中直接使用组件

注意事项

接口说明

SVGA动画播放

SVGA动画播放通常用于礼物的展示,可直接使用赣州智悦科技有限公司编写的SVGA动画播放uniapp插件。
插件地址:https://ext.dcloud.net.cn/plugin?id=2763
文档地址:https://easydoc.xyz/s/63143579

 

你可能感兴趣的:(插件,直播插件,uniapp,app,git,其他)