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

import { Message } from 'element-ui';
import { rtc, publishStream, closeVideo, createData, getHistory } from '@/views/live/common';
export {
  initSDK,
  sendMsg,
  getLiveStat,
  createScript,
  downloadWebSDK,
  closeVideo,
  handsDown,
  chatRoll,
  pauseAudio,
  playAudio,
  pauseVideo,
  playVideo
} from '@/views/live/common';

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

function createLocalStream(vue) {
  rtc.createLocalStream({
    streamName: 'picture',
    createData: createData(),
    success(stream) {
      vue.localStream = true;
      console.log('创建本地流成功', stream);
      vue.hasVideo = stream.hasVideo;
      vue.hasAudio = stream.hasAudio;
      // 创建本地流成功，将流展示到id为 student 的dom元素盒子中
      stream.show('group-local');
      publishStream('picture'); // 如果需要立即推流，执行 publish 方法
    },
    fail(data) {
      vue.localStream = false;
      console.log('创建本地流失败，应用层处理', data);
      // 创建本地流失败，应用层处理
      Message({
        type: 'error',
        message: '创建本地流失败：' + data
      });
    }
  });
}

/**
 * 初始化监听事件
 */
export function initListener(vue) {
  rtc.on('login_success', data => {
    console.log('登录成功', data);
    Message({
      message: '登录成功',
      type: 'success'
    });
  });

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

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

    getHistory({
      success(data) {
        let chatLog = data.datas.meta.chatLog.map(({ content, userName }) => {
          return { msg: content, username: userName };
        });
        vue.chatList = chatLog;
      },
      fail(str) {
        console.log(str);
      }
    });

    if (vue.studentSelf.is_teacher_role_in_room === 'false') {
      rtc.handsUp({
        success: str => {
          console.log('举手成功', str);
          console.log('创建本地流推流');
          createLocalStream(vue);
        },
        fail: data => {
          console.log('举手失败', data);
        }
      });
    } else {
      createLocalStream(vue);
    }
  });

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

  // 新增订阅流事件
  rtc.on('allow_sub', stream => {
    console.log('新增订阅流事件');
    if (stream.isMixed()) {
      console.log('是混合流,不订阅');
    } else {
      // 订阅远程流
      rtc.trySubscribeStream({
        tryStream: stream,
        success: stream => {
          // 订阅流成功
          let streamType = stream.streamType();
          console.log('订阅流成功', streamType);
          if (streamType === 10) {
            vue.streamList.push(stream);
          }
          if (streamType === 0) {
            stream.show('live', 'contain'); // 将流显示到指定 id 的元素中
            vue.is_teacher_in_group = true;
          }
        },
        fail(err) {
          console.log('订阅流失败', err);
        }
      });
    }
  });

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

  // 房间全量信息事件（人员进出时广播）
  rtc.on('room_context', roomData => {
    vue.roomContext = JSON.parse(roomData);
    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('kick_out', function () {
    console.log('自己被踢出房间');
  });

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

  // 监听通知移除流事件
  rtc.on('stream_removed', stream => {
    console.log('监听通知移除流事件');
    if (stream.streamType() === 0) {
      vue.is_teacher_in_group = false;
    }
    let num = vue.streamList.findIndex(el => el.id() === stream.id());
    if (num !== -1) {
      vue.streamList.splice(num, 1);
    }
  });

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

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

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

  rtc.on('mcDown', () => {
    closeVideo('picture');
  });

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

  rtc.on('createLocalStream', () => {
    console.log('创建本地流推流');
  });

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

  // 接收自定义消息
  rtc.on('publish_message', data => {});
}