GCLS_Page_Learn/src/views/new_live/teacher/live.js

import { ref, reactive } from 'vue';
import { Message, Loading } from 'element-ui';
import { useLive, useCommonLive, rtc } from '../common/common';
import { DealStudentConnection, GetStudentInfo_Connection, GetLiveRoomInfo, StartGroup } from '@/api/live';
import { useRoute } from 'vue-router/composables';

import i18n from '@/locales/i18n';
import store from '@/store';

const {
  publishStream,
  getHistory,
  getDevice,
  createLocalStream,
  sendPublishMessage,
  handsDown: commonHandsDown,
  updateMcResult,
  roomUpdate,
  drawChange
} = useLive();
const { studentExitLiveRoom } = useCommonLive();

/**
 * 教师直播特有的 rtc 方法
 */
export function useTeacherLiveRtc() {
  /**
   * 开启直播
   */
  function startLive() {
    rtc.value.startLive({
      success(data) {
        console.log(data);
        publishStream('main'); // 如果需要立即推流，执行 publish 方法
        Message({
          message: i18n.t('Key452'),
          type: 'success'
        });
      },
      fail(data) {
        Message({
          message: `${i18n.t('Key453')}：${data}`,
          type: 'warning'
        });
      }
    });
  }

  /**
   * 结束直播
   */
  function stopLive() {
    rtc.value.stopLive({
      success() {
        // Message({
        //   type: 'success',
        //   message: i18n.t('Key454')
        // });
        console.log('结束直播成功');
      },
      fail(data) {
        // Message({
        //   type: 'error',
        //   message: `${i18n.t('Key455')}：${JSON.stringify(data)}`
        // });
        console.log('结束直播失败', data);
      }
    });
  }

  /**
   * 推送桌面共享
   */
  function publishShareStream() {
    rtc.value.publishShareStream({
      success: (stream) => {
        console.log('推送桌面共享成功', stream);
      },
      fail: (str) => {
        console.log(str);
      }
    });
  }

  /**
   * 关闭桌面共享
   */
  function unPubShareStream() {
    rtc.value.unPubShareStream();
  }

  /**
   * 踢出房间
   * @param {String} userid
   */
  function kickOut(userid) {
    rtc.value.kickOut(userid, (err) => {
      if (err === undefined) {
        Message.success('踢出成功');
      } else {
        Message.error('踢出失败');
      }
    });
  }

  /**
   * 开启、结束、暂停、恢复录制
   * @param { String } status: 'start' 开启, 'end' 结束, 'pause' 暂停, 'resume' 恢复
   */
  function liveRecord(status) {
    rtc.value.liveRecord({
      status,
      success(data) {
        console.log('成功', data);
      },
      fail(str) {
        console.log(str);
      }
    });
  }

  // 连麦

  /**
   * 老师端发起邀请，邀请学生上麦。（举手模式）
   * @param {Object} object
   */
  function invite(object) {
    rtc.value.invite(object);
  }

  // 文档

  // 获取文档列表
  function getInstructionAllDocument(success, failed) {
    rtc.value.getInstructionAllDocument({
      getInstructionAllDocumentSuccess: success,
      getInstructionAllDocumentFailed: failed
    });
  }

  // 获取单个文档详情
  function getSingleDocument(docId, callback) {
    rtc.value.getSingleDocument({
      docId,
      getSingleDocumentCallback: callback
    });
  }

  function docChange(obj) {
    rtc.value.docChange(obj);
  }

  return {
    startLive,
    stopLive,
    publishShareStream,
    unPubShareStream,
    liveRecord,
    invite,
    getInstructionAllDocument,
    getSingleDocument,
    docChange,
    kickOut
  };
}

/**
 * 初始化监听事件
 */
