GCLS_Page_Learn/src/views/live/common.js

import store from '@/store';
import { Message } from 'element-ui';

/**
 * WebSDK 实例化对象
 */
export let rtc;

/**
 * 初始化SDK方法
 * @param { Object } data 初始化SDK所需参数
 * @returns { Object } Rtc
 */
export function initSDK(data) {
  rtc = new Rtc(data);
  return rtc;
}

/**
 * 查询直播是否开启
 */
export function getLiveStat(obj) {
  rtc.getLiveStat(obj);
}

/**
 * 下麦操作
 * @param { String } uid
 */
export function handsDown(Object) {
  rtc.handsDown(Object);
}

/**
 * 上麦更新
 * @param { Object } stream
 */
export function updateMcResult(stid, pid) {
  // 上麦更新是在两种情况下执行
  // 1.推流成功之后将自己的麦序更新为3；系统会广播 speak_context 事件，其他用户监听该事件后更新对应的业务展示状态；
  // 2.不能创建本地流或者推流失败，更新自己的麦序为0。
  rtc.updateMcResult({
    pid,
    stid,
    success(data) {
      console.log('更新上麦结果请求成功，此处可处理应用层逻辑', data);
    },
    fail(data) {
      console.log('更新上麦结果请求失败:' + JSON.stringify(data));
    }
  });
}

/**
 * 推送本地流
 */
export function publishStream(streamName) {
  rtc.publish({
    streamName,
    // 推流成功，更新上麦结果
    success: stream => {
      console.log('推流成功', stream);
      updateMcResult(stream.id(), 1);
    },
    fail: str => {
      // 推流失败，更新上麦结果
      console.log('推流失败，更新上麦结果', str);
      updateMcResult('', 0);
    }
  });
}

/**
 * 得到创建本地流参数对象
 */
export function createData() {
  let device = store.state.app.liveDevice;
  let video =
    device.video.length > 0
      ? { device: 'camera', resolution: 'sif', deviceId: device.video }
      : false;
  let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;

  return {
    video,
    audio
  };
}

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

/**
 * 结束本地流
 */
export function closeVideo(streamName) {
  rtc.closeVideo({
    streamName,
    success() {
      console.log('结束本地流成功');
    },
    fail(str) {
      console.log(str);
    }
  });
}

// 重连
export function reconnection() {
  rtc.closeVideo({
    streamName: 'main',
    success() {
      createLocalStream('main');
    },
    fail(str) {
      console.log(str);
    }
  });
}

/**
 * 关闭本地流声音
 */
export function pauseAudio() {
  rtc.pauseAudio({
    streamName: 'main',
    success() {
      console.log('关闭本地流声音成功');
    },
    fail(str) {
      console.log(str);
    }
  });
}

/**
 * 开启本地流声音
 */
export function playAudio() {
  rtc.playAudio({
    streamName: 'main',
    success(data) {
      console.log(data);
      console.log('开启本地流声音成功');
    },
    fail(str) {
      console.log(str);
    }
  });
}

/**
 * 关闭本地流视频画面
 */
export function pauseVideo() {
  rtc.pauseVideo({
    streamName: 'main',
    success() {
      console.log('关闭本地流视频画面成功');
    },
    fail(str) {
      console.log(str);
    }
  });
}

/**
 * 开启本地流视频画面
 */
export function playVideo() {
  rtc.playVideo({
    streamName: 'main',
    success() {
      console.log('开启本地流视频画面成功');
    },
    fail(str) {
      console.log(str);
    }
  });
}

/**
 * 获取设备列表
 */
export function getDevice(options) {
  rtc.getDevice(options);
}

// 查询网络节点
export function getNetPoint() {
  rtc.getNetPoint({
    success(data) {
      console.log('获取网络节点成功', data);
    }
  });
}

/**
 * 房间配置项更新
 * @param {Object} option 房间配置项 (具体看2.0 https://doc.bokecc.com/class/developer/web/chat.html)，以键值对的形式传
 */
export function roomUpdate(option) {
  rtc.roomUpdate(option);
}

// 自定义消息发送事件
export function sendPublishMessage(data) {
  rtc.sendPublishMessage(data);
}

// 聊天组件

/**
 * 发送聊天
 * @param {String} msg length不能超过 400
 */
export function sendMsg(msg) {
  rtc.sendMsg(msg);
}

// 文档

/**
 * 变更画笔
 */
export function drawChange(action, value) {
  rtc.drawChange({
    action,
    value
  });
}

export function createScript(url) {
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.getElementsByTagName('body')[0].appendChild(script);
  return script;
}

function createLink(url) {
  let link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.getElementsByTagName('body')[0].appendChild(link);
  return link;
}

// 加载直播所需 SDK，加载完成后才能初始化
export function downloadWebSDK(vue) {
  createLink('https://class.csslcloud.net/static/SDK/docSDK/draw.css').onload = () => {
    vue.loadedNumber += 1;
  };

  createScript('https://class.csslcloud.net/sdk/websdk/hdRtc-6.7.2.js').onload = () => {
    let scriptArray = [
      'https://class.csslcloud.net/static/dist/js/classMode.js',
      'https://class.csslcloud.net/static/dist/js/classUpdateChat.js',
      'https://image.csslcloud.net/js/dpc.js',
      'https://class.csslcloud.net/static/js/jquery/jquery.min.js'
    ];
    for (let i = 0; i < scriptArray.length; i++) {
      createScript(scriptArray[i]).onload = () => {
        vue.loadedNumber += 1;
      };
    }
  };
}

// 聊天列表滚动
export function chatRoll(vue) {
  let chat = vue.$refs.chat;
  let isBottom = chat.scrollTop >= chat.scrollHeight - 170;
  vue.$nextTick(() => {
    if (isBottom) {
      chat.scrollTop = chat.scrollHeight;
    }
  });
}