eli-video-interview-demo

鳄梨科技-AI视频面试web端插件

AI视频面试web端插件是鳄梨科技提供的【AI视频题目+AI视频报告】的服务，致力于用AI解决大规模人力资源问题，此插件需搭配【小程序插件】来使用。

✨ 特性

• 简单易用
• 包含的组件有AI视频题目、AI视频报告、视频预览
• 使用 TypeScript 构建，提供完整的类型定义文件

📦 安装

// npm
npm i eli-video-interview --save

// yarn
yarn add eli-video-interview

🔨 配置

import { avocadoVideoInterview } from 'eli-video-interview';

const App: React.FC = () => {
  useEffect(() => {
    avocadoVideoInterview.init({
      server_url: '', // 接口域名地址
      auth_callback: () => new Promise((resolve, reject) => { // 授权认证回调 return Promise
        resolve({
          accessToken: '', // 必须返回accessToken为接口授权认证
          expireTime: 0, // accessToken过期时间（可以不返回）
        });
      }),
    });
  }, []);
}

AI视频题目

AI视频题目组件内置了AI测评题目模版，支持9种题型【普通题、色盲检测、英文字母识别、语言能力、游戏决策-气球、数字记忆、情绪判断、全身素质检测、局部纹身检测】，也可以根据自身需求自定义自由作答题或语言能力题，可自定义引导视频。

Example

import { AiQuestion, useAiQuestion } from 'eli-video-interview';

const { handleSubmit, handleValues, ...aiQuestionProps } = useAiQuestion({ token });

const handleSave = async () => {
  const { code, message, data } = await handleSubmit();
  if (code === 0) { // code === 0: 提交成功
    console.log({ code, message, data });
    // 具体业务实现逻辑
  }
};

return (
  <AiQuestion {...aiQuestionProps} />
)

API

参数	说明	类型	必传	默认值
token	-	string	是	-
name	职位名称	string	否	-
historyPatterns	已有岗位模型，当数据为空时会禁用已有岗位模型切换	Array<any>	否	[]
mediaList	引导视频	Array<MediaList>	否	[]

AiQuestionInstance

名称	说明	类型
handleValues	获取AI视频题目所有字段值	() => AiQuestionValues
handleSubmit	提交AI视频题目	() => Promise<AiQuestionSubmitRes>

MediaList

参数	说明	类型
url	视频地址	string
thumbUrl	视频图片	string

AiQuestionValues

名称	说明	类型
data	题目信息	{ name?: string; token?: string; steps: QuestionModelStep[] | undefined; }
media	引导视频	{ mediaUrl?: string; thumbUrl?: string; }

AiQuestionSubmitRes

名称	说明	类型
code	业务状态码	number
data	主体信息	{ token: string; mediaUrl: string; thumbUrl: string; } | undefined
message	提示信息	string

QuestionModelStep

名称	说明	类型
name	题目名称	string
token	题目ID	string
type	题目类型	number
desc	题目描述	string
prepareTime	准备时长	number
duration	回答时长	number
category	标签信息	string[]
broadcastType	题目播报类型	number
aiSwitch	题目是否开启AI分析	number
aiType	是否可AI评分，值为2视为是可AI评分题目	number
weight	题目权重	number | string
language	语种	number
aiShowType	题目作答类型	number
answerStatus	题目重复作答状态	number
videoBroadcast	题目播报类型为视频播报时存储的参数	VideoBroadcast
aiAbilities	题目AI分析参数集合	AiAbilityParams[]

VideoBroadcast

名称	说明	类型
videoRetry	允许重复听题	number
videoUrl	视频地址	string

AiAbilityParams

名称	说明	类型
name	AI维度名称	string
token	AI维度ID	string
type	AI维度类型	number
category	AI维度分类	number
desc	AI维度描述	string
weight	AI维度权重	number | string
relatedAbilities	语种所关联的AI维度类型集合	number[]
extra	AI维度【是否意愿、要点分析】字段值	string
sort	AI维度排序	number

AI视频报告

AI视频报告组件可根据面试者的答题情况，计算出视频面试得分及单题目的综合评分，您也可以手动调节单题的评分分值，手动调节后会重新计算视频面试得分。

Example

import React, { FC, useState, useCallback } from 'react';
import { Box } from 'fbm-ui';
import { AiReport, VideoPreview, useAiReport } from 'eli-video-interview';

const Report: FC = () => {
  const token = ''; // 具体业务token
  const [steps, setSteps] = useState<any[]>([]); // 题目信息
  const [faceAnalysis, setFaceAnalysis] = useState<any>({}); // 人脸识别信息
  const [pageStepIndexes, setPageStepIndexes] = useState<number[]>([]); // 具有视频信息的下标集合
  const [stepIndex, setStepIndex] = useState<number>(0); // 当前题目下标

  const aiReport = useAiReport({
    token,
    disabledScore: false,
    scoreRankIntervals: [],
    stepToken: steps[pageStepIndexes[stepIndex]]?.token,
    operableButtons: ['export', 'refresh', 'scoreRank', 'abilities'],
    onLoad: params => {
      setSteps(params.steps);
      setFaceAnalysis(params.faceAnalysis);
      setPageStepIndexes(params.pageStepIndexes);
    },
    onScoreChange: scoreState => {
      console.log(scoreState);
    },
    onStepChange: stepToken => {
      const index = steps.findIndex(({ token }) => token === stepToken);
      const stepIndex = pageStepIndexes.findIndex(i => i === index);
      setStepIndex(stepIndex);
    },
    onScoreRankIntervalsChange: scoreRankIntervals => {
      console.log(scoreRankIntervals);
    },
  });

  const handlePrev = useCallback(() => {
    setStepIndex(stepIndex - 1);
  }, [stepIndex]);

  const handleNext = useCallback(() => {
    setStepIndex(stepIndex + 1);
  }, [stepIndex]);

  return (
    <Box sx={{ width: '100%', height: '100%', overflow: 'hidden' }}>
      <Box sx={{ position: 'absolute', left: 100 }}>
        {steps.length > 0 && pageStepIndexes.length > 0 && (
          <VideoPreview
            url={steps[stepIndex].answer.videoUrl}
            faceAnalysis={faceAnalysis}
            currentPage={pageStepIndexes[stepIndex] + 1}
            totalPage={steps.length}
            disabledPrev={stepIndex === 0}
            disabledNext={stepIndex === pageStepIndexes.length - 1}
            onNext={handleNext}
            onPrev={handlePrev}
          />
        )}
      </Box>
      <Box sx={{ width: '584px', height: '100%', margin: '0 auto' }}>
        <AiReport {...aiReport} />
      </Box>
    </Box>
  );
};

