一.背景

公司业务发展，需要搭建一套线上的web会议室平台系统，包含pc+H5端，而且需要集成语音的实时转写功能。

二.看文档

领导和我说公司买了腾讯的服务器啥的，直接和我说让我去研究腾讯TRTC的文档，接到任务的时候挺兴奋的，因为没搞过，所以不放过这次学习的机会。

三.项目中使用

1.引入对应的包

npm i trtc-js-sdk
npm i mul_speech_recogn //语音识别

语音识别的那个包是我自己从腾讯的demo代码里拉下搞得包，demo地址

2.TRTC引入

TRTC方法可以创建一个实时音视频通信的客户端对象 (Client) 和本地音视频流对象 (Stream)。这张图可以更好的理解。 1.检测TRTC web SDK是否之前当前浏览器。(可以更具我们的业务需求在不同阶段检测，避免用户在当前浏览器操作了很多后，进入会议室的时候提醒当前浏览器不支持，用户体验不好) 2.初始化客户端对象(TRTC.createClient)

export const meetPerson = reactive({
  client: '', //客户端对象
  mediator: { //本地流
    video: '',
    audio: ''
  },
  applicant: {  //远端流1
    video: '',
    audio: ''
  },
  respondent: {  //远端流2
    video: '',
    audio: ''
  }
})

export const initClient = async (state) => {
  meetPerson.client = TRTC.createClient({
    sdkAppId: state.SDKAPPID, // 填写您申请的 sdkAppId
    userId: state.mediator,  // 填写您业务对应的 userId
    userSig: state.userSig, // 填写服务器或本地计算的 userSig
    mode: 'rtc'              //mode有俩种情况 rtc：实时通话   live:互动直播模式
  })
}

sdkAppId,userId,userSig这些数据放在后台去生成，然后你通过接口去请求。这几个参数的相关问题可以看腾讯的文档，非常详细。 3.进入房间，进入房间成功以后创建本地音视频流并且初始化并且订阅远端流

const joinRoom = async () => {
  initClient(state)  //进入房间本地客户端要先初始化完毕
  meetPerson.client
    .join({ roomId: state.roomId })
    .then((res) => {
      initLocalStream(state) //进入房间成功以后创建本地音视频流并且初始化
      addFar(state) //订阅远端流
    })
    .catch((error) => {
      console.error('进入房间失败' + error)
    })
}

4.创建本地音视频流并且初始化

export const initLocalStream = async (state) => {
  meetPerson.mediator.video = TRTC.createStream({  //创建本地音视频流
    audio: true, //音频，根据你的检测情况
    video: true, //视频，根据你的检测情况
    userId: state.mediator //角色ID
  })
  try {
    await meetPerson.mediator.video.initialize() //初始化本地音视频
    meetPerson.mediator.audio = makeAsr(meetPerson.mediator.video) //创建本地角色语音识别
    await meetPerson.mediator.video.play('mediator') //将本地流挂载到id为mediator的dom元素下
    await meetPerson.client.publish(meetPerson.mediator.video) //发布本地流
    speech(meetPerson) //语音识别的相关代码
  } catch (err) {
    meetPerson.mediator.video = ''
    alert(`${JSON.stringify(err.message)}`)
  }
}

//audio.js
//创建ASR实例
export const makeAsr = (role) => {
  const obj = new ASR({
    secretKey: ,
    secretId: ,
    appId: 
    engine_model_type: '16k_zh', // 引擎
    voice_format: 1,
    // 以下为非必填参数，可跟据业务自行修改
    hotword_id: '08003a00000000000000000000000000', //热词 id。用于调用对应的热词表，如果在调用语音识别服务时，不进行单独的热词 id 设置，自动生效默认热词；如果进行了单独的热词 id 设置，那么将生效单独设置的热词 id。
    needvad: 1, //0：关闭 vad，1：开启 vad。如果语音分片长度超过60秒，用户需开启 vad（人声检测切分功能）。
    filter_dirty: 1, //是否过滤脏词（目前支持中文普通话引擎）。默认为0。0：不过滤脏词；1：过滤脏词；2：将脏词替换为 * 。
    filter_modal: 1, //是否过语气词（目前支持中文普通话引擎）。默认为0。0：不过滤语气词；1：部分过滤；2：严格过滤 。
    filter_punc: 0, //	是否过滤句末的句号（目前支持中文普通话引擎）。默认为0。0：不过滤句末的句号；1：过滤句末的句号。
    convert_num_mode: 1, //是否进行阿拉伯数字智能转换（目前支持中文普通话引擎）。0：不转换，直接输出中文数字，1：根据场景智能转换为阿拉伯数字，3: 打开数学相关数字转换。默认值为1。
    word_info: 2, //是否显示词级别时间戳。0：不显示；1：显示，不包含标点时间戳，2：显示，包含标点时间戳。支持引擎 8k_en、8k_zh、8k_zh_finance、16k_zh、16k_en、16k_ca、16k_zh-TW、16k_ja、16k_wuu-SH，默认为0。
    audioTrack: role.getAudioTrack() //获取音轨
  })
  return obj
}

