Tingwu-meeting-ui-components NPM

tingwu-meeting-sdk

阿里巴巴达摩院语音实验室听悟会议 UI 组件

安装

npm install tingwu-meeting-ui-components -S

TingwuMeetingClient

参数

参数	说明	类型
server	域名，暂用听悟服务地址。	string
notLoginListener	未登陆监听(非必需)	() => void

方法

参数	说明	类型	默认
setMeetingInfo	设置会议信息	(meetinInfo: MeetingInfo) => void	null
setLivMeetingInfo	设置当前进行中的会议信息	(livMeetingInfo: LivMeetingInfo) => void	null

MeetingList

听悟会议纪要列表 UI 组件

参数

参数	说明	类型	默认
onStartMeeting	点击开始会议的回调	()=>void	null
onGotoDetail	前往会议详情的回调	(meetingInfo: MeetingInfo)=>void	null
onGotoLiving	前往实时会议的回调	(meetingInfo: MeetingInfo)=>void	null
onGoback	标题栏后退按钮的回调	(...args: any[])=>void	null
deviceStatus	设备状态准备是否就绪	boolean true 为准备就绪	true
loading	开启会议 loading 状态	boolean true 为加载中	false
listHeightValue	控制列表页整体高度	string	100vh

MeetingLive

听悟会议转写直播 UI 组件

参数

参数	说明	类型	默认
mc	拉取会议内容接口所需入参	string	null
onPauseRecord	执行暂停的回调	(transId: number)=>void	null
onResumeRecord	执行恢复的回调	(transId: number)=>void	null
onFinishRecord	执行结束的回调	(transId: number)=>void	null
onChangeTitle	执行修改标题的回调	(transId: number)=>void	null
onGoback	标题栏后退按钮的回调	(...args: any[])=>void	null
onMeetingCreated	进入实时会议组件后抛出组件信息的回调	(livMeetingInfo: LivMeetingInfo)=>void	null
liveHeightValue	控制列表页整体高度	string	100vh

MeetingDetail

听悟会议纪要详情页 UI 组件

参数

参数	说明	类型	默认
summaryInfo.buttonText	整理纪要的按钮文案	any	null
summaryInfo.onSummaryCilck	整理/查看纪要的回调	(transId: number)=>void	null
onDigest	摘取纪要的回调	(paragraphValue: string, info: ParagraphType)=>void	null
onGoback	标题栏后退按钮的回调	(...args: any[])=>void	null
fileHeightValue	离线页面的最外层高度	number/string	100vh
getVideoUrl	获取视频 URL	(playbackIdentifier: string) => Promise<{ status: 0 / 1 / 2, videoUrl?: string, nextTime?:number }>	status: (0 计算中 1 成功 2 失败); nextTime(下次拉取时间): 默认10s
onFullScreen	放大视频	(videoInfo: { title: string; url: string }) => void	null

使用

import React from 'react';
import TingwuMeetingClient from 'tingwu-meeting-ui-components';
import "tingwu-meeting-ui-components/dist/style.css"

interface IProps {}

interface IState {}

class TinwuMeetingSdkTest extends React.Component<IProps, IState> {
  tingwuMeetingSdk: TingwuMeetingClient;

  constructor(props: IProps) {
    super(props);
    this.tingwuMeetingSdk = new TingwuMeetingClient({
      server: '',
      notLoginListener:()=>{}
    });
  }

  render() {
    const { MeetingLive, MeetingList, MeetingDetail } = this.tingwuMeetingSdk;
    return (
      <div
        style={{
          width: 310,
          height: 1000,
          margin: '0 auto',
          border: '1px solid gray',
        }}
      >
        <MeetingList
          onStartMeeting={() => {}}
          onGotoDetail={() => {}}
          onGoback={()=>{}}
          deviceStatus = {false || true}
          loading = {false || true}
          listHeightValue = '100vh'
        />
        <MeetingLive
          meetingTime={0}
          onResumeRecord={() => {}}
          onFinishRecord={() => {}}
          onPauseRecord={() => {}}
          onChangeTitle={()=>{}}
          onGoback={()=>{}}
          onMeetingCreated={()=>{}}
          liveHeightValue = '100vh'
        />
        <MeetingDetail
          transId={0}
          summaryInfo={{
             buttonText: '';
             onSummaryCilck: (transId: number) => {};
          }}
          onDigest={(paragraphValue: string, info: ParagraphType)=>{}}
          onGoback={()=>{}}
          onFullScreen={(videoInfo: { title: string; url: string })=>{}}
          fileHeightValue={`calc(100vh + ${headerHegith})`}
          // fileHeightValue={1038}
          getVideoUrl={(playbackIdentifier: string) => {
          return new Promise((resolve, reject) => {
            resolve({
              status: 1,
              videoUrl: '',
              nextTime: 10000,
            });
          })
        }}
        />
      </div>
    );
  }
}

export default TinwuMeetingSdkTest;