更新记录

1.0.1(2020-12-13)

  1. 解决插件和微信小程序不通的问题
  2. Android端增加日志文件输出

1.0.0(2020-11-26)

1.0.0

发布原生的推流 拉流组件 ,配合环信Web-SDK可快速集成音频通话、视频通话、音视频连麦等功能

查看更多

平台兼容性

Android iOS
适用版本区间:4.4 - 11.0 支持CPU类型:armeabi-v7a,arm64-v8a,x86 适用版本区间:9 - 14

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


环信音视频插件集成

集成步骤参考:集成参考

环信音视频插件接口说明

环信音视频插件包括推流插件和拉流插件,都使用自定义组件component,接口说明如下

推流插件

推流插件负责发布流,显示本地视频,组件名称为emlive-pusher,前端使用如下

<emlive-pusher ref="player" style="width:350px;height:300px" muted="false" enable-camera="true" video-width="640" video-height="480" min-bitrate="300" max-bitrate="800" device-position="front" mirror="true" object-fit="fill" isClarityFirst="true" rtcLogToConsole="true" @bindstatechange="onStateChange" @bindnetstatus="onNetStatusChange" @callbackData="onData" @callbackStats="onStats"></emlive-pusher>

插件属性

属性名称 类型 描述
ref String 页面根据ref找到该组件
style String h5组件原生属性,插件不用管理,需要处理updateStyles回调方法
muted BOOL 是否静音
enableCamera BOOL 是否打开摄像头
devicePosition String 使用摄像头,front为前置,back为后置
videoWidth Int 视频分辨率宽
videoHeight Int 视频分辨率高
minBitrate Int 最小视频码率
maxBitrate Int 最大视频码率
mirror BOOL 是否镜像,Android独有,iOS没有
objectFit String 填充方式,fit和fill
isClarityFirst BOOL 是否清晰度优先
rtcLogToConsole BOOL 是否将Rtc日志输出到控制台

插件事件

事件名称 描述
bindstatechange 状态变化事件,detail={code, info},code为状态码,info为描述
bindnetstatus 网络状态通知,detail={code, info},code为状态码,info为描述
callbackData 数据回调通知,detail={type,data},type为类型,分feature、log、custom,若为feature,前端要把data转发给服务器,包括信令交互、音频、视频管理操作等;打开rtcLogToConsole后,Rtc日志从这里回调上去
callbackStats 通话质量统计,detail={data},data为通话质量数据,包括视频分辨率、码率、丢包率等

code状态码

code值 info 描述
2000 {isPusher,streamId,description:"RTCIceConnectionStateNew"} 建立流媒体链接
2001 {isPusher,streamId,description:"RTCIceConnectionStateChecking"} 检测流媒体连接状态
2002 {isPusher,streamId,description:"RTCIceConnectionStateConnected"} 流媒体连接成功
2003 {isPusher,streamId,description:"RTCIceConnectionStateCompleted"} 流媒体连接过程完成
2004 {isPusher,streamId,description:"RTCIceConnectionStateFailed"} 流媒体连接失败
2005 {isPusher,streamId,description:"RTCIceConnectionStateDisconnected"} 流媒体断开连接
2006 {isPusher,streamId,description:"RTCIceConnectionStateClosed"} 流媒体关闭连接
2100 send first audio frame 发送音频首帧
2101 send first video frame 发送视频首帧
2104 audio has no data 音频无数据
2105 video has no data 视频无数据
3000 open camera fail 打开摄像头失败
3001 open mic fail 打开麦克风失败
4000 net connected 网络已连接
4001 net poor quality 网络不稳定
4002 net disconnected 网络已断开

插件api

api 描述
start({uId,sessId,rtcCfg,tktId,reopen}) 开始推流,相当于原来的pubStream,uId为环信登录Id,sessId和rtcCfg为服务器返回,tktId为成员ticketId,重连时reopen传true |
stop 停止推流,相当于原来的unpubStream
setData({data}) 设置从服务器收到的sdp、candidate等

拉流插件

拉流插件负责订阅流,显示对方视频,组件名称为emlive-player,前端使用如下

<emlive-player ref="customers" style="width:350px;height:300px" muted="false" enable-camera="true" object-fit="fill" rtcLogToConsole="true" @bindstatechange="onStateChange" @bindnetstatus="onNetStatusChange" @callbackData="onData" @callbackStats="onStats"></emlive-player>

插件属性

属性名称 类型 描述
ref String 页面根据ref找到该组件,可以关联streamId
style String h5组件原生属性,插件不用管理,需要处理updateStyles回调方法
objectFit String 显示模式,fill/fit
muted BOOL 对方是否打开音频
enableCamera BOOL 对方是否打开视频
rtcLogToConsole BOOL 是否将Rtc日志输出到控制台
openSpeaker BOOL 是否打开扬声器

插件事件

事件名称 描述
bindstatechange 状态变化事件,detail={code, info},code为状态码,info为描述
bindnetstatus 网络状态通知,detail={code, info},code为状态码,info为描述
callbackData 数据回调通知,detail={type,data},type为类型,分feature、log、custom,若为feature,前端要把data转发给服务器;打开rtcLogToConsole后,Rtc日志从这里回调上去
callbackStats 通话质量统计,detail={data},data为通话质量数据,包括视频分辨率、码率、丢包率等

code状态码

code值 info 描述
2000 {isPusher,streamId,description:"RTCIceConnectionStateNew"} 建立流媒体链接
2001 {isPusher,streamId,description:"RTCIceConnectionStateChecking"} 检测流媒体连接状态
2002 {isPusher,streamId,description:"RTCIceConnectionStateConnected"} 流媒体连接成功
2003 {isPusher,streamId,description:"RTCIceConnectionStateCompleted"} 流媒体连接过程完成
2004 {isPusher,streamId,description:"RTCIceConnectionStateFailed"} 流媒体连接失败
2005 {isPusher,streamId,description:"RTCIceConnectionStateDisconnected"} 流媒体断开连接
2006 {isPusher,streamId,description:"RTCIceConnectionStateClosed"} 流媒体关闭连接
2102 receive first audio frame 接收到音频首帧
2103 receive first video frame 接收到视频首帧
2104 audio has no data 音频无数据
2105 video has no data 视频无数据
4000 net connected 网络已连接
4001 net poor quality 网络不稳定
4002 net disconnected 网络已断开

插件api

api 描述
play({streamId,sessId,rtcCfg,uId,reopen}) 开始拉流,相当于原来的subStream,sessId,rtcCfg从服务器获取,uId为环信登录Id,重连时reopen传true
stop 停止拉流,相当于原来的unsubStream
setData({data}) 设置从服务器收到的sdp、candidate等

隐私、权限声明

1. 本插件需要申请的系统权限列表:

麦克风 摄像头

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

采集麦克风 摄像头数据 集成音频通话、视频通话、音视频连麦等功能

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

请参考开源项目地址的开源协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问