export function useInitListener({
  roomData,
  chatList,
  device: devices,
  getLiveRoomData_DRTD,
  connect,
  callLoading,
  connectUid,
  dealStudentConnection,
  roomInfo,
  roomContext,
  liveStat,
  speakData,
  connectStudent,
  handsDownUid,
  task_id,
  setDevice,
  hasAudio,
  hasVideo,
  remoteStreamType
}) {
  rtc.value.on('login_success', (data) => {
    console.log('登录成功', data);
    roomData.value = data;
    // 初始化画板需要的数据
    const canvasInitData = {
      allowDraw: true, // 是否具有书写画笔权限（讲师权限） true / false
      id: 'draw-parent',
      pptDisplay: 1, // 文档展示方式。默认0，按窗口  1，按宽度
      liveId: data.live.status === 1 ? data.live.id : '' // 如果直播已经开始，需将直播 id 传入 sdk 中
    };
    // 初始化画板
    rtc.value.canvasInit(canvasInitData);
  });

  rtc.value.on('login_failed', (data) => {
    console.log('登录失败', data);
    Message({
      message: `${i18n.t('Key443')}：${JSON.stringify(data)}`,
      type: 'warning'
    });
  });

  // 教师 必须在加入房间成功的事件回调里创建本地流
  rtc.value.on('conference_join', () => {
    console.log('加入房间成功');
    getHistory({
      success(data) {
        const chatLog = data.datas.meta.chatLog.map(({ content, userName }) => {
          return { msg: content, username: userName };
        });
        chatList.value = chatLog;
      },
      fail(str) {
        console.log(str);
      }
    });

    getDevice({
      success(data) {
        console.log('获取音视频设备成功', data);
        const device = store.state.app.liveDevice;
        devices.value = data;

        if (data.video.length === 0 && data.audio.length === 0) {
          Message({
            type: 'warning',
            message: i18n.t('Key444')
          });
        }

        const isVideo = device.video.length > 0 && data.video.some((item) => item.deviceId === device.video);
        const isAudio = device.audio.length > 0 && data.audio.some((item) => item.deviceId === device.audio);

        if (!isVideo && !isAudio) {
          setDevice(false);
        } else {
          createLocalStream('main', hasAudio, hasVideo);
        }
      },
      fail(str) {
        console.log('直播关闭状态或查询直播失败: ', str);
        Message({
          type: 'error',
          message: `${i18n.t('Key445')}: ${str}`
        });
      }
    });
  });

  rtc.value.on('conference_join_failed', (err) => {
    // 加入房间失败  err为错误原因
    console.log('加入房间失败', err);
    Message({
      message: `${i18n.t('Key446')}：${err}`,
      type: 'warning'
    });
  });

  /**
   * 新增订阅流事件
   */
  rtc.value.on('allow_sub', (tryStream) => {
    if (tryStream.isMixed()) {
      console.log('是混合流,不订阅');
    } else {
      // 订阅远程流
      rtc.value.trySubscribeStream({
        tryStream,
        success(stream) {
          // 订阅流成功
          const streamType = stream.streamType();
          remoteStreamType.value = streamType;
          console.log('订阅流成功', streamType);
          stream.show('student', 'contain'); // 将流显示到指定 id 的盒子中

          if (streamType === 1 || streamType === 10) {
            connect.value = true;
            callLoading.value = false;
          }
          if (streamType === 10) {
            dealStudentConnection(connectUid.value, 2, roomInfo.value.video_mode);
          }
        },
        fail(err) {
          console.log('订阅流失败', err);
        }
      });
    }
  });

  // 直播未开始，不能推流
  rtc.value.on('not_live', () => {
    console.log('直播未开始，不能推流');
    Message({
      message: i18n.t('Key402'),
      type: 'warning'
    });
  });

  // 推流前查询直播状态失败，导致没有推流
  rtc.value.on('local_stream_publish_failed', () => {
    console.log('推流前查询直播状态失败，导致没有推流');
    Message({
      message: i18n.t('Key403'),
      type: 'warning'
    });
  });

  // 房间全量信息事件（人员进出时广播）
  rtc.value.on('room_context', (roomData) => {
    roomContext.value = JSON.parse(roomData);
    getLiveRoomData_DRTD();
    console.log('房间全量信息事件（人员进出时广播）', JSON.parse(roomData));
  });

  rtc.value.on('publish_stream', (str) => {
    console.log('直播已开启', str);
    liveStat.value = true;
  });

  rtc.value.on('end_stream', (str) => {
    console.log('直播已关闭', str);
    liveStat.value = false;
  });

  rtc.value.on('switch_user_settings', (settingData) => {
    // 单个用户配置监听
    console.log(settingData);
  });

  // 人员列表事件（人员麦序变化时广播）
  rtc.value.on('speak_context', (_speakData) => {
    speakData.value = JSON.parse(_speakData);
    console.log('人员列表事件（人员麦序变化时广播）', JSON.parse(_speakData));
  });

  rtc.value.on('switch_settings', (data) => {
    console.log('房间设置事件', data); // 房间设置事件
  });

  // 单条流状态通知事件
  rtc.value.on('streamStatus', (data) => {
    console.log(data);
  });

  // 推流异常断开事件
  rtc.value.on('publishStreamErr', (data) => {
    // 直播开启状态下，尝试重推这条流
    console.log(`推流意外终止:${data.streamName}`);
    publishStream('main');
  });

  // 视频无法自动播放
  rtc.value.on('playError', (data) => {
    console.log('视频无法自动播放', data);
  });

  // 监听通知移除流事件
  rtc.value.on('stream_removed', (stream) => {
    console.log('监听通知移除流事件', stream);
    if ('room_user_id' in connectStudent.value && stream.streamType() === 10 && connect.value) {
      handsDownUid();
    }
    connect.value = false;
    remoteStreamType.value = -1;
  });

  // 停止订阅流
  rtc.value.on('unSub', (unSubStream) => {
    console.log('停止订阅流', unSubStream);
    rtc.value.unSubscribeStream({
      unSubStream,
      success(stream) {
        console.log('取消订阅流成功', stream.id());
      },

      fail(str) {
        console.log(str);
      }
    });
  });

  // 用户退出房间通知其他人员事件
  rtc.value.on('exit_room_user', (data) => {
    console.log('用户退出房间通知其他人员事件', data);
    studentExitLiveRoom(task_id, data.id, false);
  });

  /**
   * 排麦监听事件
   */

  // 监听自己被邀请事件
  rtc.value.on('inviteUp', (uid) => {
    console.log('监听自己被邀请事件', uid);
    rtc.value.inviteAccept({
      success(str) {
        console.log('接受邀请成功', str);
      },
      fail(data) {
        console.log('接受邀请失败', data);
      }
    });
  });

  /**
   * 监听聊天事件
   */
  rtc.value.on('chat_message', (data) => {
    const dat = JSON.parse(data);
    console.log(dat);
    // 敏感词过滤：如果发送的聊天消息被系统判定包含敏感词，则只有发送者能收到本条消息，房间内其他人都不会收到这条聊天消息。
    // 如果返回消息中有 isFilterChat 字段（消息不包含敏感词返回数据中无isFilterChat字段），且isFilterChat的值为1，则说明该消息包含敏感字，除发送者外其他人不会收到这条消息。
    if (dat.isFilterChat && dat.isFilterChat === 1) {
      return;
    }
    chatList.value.push(dat);
  });

  rtc.value.on('allowChatChange', ({ settings }) => {
    Message({
      type: 'success',
      message: settings.allow_chat ? i18n.t('Key633') : i18n.t('Key632')
    });
  });

  // 画笔数据事件
  rtc.value.on('draw', (data) => {
    const drawData = JSON.parse(data);
    console.log('画笔数据事件', drawData);
  });

  // 接收自定义消息
  rtc.value.on('publish_message', (data) => {
    // 连接中途下麦
    if (data.type === 'handsDown-load-student' && data.uid === connectUid.value) {
      callLoading.value = false;
      Message({
        type: 'warning',
        message: i18n.t('Key449')
      });
    }

    // 无对应设备
    if (data.type === 'no-device') {
      callLoading.value = false;
      Message({
        type: 'warning',
        message: data.video_mode === 1 ? i18n.t('Key451') : i18n.t('Key450')
      });
    }
  });
}