export default Report;

API

参数	说明	类型	必传	默认值
token	订单ID	string	是	-
scoreRankIntervals	排名区间	ScoreRankInterval[]	否	-
disabledScore	禁用调整分值	boolean	否	true
reminderSent	是否已提醒面试者作答	boolean	否	-
operableButtons	可操作按钮组	Array<'export' | 'refresh' | 'scoreRank' | 'abilities' | 'sendReminder'>	否	-
stepToken	当前选中视频题目token	string	否	-
onLoad	报告数据获取成功后回调事件	(values: AiReportLoadedValues) => void	否	-
onExportReportClick	点击导出报告后回调事件	() => void	否	-
onScoreChange	分值更新时触发回调事件	(scoreState?: ScoreManualUpdateState) => void	否	-
onStepChange	选中视频题更新时触发回调事件	(stepToken: string) => void	否	-
onSendReminderClick	点击发送提醒后回调事件	() => void	否	-
onScoreRankIntervalsChange	排名区间更新时触发回调事件	(scoreRankIntervals?: ScoreRankIntervals[]) => void	否	-
onScoreRankIntervalsSubmit	排名区间提交成功后触发回调事件	(scoreRankIntervals?: ScoreRankIntervals[]) => Promise<any>	否	-

AiReportInstance

名称	说明	类型
handleRefresh	刷新报告数据	() => void

AiReportLoadedValues

名称	说明	类型
faceUrl	人脸照片	string
faceAnalysis	人脸分析（颜值得分、年龄）	FaceAnalysis
steps	题目信息	any[]
pageStepIndexes	具有视频信息的下标集合	number[]

FaceAnalysis

名称	说明	类型
age	年龄	number
beauty	颜值得分	number

ScoreRankInterval

名称	说明	类型
rank	-	number
scoreRankIntervals	排名区间	ScoreRankIntervals
score	排名分数	Score

ScoreRankIntervals

名称	说明	类型
startRankProportion	开始区间比例	number
endRankProportion	结束区间比例	number

Score

名称	说明	类型
startScore	开始区间分数	number
endScore	结束区间分数	number

ScoreManualUpdateState

名称	说明	类型
flowStepToken	当前分值的token	string
type	分值类型（1: 总分；2: ai纬度）	1 | 2
aiAbilityChangeType	纬度类型，type=2时存在	number
score	分值	number

AI视频预览

AI视频预览组件可配合AI视频报告组件使用，展示单题答题者的视频情况。

Example

import { VideoPreview } from 'eli-video-interview';

// 具体示例请在AI视频报告查看

API

参数	说明	类型	必传	默认值
url	预览视频链接	string	是	-
faceAnalysis	人脸分析（颜值得分、年龄）	FaceAnalysis	否	-
isShowPageTurning	是否显示分页	boolean	否	true
currentPage	当前页数	number	否	1
totalPage	总页数	number	否	1
disabledPrev	禁用上一页按钮	boolean	否	false
disabledNext	禁用下一页按钮	boolean	否	false
width	组件宽度	number | string	否	-
style	自定义样式	CSSProperties	否	-
onPrev	点击上一页后回调事件	() => void	否	-
onNext	点击下一页后回调事件	() => void	否	-

全局类型常量

题目作答类型

1: 自由作答
2: 跟读

题目播报类型

1: 语音播报
2: 视频播报

题目是否开启AI分析

1: 开启
2: 关闭

题目重复作答状态

1: 允许重复作答
2: 不允许重复作答

AI分析语种

2: 普通话
11: 英文
12: 日语
16: 粤语

AI维度类型

1: 形象打分
3: 语意流畅
4: 保持微笑
5: 语言丰富
6: 要点分析
7: 语速
8: 是否意愿
9: 年龄
10: 颜值

AI维度分类

1: 语种
2: 语意
3: 表达
4: 形象
6: 语言能力

允许重复听题

0: 不允许
1: 允许

HTTP状态码

API采用标准HTTP错误码来表示接口的错误:

状态码	含义
200	OK -- 请求成功
400	Bad Request -- 接口请求参数错误.
401	Unauthorized -- 认证信息非法.
403	Forbidden -- 所访问的资源拒绝访问.
404	Not Found -- 访问的资源不存在.
405	Method Not Allowed -- 错误的请求Method.
500	Internal Server Error -- 服务器内部错误.
503	Service Unavailable -- 服务器暂时不可用.

业务状态码

状态码	含义
0	OK -- 请求成功
其他code	ERROR -- 请求失败