接入文档
FaceID基础版
RAW纯接口接入
炫彩活体
开始验证
开始验证

# 版本

V2.0.0

# 引入JS-SDK

RtcVideo实例化

接口说明:实例化rtcVideo,在此接口设置video的宽、高、回调接口等

参数 说明 类型 是否必填 默认值
videoWrapper 插入video的节点 string 必填
width video的宽,默认是320px,需填写单位px, rem, em;此宽高为video宽高,当video宽高与视频宽高不符合时,视频按照video宽高的最长边等比缩放 string 非必填 320px
height video的高,默认是320px,需填写单位px, rem, em;此宽高为video宽高,当video宽高与视频宽高不符合时,视频按照video宽高的最长边等比缩放 string 非必填 320px
token 用户服务器端请求getToken返回的token, getToken禁止使用前端调用,前端调用存在api_key泄漏风险 string 必填
videoPermsTimeout 获取摄像头权限超时时间,单位:毫秒 number 非必填 6000
webSocketTimeout WebSocket超时时间,单位:毫秒 number 非必填 6000
WebRTCTimeout WebRTC链接超时时间,单位:毫秒 number 非必填 6000
colorListener 颜色变化监听 (color:string, status:string, index:number,
sum:number)=>{}
必填
tipListener 提示语变化监听 (tipCode:string, tipTxt:string)=>{} 必填
resultCallback 结果回调,包含成功,失败 (isSuccess:boolean,resultCode:string,
resultMessage:string)=>{}
必填
statusListener 状态变更监听,用于埋点分析。不要在此进行逻辑判断。可不传 (statusCode:string)=>{} 非必填 undefined
autoplayFailCallback 视频无法自动播放时回调,需要在用户点击事件内触发play。可不传,为空时会默认覆盖一个播放按钮 (play:function)=>{} 非必填 undefined

示例代码

let rtcVideo = new RtcVideo({
	videoWrapper: 'videoWrapper', //页面中镶嵌video元素的位置,需要使用id属性
	width: '320px', //video的宽,默认是320px,需填写单位px, rem, em;此宽高为video宽高,当video宽高与视频宽高不符合时,视频按照video宽高的最长边等比缩放
	height: '320px', //video的高,默认是320px,需填写单位px, rem, em;
	token: 'xxxxxxx', //用户服务器端请求getToken返回的token,  getToken禁止使用前端调用,前端调用存在api_key泄漏风险
	videoPermsTimeout: '6000', //获取摄像头权限超时时间,毫秒
	webSocketTimeout: '6000', //WebSocket超时时间,毫秒
	WebRTCTimeout: '6000', //WebRTC链接超时时间,毫秒
	colorListener: (color, status, index, sum)=>{}, //传递color给用户,用户监听color变化,修改页面背景颜色
	tipListener: (tipCode, tipTxt)=>{}, //提示语信息
	statusListener: (statusCode)=>{}, //状态的改变,可对各个状态做相应处理(如处理加载中交互)、日志埋点等需求
	resultCallback: (isSuccess, resultCode, resultMessage)=>{}, //结果回调
	autoplayFailCallback: (play)=>{},//视频无法自动播放时回调,需要在用户点击事件内触发play。可不传,为空时会默认覆盖一个播放按钮
})
rtcVideo.start()

以上JS方法说明

1.colorListener(color, status, index, sum)

接口说明:传递color给用户,用户监听color变化,修改页面背景颜色

参数说明:

参数 说明
color 需要打光的16进制颜色,例:”#00FFFF“
status RESET/PROCESS/FINISH
  • RESET:重置,背景颜色还原到初始值,颜色可以自由设置
  • PROCESS:正在打光中,背景须设置到color颜色
  • FINISH:打光结束,颜色可以自由设置
index 当前打光进度,例:1,需配合sum计算进度
sum 总打光数量,依赖于Raw-GetToken接口设置的color_number

2.tipListener(tipCode, tipTxt)

接口说明:提示语信息

参数说明:

tipCode tipTxt
NoFaceFound 未发现人脸
InvalidFaceYaw 请正对摄像头
InvalidFacePitch 请正对摄像头
InvalidFaceEyeOcclusion 请露出眼睛
InvalidFaceMouth 请露出嘴巴
TooFarAwayFromCamera 请靠近摄像头
TooCloseFromCamera 请远离摄像头
InvalidFaceOutOfImage 请正视摄像头
InvalidFaceBrightness 请调节光线
FaceOK 很好,请保持不动

3.statusListener(statusCode)

接口说明:状态的改变,可以用于日志埋点等需求

参数说明:

statusCode 说明
INIT_LOADING 初始化配置loading,可对各个状态做处理
INIT_LOADING_SUCCESS 初始化配置loading状态结束,建立WebRTC 连接成功,这台设备支持炫彩
LOOK_MIRROR 照镜子开始,由于用户刷新重试等原因,此状态可能出现多次
SHOW_COLOR 打光开始,由于用户刷新重试等原因,此状态可能出现多次
RESULT_LOADING 打光结束等待返回结果loading,由于用户刷新重试等原因,此状态可能出现多次
RESULT_LOADING_SUCCESS 打光结束等待返回结果loading结束
SUCCESS 完整流程成功
FAIL 完整流程失败

炫彩活体主流程根据 statusListener进行变更。INIT_LOADING、INIT_LOADING_SUCCESS 为初始化配置阶段,之后进入主要需要处理的流程。

4.resultCallback(isSuccess,resultCode,resultMessage)

接口说明:在此接口处理整个活体流程的结果

参数说明:

resultCode
resultMessage
说明 备注
1000 SUCCESS 炫彩流程正常结束,不代表活体检测通过, 需通过调用raw_get_result接口获取活体检测的结果 炫彩流程成功
2000 DISCONNECTED webrtc连接断开,需要用户特殊处理,弹窗提升网络断开,刷新页面 炫彩流程失败
3000 TIMEOUT 检测流程超时,30秒,从建立连接完成开始计算 炫彩流程失败
4000 SUPPORT_ERROR 当前设备不支持炫彩活体:浏览器不支持webrtc,无法初始化
4000 PERMISSIONS_ERROR 当前设备不支持炫彩活体:浏览器无权限访问摄像头或用户拒绝,或6s内仍无法获取权限
4000 NETWORK_ERROR 当前设备不支持炫彩活体:建立webrtc连接后,6s内仍无法传输流
5000 TOKEN_EXPIRED token超时/无效 炫彩流程失败
5000 TOKEN_TIMES_EXCEEDED token使用次数过多 炫彩流程失败
5000 ILLEGAL_PARAMETER:{params} 初始化传入参数不合法,{}内为具体不合法参数 炫彩流程失败

raw_get_result禁止使用前端调用,前端调用存在api_key泄漏风险

5.autoplayFailCallback(play)

接口说明:视频无法自动播放时回调,需要在用户点击事件内触发play。可不传,为空时会默认覆盖一个播放按钮

参数说明:

参数 说明
play 方法,需要放在用户事件内调用,如点击事件内调用play()。可不传,为空时会默认覆盖一个播放按钮

以上配置完成后,开始炫彩活体验证。

# 开始验证

1.start()

参数说明:开始验证,此时才会唤起摄像头。并在id为videoWrapper的标签内插入video标签。

示例代码:

rtcVideo.start()

2.version()

参数说明:获取当前版本号

示例代码:

rtcVideo.version()

# 终止验证

1.destroy()

参数说明:主动销毁过程,会关闭webrtc,终止流程。在成功/失败回调中无需调用。videoWrapper标签内的video不会删除,需要手动删除,也可直接删除videoWrapper标签。在打光中销毁,会停留在当前打光颜色,需要自行处理。

示例代码:

rtcVideo.destroy()

# 历史版本文档

https://bj-faceid-prod-asset.oss-cn-beijing.aliyuncs.com/raw_js_sdk/old-doc/jssdk_1.0.pdf

该文档未解决您的疑问?查看常见问题