RealtorEasier/apps/agent/pages/room/room.js

import { genTestUserSig } from './GenerateTestUserSig.js'
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    roomID: 1, // 房间号
    role: '',
    userList: [], // 主播list
    userID: '',
    debugMode: false,
    initialRole: '',
    showRolePanel: false,
    presenterConfig: {
      enableMic: true,
      muteAllAudio: false,
    },
    headerHeight: app.globalData.headerHeight,
    statusBarHeight: app.globalData.statusBarHeight,
    rtcConfig: {
      sdkAppID: '1400537003', // 必要参数 开通实时音视频服务创建应用后分配的 sdkAppID
      userID: '', // 必要参数 用户 ID 可以由您的帐号系统指定
      userSig: '', // 必要参数 身份签名，相当于登录密码的作用
      template: '', // 必要参数 组件模版，支持的值 1v1 grid custom ，注意：不支持动态修改, iOS 不支持 pusher 动态渲染
    },
  },
  enterRoom: function({ sdkAppID, userSig }) {
    const template = 'custom'
    const roomID = this.data.roomID
    console.log('* room enterRoom', roomID, template)
    this.data.rtcConfig = {
      sdkAppID: sdkAppID, // 您的实时音视频服务创建应用后分配的 sdkAppID
      userID: '2',
      userSig: userSig,
      template: template, // 1v1 grid custom
      debugMode: this.data.debugMode, // 非必要参数，打开组件的调试模式，开发调试时建议设置为 true
      audioVolumeType: this.data.audioVolumeType,
    }
    this.setData({
      rtcConfig: this.data.rtcConfig,
    }, () => {
      // 进房前决定是否推送视频或音频
      if (this.data.role === 'presenter') {
        this.trtcComponent.publishLocalAudio()
      }
      // roomID 取值范围 1 ~ 4294967295
      this.trtcComponent.enterRoom({ roomID: roomID })
    })
  },
  getSignature: function(userID) {
    console.log('* room getSignature', userID)
    const Signature = genTestUserSig(userID)
   
    this.enterRoom({
      sdkAppID: Signature.sdkAppID,
      userSig: Signature.userSig,
    })
  },
  bindTRTCRoomEvent: function() {
    const TRTC_EVENT = this.trtcComponent.EVENT
    // 初始化事件订阅
    this.trtcComponent.on(TRTC_EVENT.LOCAL_JOIN, (event)=>{
      console.log('* room LOCAL_JOIN', event)
      // 进房成功，触发该事件后可以对本地视频和音频进行设置
      // if (this.data.role === 'presenter') {
      //   this.trtcComponent.publishLocalAudio()
      // }
    })
    this.trtcComponent.on(TRTC_EVENT.LOCAL_LEAVE, (event)=>{
      console.log('* room LOCAL_LEAVE', event)
    })
    this.trtcComponent.on(TRTC_EVENT.ERROR, (event)=>{
      console.log('* room ERROR', event)
    })
    // 远端用户进房
    this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_JOIN, (event)=>{
      console.log('* room REMOTE_USER_JOIN', event, this.trtcComponent.getRemoteUserList())
      const userList = this.trtcComponent.getRemoteUserList()
      this.handleOnUserList(userList).then(() => {
        console.log(this.data.userList)
      })
    })
    // 远端用户退出
    this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_LEAVE, (event)=>{
      console.log('* room REMOTE_USER_LEAVE', event, this.trtcComponent.getRemoteUserList())
      const userList = this.trtcComponent.getRemoteUserList()
      this.handleOnUserList(userList).then(() => {
        console.log(this.data.userList)
      })
    })
    // 远端用户推送音频
    this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_ADD, (event)=>{
      if (this.data.userList.length < 6) {
        // 订阅音频
        const data = event.data
        // 如果不订阅就不会自动播放音频
        const userList = this.trtcComponent.getRemoteUserList()
        this.handleOnUserList(userList).then(() => {
          console.log(this.data.userList)
        })
        console.log('* room REMOTE_AUDIO_ADD', event, this.trtcComponent.getRemoteUserList())
        this.trtcComponent.subscribeRemoteAudio({ userID: data.userID })
      }
    })
    // 远端用户取消推送音频
    this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, (event)=>{
      console.log('* room REMOTE_AUDIO_REMOVE', event, this.trtcComponent.getRemoteUserList())
      const userList = this.trtcComponent.getRemoteUserList()
      this.handleOnUserList(userList).then(() => {
        console.log(this.data.userList)
      })
    })
    this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_VOLUME_UPDATE, (event)=>{
      const userID = event.data.target.dataset.userid
      const volume = event.data.detail.volume
      this.data.userList.forEach((item) =>{
        if (item.userID === userID) {
          item.volume = volume
        }
      })
      this.setData({
        userList: this.data.userList,
      })
    })
  },
  handleOnUserList: function(userList) {
    return new Promise((resolve, reject) => {
      const newUserList = []
      let index = 0
      const oldUserList = this.data.userList
      userList.forEach((item) => {
        if (item.hasMainAudio) {
          const user = this.judgeWhetherExist({ userID: item.userID, streamType: 'main' }, oldUserList)
          index += 1
          if (user) {
            // 已存在
            newUserList.push(Object.assign(user, { index: index }))
          } else {
            newUserList.push({
              userID: item.userID,
              streamType: 'main',
              index: index,
              hasMainAudio: item.hasMainAudio,
              volume: 0,
            })
          }
        }
      })
      this.setData({
        userList: newUserList,
      }, () => {
        console.log('handleOnUserList newUserList', newUserList)
        resolve()
      })
    })
  },
  judgeWhetherExist: function(target, userList) {
    userList.forEach( (item) => {
      if (target.userID === item.userID && target.streamType === item.streamType) {
        return item
      }
    })
    return false
  },
  handlePublishAudio() {
    if (this.data.presenterConfig.enableMic) {
      this.trtcComponent.unpublishLocalAudio()
      const config = this.data.presenterConfig
      config.enableMic = false
      this.setData({
        presenterConfig: config,
      }, () => {
        wx.showToast({
          title: '您已关闭麦克风',
          icon: 'none',
          duration: 500,
        })
      })
    } else {
      this.trtcComponent.publishLocalAudio()
      const config = this.data.presenterConfig
      config.enableMic = true
      this.setData({
        presenterConfig: config,
      }, () => {
        wx.showToast({
          title: '您已开启麦克风',
          icon: 'none',
          duration: 500,
        })
      })
    }
  },
  handleMuteAllAudio() {
    if (this.data.presenterConfig.muteAllAudio) {
      this.data.userList.forEach((item) => {
        this.trtcComponent.subscribeRemoteAudio({ userID: item.userID })
      })
      const config = this.data.presenterConfig
      config.muteAllAudio = false
      this.setData({
        presenterConfig: config,
      }, () => {
        wx.showToast({
          title: '取消禁音成功',
          icon: 'none',
          duration: 500,
        })
      })
    } else {
      this.data.userList.forEach((item) => {
        this.trtcComponent.unsubscribeRemoteAudio({ userID: item.userID })
      })
      const config = this.data.presenterConfig
      config.muteAllAudio = true
      this.setData({
        presenterConfig: config,
      }, () => {
        wx.showToast({
          title: '禁音成功',
          icon: 'none',
          duration: 500,
        })
      })
    }
  },
  /**
   * 返回上一页
   */
  onBack: function() {
    wx.navigateBack({
      delta: 1,
    })
  },
  handleRoleChange() {
    if (this.data.initialRole !== 'presenter' ) {
      this.setData({
        showRolePanel: !this.data.showRolePanel,
      })
    }
  },
  confirmRoleChange() {
    if (this.data.role === 'audience') {
      this.trtcComponent.publishLocalAudio().then(() => {
        this.setData({
          role: 'presenter',
          showRolePanel: false,
        })
      }).catch(() => {
        wx.showToast({
          icon: 'none',
          title: '上麦失败',
        })
      })
    } else {
      this.trtcComponent.unpublishLocalAudio().then(() => {
        this.setData({
          role: 'audience',
          showRolePanel: false,
        })
      }).catch(() => {
        wx.showToast({
          icon: 'none',
          title: '下麦失败',
        })
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   * @param {*} options 配置项
   */
  onLoad: function(options) {
    console.log('room onload', options)
    wx.setKeepScreenOn({
      keepScreenOn: true,
    })
    // 获取 rtcroom 实例
    this.trtcComponent = this.selectComponent('#trtc-component')
    Object.getOwnPropertyNames(options).forEach((key) => {
      if (options[key] === 'true') {
        options[key] = true
      }
      if (options[key] === 'false') {
        options[key] = false
      }
    })
    // 监听TRTC Room 关键事件
    this.bindTRTCRoomEvent()
    this.setData({
      roomID: 1,
      // role: 1,
      // initialRole: 1,
      userID: '2',
      debugMode:true,
      // audioVolumeType: options.audioVolumeType,
    }, () => {
      this.getSignature('2')
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    console.log('room ready')
    wx.setKeepScreenOn({
      keepScreenOn: true,
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    console.log('room show')
    wx.setKeepScreenOn({
      keepScreenOn: true,
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
    console.log('room hide')
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    console.log('room unload')
    wx.setKeepScreenOn({
      keepScreenOn: false,
    })
  },
})