GCLS_Page_Learn/src/views/live/student/live.js

import { Message } from 'element-ui';
import { GetLiveRoomInfo } from '@/api/live';
import { rtc, publishStream, closeVideo } from '@/views/live/common';
export {
  initSDK,
  sendMsg,
  getLiveStat,
  getDevice,
  downloadWebSDK,
  createScript,
  handsDown
} from '@/views/live/common';

// 连麦

/**
 * 学生端接受老师的上麦邀请，同意上麦
 */
export function inviteAccept(object) {
  rtc.inviteAccept(object);
}

/**
 * 申请连麦
 */
export function handsUp(data) {
  rtc.handsUp(data);
}

/**
 * 取消订阅远程流
 */
function unSubscribeStream(stream) {
  rtc.unSubscribeStream({
    unSubStream: stream,
    success: function (str) {
      console.log('取消订阅流成功', str);
    },

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

/**
 * 初始化监听事件
 */
export function initListener(vue) {
  rtc.on('login_success', data => {
    console.log('登录成功', data);
    Message({
      message: '登录成功',
      type: 'success'
    });
    vue.roomData = data;
    // 初始化画板需要的数据
    let canvasInitData = {
      allowDraw: false, // 是否具有书写画笔权限（讲师权限） true / false
      id: 'draw-parent',
      pptDisplay: 1, // 文档展示方式。默认0，按窗口  1，按宽度
      liveId: data.live.status === 1 ? data.live.id : '' // 如果直播已经开始，需将直播 id 传入 sdk 中
    };
    // 初始化画板
    rtc.canvasInit(canvasInitData);
  });

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

  // 教师 必须在加入房间成功的事件回调里创建本地流
  rtc.on('conference_join', () => {
    console.log('加入房间成功');
  });

  rtc.on('conference_join_failed', err => {
    // 加入房间失败  err为错误原因
    console.log('加入房间失败', err);
  });

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

          if (streamType === 1 || streamType === 10) {
            vue.connect = true;
            vue.callLoading = false;
          }
        },
        fail: function (err) {
          console.log('订阅流失败', err);
        }
      });
    }
  });

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

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

  rtc.on('publish_stream', str => {
    console.log('直播已开启', str);
    Message({
      type: 'success',
      message: '直播已开启'
    });
    vue.liveStat = true;
  });

  rtc.on('end_stream', str => {
    console.log('直播已关闭', str);
    Message({
      type: 'success',
      message: '直播已关闭'
    });
    vue.liveStat = false;
  });

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

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

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

  rtc.on('publishStreamErr', data => {
    console.log('推流意外终止:' + data.streamName);
    // 直播开启状态下，尝试重推这条流
  });

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

  // 监听通知移除流事件
  rtc.on('stream_removed', function (stream) {
    console.log('监听通知移除流事件');
    vue.connect = false;
    vue.remoteStreamType = -1;
    vue.connectStudent = '';
  });

  // 停止订阅流
  rtc.on('unSub', function (stream) {
    console.log('停止订阅流');
    unSubscribeStream(stream);
  });

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

  // 监听自己被邀请事件
  rtc.on('inviteUp', uid => {
    console.log('监听自己被邀请事件', uid);
    vue.callLoading = true;
    vue.invite = true;
  });

  rtc.on('mcDown', () => {
    closeVideo('picture');
    vue.connect = false;
    vue.invite = false;
  });

  rtc.on('videoModeChange', data => {
    console.log('连麦音视频模式更新成功监听回调', data.settings.video_mode);
    vue.roomInfo.video_mode = data.settings.video_mode;
  });

  rtc.on('createLocalStream', () => {
    // 创建本地流推流
    GetLiveRoomInfo({ task_id: vue.task_id }).then(({ video_mode }) => {
      console.log('创建本地流推流');
      vue.roomInfo.video_mode = video_mode;
      const createData = {
        video: video_mode === 1,
        audio: true
      };
      rtc.createLocalStream({
        streamName: 'picture',
        createData,
        success: function (stream) {
          vue.connect = true;
          vue.callLoading = false;
          console.log('创建本地流成功', stream);
          // 创建本地流成功，将流展示到id为 student 的dom元素盒子中
          stream.show('student');
          publishStream('picture'); // 如果需要立即推流，执行 publish 方法
        },
        fail: function (data) {
          console.log('创建本地流失败，应用层处理', data);
          // 创建本地流失败，应用层处理
          Message({
            type: 'error',
            message: '创建本地流失败：' + data
          });
        }
      });
    });
  });

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

  rtc.on('allowChatChange', function (data) {
    let msg = data.settings.allow_chat ? '开言' : '禁言';
    Message({
      type: 'success',
      message: `全体${msg}成功`
    });
  });

  // 接收自定义消息
  rtc.on('publish_message', function (data) {
    // 连接中途下麦
    if (data.type === 'handsDown-load' && data.uid === vue.room_user_id) {
      vue.callLoading = false;
    }

    // 连麦信息
    if (data.type === 'inviteImage') {
      vue.connectStudent = data.connectStudent;
    }
  });
}