/**
 * 教师连麦/下麦处理
 * @param {Object} param0
 */
export function useConnect({ connect, callLoading, connectStudent, roomInfo, connectUid, getLiveRoomData_DRTD }) {
  const route = useRoute();
  const task_id = route.query.task_id;

  /**
   * 学员连线处理
   * @param {String} room_user_id
   * @param {Number} deal_mode
   * @param {String} connection_mode
   */
  function dealStudentConnection(room_user_id, deal_mode, connection_mode) {
    DealStudentConnection({
      task_id,
      room_user_id,
      deal_mode,
      connection_mode
    }).then(() => {
      getLiveRoomData_DRTD();
    });
  }

  /**
   * rtc 上麦方法
   * @param {String} uid
   * @param {Object} connectStudent
   * @param {Number} mode
   */
  function inviteStudent(uid, connectStudent, mode) {
    rtc.value.invite({
      uid,
      success: (str) => {
        console.log('邀请上麦成功', str);
        dealStudentConnection(uid, 1, mode);
        sendPublishMessage({
          type: 'inviteImage',
          connectStudent
        });
      },
      fail: (data) => {
        console.log('邀请上麦失败：', data);
        callLoading.value = false;
        Message.error(`${i18n.t('Key430')}：${data.errorMsg}`);
      }
    });
  }

  /**
   * 老师邀请学生上麦
   * @param {Object} student
   * @param {Number} mode
   * @param {Boolean} is_mobile
   * @param {Boolean} is_exit_page
   * @returns
   */
  function invite(student, mode) {
    let is_mobile = student.is_mobile === 'true';
    let is_exit_page = student.is_exit_page === 'true';
    if (is_mobile && is_exit_page) {
      Message.warning(i18n.t('Key427'));
      return;
    }
    if (connect.value || callLoading.value) {
      Message.warning(i18n.t('Key428'));
      return;
    }
    callLoading.value = true;
    connectStudent.value = student;
    GetLiveRoomInfo({ task_id })
      .then(({ video_mode }) => {
        const uid = student.room_user_id;
        roomInfo.value.video_mode = mode;
        if (video_mode === mode) {
          inviteStudent(uid, student, mode);
        } else {
          roomUpdate({
            video_mode: mode,
            roomUpdateSuccess: (data) => {
              console.log(data, '连麦音视频模式更新请求成功！');
              inviteStudent(uid, student, mode);
            },
            roomUpdateFailed: () => {
              callLoading.value = false;
              Message.error(i18n.t('Key429'));
            }
          });
        }
      })
      .catch(() => {
        callLoading.value = false;
      });
  }

  // 下麦
  function handsDown_Live(uid) {
    commonHandsDown({
      uid,
      success: () => {
        if (callLoading.value) {
          sendPublishMessage({
            type: 'handsDown-load',
            uid
          });
        }

        dealStudentConnection(uid, 0, connectStudent.value.connection_mode);

        callLoading.value = false;
        connect.value = false;
        updateMcResult('', 0);
        Message.success(i18n.t('Key431'));
        connectStudent.value = {};
      },
      fail: (data) => {
        callLoading.value = false;
        connect.value = false;
        console.log('下麦失败', data);
        Message.warning(`${i18n.t('Key432')}：${data.errorMsg}`);
      }
    });
  }

  /**
   * 下麦
   * @param {String} uid
   */
  function handsDown(uid) {
    const _connectUid = typeof uid === 'string' ? uid : connectUid.value;
    if (_connectUid.length === 0) {
      GetStudentInfo_Connection({ task_id }).then(({ room_user_id }) => handsDown_Live(room_user_id));
    } else {
      handsDown_Live(_connectUid);
    }
  }

  return {
    invite,
    handsDown
  };
}