//语音识别的函数 可以根据自己的情况选择其中的某些函数  传递参数 来识别不同流的语音
export const speech = (meetPerson, name, index) => {
  meetPerson.start()
  // 开始识别
  meetPerson.OnRecognitionStart = (res) => {
    console.log('本地流：开始识别', res)
  }
  // 一句话开始
  meetPerson.OnSentenceBegin = (res) => {
    console.log('本地流：一句话开始', res)
  }
  // 识别变化时
  meetPerson.OnRecognitionResultChange = (res) => {
    console.log('本地流：识别变化时', res)
  }
  // 一句话结束
  meetPerson.OnSentenceEnd = (res) => {
    console.log('本地流：一句话结束', res)
  }
  // 识别有结果时
  meetPerson.OnChange = (res) => {
    console.log('本地流：识别中', res)
  }
  // 识别结束
  meetPerson.OnRecognitionComplete = (res) => {
    console.log('本地流：识别结束', res)
  }
  // 识别错误
  meetPerson.OnError = (res) => {
    console.log('本地流：识别失败', res)
  }
}

5.进入房间后订阅远端流 如果远端流订阅成功，播放远端流

export const addFar = async (state) => {
  meetPerson.client.on('stream-added', (event) => {
    const remoteStream = event.stream
    meetPerson.client.subscribe(remoteStream)  //订阅远端流
  })
  meetPerson.client.on('stream-subscribed', (event) => {  
    if (event.stream.userId_ === state.applicant) { //根据远端流的userid来判断身份，然后挂载到对应的dom元素下
      meetPerson.applicant.video = event.stream
      meetPerson.applicant.audio = makeAsr(event.stream)
      await meetPerson.applicant.video.play('applicant') //挂载dom
      speech(meetPerson.applicant.audio, 4, 'applicant') //语音识别相对应的流
    } else if (event.stream.userId_ === state.respondent) {
      meetPerson.respondent.video = event.stream
      meetPerson.respondent.audio = makeAsr(event.stream)
      await meetPerson.respondent.video.play('respondent') //挂载dom
      speech(meetPerson.respondent.audio, 5, 'respondent')  //语音识别相对应的流
    }
  })
}

6.离开房间 取消监听远端流，取消发布本地流，取消语音识别，退出房间

const leaveRoom = () => {
  meetPerson.mediator.video && meetPerson.mediator.video.stop()
  meetPerson.mediator.video && meetPerson.mediator.video.close()
  meetPerson.mediator.video = null
  meetPerson.client.off('*')
  meetPerson.client.unpublish(meetPerson.mediator.video)
  meetPerson.mediator.audio.stop()
  meetPerson.client
    .leave()
    .then(() => {
      // 退房成功，可再次调用client.join重新进房开启新的通话。
    })
    .catch((error) => {
      console.error('退房失败 ' + error)
      // 错误不可恢复，需要刷新页面。
    })
}

demo地址 因为写文章的时候这个方案已经被老板非否定了，可能过一阵子又会搞，哈哈，所以项目里针对一些异常情况的处理还没有来得及搞。demo会放在文章末尾。TRTC的文档写的很棒，有问题直接去翻文档就可以了，

分享

demo地址 1.在实时通话的模式下，创建本地clint对象，需要sdkAppId，userId，userSig这三个参数，userId可以用来识别用户的身份，userSig相当于一个密钥，在开发的时候我们可以在官网搞一个签发的userSig。UserSig 相关 2.开启高级权限控制，开启高级权限控制后，TRTC 的后台服务系统就不会仅校验 UserSig 这一个“进房票据”，还会校验一个叫做 PrivateMapKey 的“权限票据”，在进入房间的函数里加上privateMapKey这个参数。 3.在会议结束之后，可以主动的通过发送接口给腾讯来解散房间。链接 ...待更，后续完善。