miniprogram-doctor/TUICallKit/TUICallKit/TUICallKit.js

import { TUIStore, StoreName, NAME } from "../index";

const {
  CALL_STATUS,
  CALL_ROLE,
  CALL_MEDIA_TYPE,
  LOCAL_USER_INFO,
  REMOTE_USER_INFO_LIST,
  CALLER_USER_INFO,
  IS_GROUP,
  CALL_DURATION,
  PUSHER,
  PLAYER,
  BIG_SCREEN_USER_ID,
  IS_EAR_PHONE,
  LOCAL_VIDEO,
  MYSELF,
  TOAST_INFO,
} = NAME;

Component({
  properties: {},
  data: {
    callStatus: TUIStore.getData(StoreName.CALL, CALL_STATUS), // 通话状态
    isGroupCall: TUIStore.getData(StoreName.CALL, IS_GROUP), // 是否群通话
    callMediaType: TUIStore.getData(StoreName.CALL, CALL_MEDIA_TYPE), // 通话类型
    callDuration: TUIStore.getData(StoreName.CALL, CALL_DURATION), // 通话时长
    callRole: TUIStore.getData(StoreName.CALL, CALL_ROLE), // 通话角色
    isEarPhone: TUIStore.getData(StoreName.CALL, IS_EAR_PHONE), // 声音模式 听筒/扬声器
    bigScreenUserId: TUIStore.getData(StoreName.CALL, BIG_SCREEN_USER_ID), // 大屏显示的用户
    localUserInfo: TUIStore.getData(StoreName.CALL, LOCAL_USER_INFO), // 本地用户信息
    callerUserInfo: TUIStore.getData(StoreName.CALL, CALLER_USER_INFO),// 邀请者用户信息
    remoteUserInfoList: TUIStore.getData(StoreName.CALL, REMOTE_USER_INFO_LIST), // 远端用户信息
    pusher: TUIStore.getData(StoreName.CALL, PUSHER), // TRTC 本地流
    playerList: TUIStore.getData(StoreName.CALL, PLAYER), // TRTC 远端流
    playerProcess: {}, // 经过处理的的远端流(多人通话)
  },
  methods: {
    // 监听通话状态变更回调
    handleCallStatusChange(value) {
      this.setData({
        callStatus: value,
      });
      console.log("通话状态该笔");
      console.log(this.data.callerUserInfo);
      console.log(this.data.localUserInfo);
    },
    // 监听是否群组通话变更回调
    handleIsGroupChange(value) {
      this.setData({
        isGroupCall: value,
      });
    },
    // 监听通话类型变更回调
    handleCallMediaTypeChange(value) {
      this.setData({
        callMediaType: value,
      });
    },
    // 监听通话角色变更回调
    handleCallRoleChange(value) {
      this.setData({
        callRole: value,
      });
    },
    // 监听通话时长变更回调
    handleCallDurationChange(value) {
      this.setData({
        callDuration: value,
      });
    },
    // 监听声音模式变更回调
    handleEarPhoneChange(value) {
      this.setData({
        isEarPhone: value,
      });
    },
    // 监听大屏显示的用户变更回调
    handleScreenChange(value) {
      if (value === LOCAL_VIDEO) {
        this.setData({
          bigScreenUserId: true,
        });
      } else {
        this.setData({
          bigScreenUserId: false,
        });
      }
    },
    // 监听本地用户信息变更回调
    handleLocalUserInfoChange(value) {
      this.setData({
        localUserInfo: value,
      });
    },
    // 监听到邀请者信息变更回调
    handleCallerUserInfoChange(value) {
      this.setData({
        callerUserInfo: value,
      });
    },
    // 监听远端用户信息变更回调
    handleRemoteUserInfoListChange(value) {
      this.setData({
        remoteUserInfoList: value,
      });
    },
    // 监听 TRTC 本地流变更回调
    handlePusherChange(value) {
      this.setData({
        pusher: value,
      });
    },
    // 监听 TRTC 远端流变更回调
    handlePlayerListChange(value) {
      if (this.data.isGroupCall) {
        const convertToPlayer = this.convertToObj(value);
        this.setData({
          playerProcess: convertToPlayer,
        });
      } else {
        this.setData({
          playerList: value,
        });
      }
    },
    // 监听到弹窗信息变更回调
    handleToastInfoChange(value) {
      if (value.text) {
        this.showToast(value.text, value.type || "info");
      }
    },
    showToast(value, type) {
      switch (type) {
        case "info":
          wx.showToast({
            title: value,
            icon: "none",
          });
          break;
        default:
          break;
      }
    },
    convertToObj(arr = []) {
      const tempObject = {};
      for (let i = 0; i < arr.length; i++) {
        tempObject[arr[i].userID] = arr[i];
      }
      return tempObject;
    },
  },

  // 生命周期方法
  lifetimes: {
    attached() {
      let that = this;
      TUIStore.watch(
        StoreName.CALL,
        {
          [CALL_STATUS]: this.handleCallStatusChange.bind(that),
          [IS_GROUP]: this.handleIsGroupChange.bind(that),
          [CALL_MEDIA_TYPE]: this.handleCallMediaTypeChange.bind(that),
          [CALL_DURATION]: this.handleCallDurationChange.bind(that),
          [CALL_ROLE]: this.handleCallRoleChange.bind(that),
          [IS_EAR_PHONE]: this.handleEarPhoneChange.bind(that),
          [BIG_SCREEN_USER_ID]: this.handleScreenChange.bind(that),
          [LOCAL_USER_INFO]: this.handleLocalUserInfoChange.bind(that),
          [CALLER_USER_INFO]: this.handleCallerUserInfoChange.bind(that),
          [REMOTE_USER_INFO_LIST]: this.handleRemoteUserInfoListChange.bind(that),
          [TOAST_INFO]: this.handleToastInfoChange.bind(that),
          [PUSHER]: this.handlePusherChange.bind(that),
          [PLAYER]: this.handlePlayerListChange.bind(that),
        },
        {
          notifyRangeWhenWatch: MYSELF,
        }
      );
    },
    async detached() {
      let that = this;
      TUIStore.unwatch(StoreName.CALL, {
        [CALL_STATUS]: this.handleCallStatusChange.bind(that),
        [IS_GROUP]: this.handleIsGroupChange.bind(that),
        [CALL_MEDIA_TYPE]: this.handleCallMediaTypeChange.bind(that),
        [CALL_DURATION]: this.handleCallDurationChange.bind(that),
        [CALL_ROLE]: this.handleCallRoleChange.bind(that),
        [IS_EAR_PHONE]: this.handleEarPhoneChange.bind(that),
        [BIG_SCREEN_USER_ID]: this.handleScreenChange.bind(that),
        [LOCAL_USER_INFO]: this.handleLocalUserInfoChange.bind(that),
        [CALLER_USER_INFO]: this.handleCallerUserInfoChange.bind(that),
        [REMOTE_USER_INFO_LIST]: this.handleRemoteUserInfoListChange.bind(that),
        [TOAST_INFO]: this.handleToastInfoChange.bind(that),
        [PUSHER]: this.handlePusherChange.bind(that),
        [PLAYER]: this.handlePlayerListChange.bind(that),
      });
    },
  },
});