/**
 * 分组讨论
 * @param {String} task_id
 * @param {Object} router
 */
export function useGroup(task_id, router) {
  let groupForm = reactive({
    operation_mode: 'group_count', // 操作方式 group_count【分成几组】 person_count【每组多少人】
    person_count: 1,
    group_count: 1
  });

  function startGroup() {
    const loading = Loading.service({
      text: i18n.t('Key437')
    });
    // 开始分组讨论
    StartGroup({ task_id, ...groupForm })
      .then(() => {
        Message.success(i18n.t('Key438'));
        router.push({
          path: '/new_live/teacher/group',
          query: {
            task_id
          }
        });
      })
      .finally(() => {
        loading.close();
      });
  }

  return {
    groupForm,
    startGroup
  };
}

export function useWhiteboard() {
  let isDrawSetting = ref(false);
  let curColor = ref('#343434');
  let drawColorList = ['#FF4747', '#343434', '#628EFF', '#FFCA0E'];
  let drawThicknessList = ['1', '3', '5'];
  // 画笔变更
  function changeDraw(action, value) {
    if (action === 'color') {
      drawChange(action, parseInt(Number(value.replace('#', '0x'))));
      curColor.value = value;
    } else {
      drawChange(action, value);
    }
    isDrawSetting.value = false;
  }

  return {
    isDrawSetting,
    curColor,
    drawColorList,
    drawThicknessList,
    changeDraw
  };
}