live-service-client-sdk v1.5.0

SDK说明：

• api所在包 live-service-sdk
• 直播间客户端类所在包 live-service-client-sdk
• 每个直播间对应一个客户端实例，切换到另一个直播间，需要用该直播间ID重新new一个LiveClient来使用

• 安装直播间客户端SDK

npm install live-service-client-sdk 或 yarn add live-service-client-sdk

依赖的包 agora-rtm-sdk@1.4.3 ， agora-rtc-sdk-ng@4.7.2 没有自动安装就需要自己安装一下

• 安装api SDK

npm install live-service-sdk 或 yarn add live-service-sdk

• 引入 api和直播间客户端类

import { LiveClient } from 'live-service-client-sdk';
import { api } from 'live-service-sdk';

• api获取直播间信息(主播、观众)

const appid = '343099033251876864'; //直播间服务实例，从后台配置获取，比如weber，宝源后台
const list = api.getLives(appid);
const liveId = list[0].id;// 选择某个直播
const live=api.getLive(liveId);// 获取直播间详情数据

• 创建客户端(主播、观众)

import { LiveModel } from 'live-service-sdk';

const live = { id: 'xxx'} as LiveModel;
const client = new LiveClient(live);

原先创建客户端方式 const client = new LiveClient(live, (live) => api.getToken(live.id));

• 设置当前用户信息（如果未登录就不用设置）

 liveClient.setUserInfo({
  name: '聂国玉',
  avatar: 'http://xxxxxx', // 用户头像，可没有
  bizUid: 'xxxx', // 业务用户id，可没有，可以填商家id，会员id等
  role: 'audience', // host主播 audience观众
});

• 监听主播发布流事件（观众），播放

client.on('user-published', (event, { user, mediaType }) => {
    console.log('接收到音视频流');
    // 订阅远端流，这是异步操作，订阅完成后再调用play，将流显示到界面上
    liveClient.subscribe(user, mediaType).then(() => {
        if (mediaType === 'video') {
           user.videoTrack.play('player');// 观众播放视频流 player可以是id| HTMLElement,sdk将在这个元素上插入video标签
        } else {
           user.audioTrack.play();// 观众播放音频流，不需要提供dom元素
        }
    });
});

• 发消息(主播、观众)

client.sendChannelMessage('直播间消息测试');

• 收消息(主播、观众)

client.on('ChannelMessage', (event, customMessage:CustomMessage) => {
    console.log('收到直播间消息',
    `直播间频道：${customMessage.channel}`,
    `发送人：${customMessage.sendMemberId}`,
    `时间：${customMessage.receivedTs}`,
    `发送人是否自己：${customMessage.isSelf}`,
    `消息文本：${(customMessage.message as RtmTextMessage).text}`,
    '用户名:'+customMessage.userInfo?customMessage.userInfo.name:'临时用户',
    '用户头像:'+customMessage.userInfo?customMessage.userInfo.avatar:'');
});

• 离开直播间(主播、观众)

client.left();
// 离开直播间的时候要调用该方法
onUnmounted(() => {
  liveClient.left();
  // 关闭音频
  // 关闭代码。。。
});

• 进出直播间事件

client.on('MemberJoined', async (event, { memberId }) => {
  console.log(`${memberId}进入直播间`);
});
client.on('MemberLeft', (event, { memberId }) => {
  console.log(`${memberId}离开直播间`);
});

• 加入直播间（主播、观众）

client.join();

注意 client.on('事件',func)等监听事件要放在 client.join();前面执行，不然不会生效

• 主播开播（主播，前提是需要有摄像头以及部署了https）

client.publish().then(
([audioTrack, videoTrack]) => {
    // 主播播放本地流
    audioTrack.play();// 主播播放本地音频流
    videoTrack.play('player'); // 主播播放本地视频流 player可以是id| HTMLElement,sdk将在这个元素上插入video标签
});

• 直播间所有人员

const members:string[] = await client.getMembers();
console.log('直播间成员列表', members);

• api多语言支持

import { api} from 'live-service-sdk';

• 获取当前设置的语言

   const lang:string=api.getLang();//'zh'|'cht'|'en'|'jp'

• 设置语言

   api.setLang('zh');//设置为简体中文

  设置后详情、列表查询接口的name,describe字段会返回对应语言数据

• 获取api支持的语言列表

  const langs=api.langDic();

  'zh', '简体','cht', '繁體','en', 'English','jp', '日本語',

• 查询条件

  直播列表和预告列表支持查询条件设置

import { api} from 'live-service-sdk';
const queryOptions:QueryModel={
    filter: new Map<string, any>([//字段查询条件
    ['appid', 'xxxxxx'],
    ]),
    sort:['updated_at'],  //排序
    page:{                //分页
        size:20,
        number:1,
    },    
    include:['stream','trailer'], //查询带回推流、预告子表数据
};
const lives=await api.getLives(queryOptions);
const trailers=await api.getTrailers(queryOptions);

• 客户端互动操作
  • 点赞

  //主动点赞
import { ActionEnum } from './ActionEnum';
let zan_total =await client.zan();
console.log('接收到最新点赞数',zan_total);
// 监听互动操作
client.on('CustomAction',(event,action)=>{
    switch (action.action){
      case ActionEnum.ZAN:// 监听到点赞
        const zanObj=JSON.parse(action.payload);
        console.log('接收到最新点赞数',zanObj.zan_total);
    }
});

可能会出现拿到zan_total比本地的小，所以应该跟本地的zan_total比较，保留值大的那个

• 客户端事件回调，按需使用

// 监听客户端异常
import { Action } from './Action';
client.on('exception', (event, {
  code,
  msg,
  uid,
}) => {
  console.error(msg);
});
// 监听客户端连接的网络质量
client.on('network-quality', (event, {
  quality,
  dStr,
  uStr,
}) => {
  console.log(`网络质量 ↓：${dStr} ↑：${uStr}`);
});
// 有用户进入直播间
client.on('MemberJoined', (event, { memberId }) => {
  console.log(memberId);
});
// 有用户离开直播间
client.on('MemberLeft', (event, { memberId }) => {
  console.log(memberId);
});
// 监听互动操作
client.on('CustomAction', async (event, action:Action)=>
    {
      switch (action.action) {
        case ActionEnum.ZAN:// 监听到点赞
          const zanObj = JSON.parse(action.payload);
          console.log('接收到最新点赞数', zanObj.zan_total);
          break;
        case ActionEnum.UPDATE_WATCH:// 监听到观众数更新
          const watchObj = JSON.parse(action.payload) as any;
          console.log('直播间当前人数', watchObj.watch_total);
          break;
        case ActionEnum.UPDATE_GOODS:// 监听到商品列表更新
          // eslint-disable-next-line no-case-declarations
          const goodslist = (await api.getGoods(id)) as any[];
          // eslint-disable-next-line no-case-declarations
          const ids = [] as string[];
          goodslist.forEach((goods) => {
            ids.push(goods.attach_id as string);
          });
          console.log('直播间商品列表更新了', ids);// ids='商品唯一标识1,商品唯一标识2';
          break;
        case ActionEnum.PUSH_GOODS:// 监听到商品推送
          const pushGoods = JSON.parse(action.payload) as any;
          console.log('直播间推送了商品', pushGoods.skuid);
          break;
        case ActionEnum.PUSH_GOODS_USER:// 监听到商品推送给当前用户
          const pushGoods2 = JSON.parse(action.payload) as any;
          console.log('监听到商品推送给当前用户', pushGoods2.skuid);
          break;
        case ActionEnum.MEMBER_JOINED:// 监听到观众进入 在线人数更新
          // eslint-disable-next-line no-case-declarations
          onlineObj = JSON.parse(action.payload) as any;
          state.online_total = onlineObj.online_total;
          alert(`欢迎 ${action.userInfo.name}`);
          break;
        case ActionEnum.MEMBER_LEFT:// 监听到观众离开 在线人数更新
          // eslint-disable-next-line no-case-declarations
          onlineObj = JSON.parse(action.payload) as any;
          state.online_total = onlineObj.online_total;
          break;
        case ActionEnum.MEMBER_UNSPEAK:// 监听到观众被禁言 显示后判断是否为当前观众
          // eslint-disable-next-line no-case-declarations
          unspeakUser = JSON.parse(action.payload) as any;
          alert(`${action.unspeakUser.name} 被禁言`);
          if(client.getUserInfo().uid===unspeakUser.uid){
            alert('您被禁言');
          }
          break;
        case ActionEnum.MEMBER_BLOCK:// 监听到观众被拉黑 显示后判断是否为当前观众
          blockUser = JSON.parse(action.payload) as any;
          alert(`${action.blockUser.name} 被拉黑`);
          if(client.getUserInfo().uid===blockUser.uid){
            alert('您被拉黑，去看看别的直播间吧');
            setTimeout(client.left(),20*1000);// 离开直播间
            // 离开当前播放页面
          }
          break;
        default: break;
      }
    }
);
// 主播停止发布 视频/音频 流
client.on('user-unpublished', (event, { user, mediaType }) => {
  console.log('主播停止发布流');
});

• 预告列表

import { api} from 'live-service-sdk';
const trailers=await api.getTrailers() // 预告列表
const trailer=await api.getTrailer(trailers.data[0]) // 获取第0条预告详情

• 统计

import { api} from 'live-service-sdk';
// 点击分享的时候
api.updateShare(live_id);
// 点击商品的时候
api.updateGoodsClick(live_id);

• 观众发言管理

// 监听主播端通知
import {UsersState} from "./UsersState";

// 发送消息跟观众管理的关系
const sendResult = await client.sendChannelMessage();
if (sendResult != null) { // !=null表示不能发送消息
  switch (sendResult) {
    case UsersState.UNSPEAK:
      // 当前用户已被禁言
        break;
    case UsersState.BLOCK:
      // 当前用户已被拉黑
      break;
    case UsersState.AUDIENCE:
      // 当前用户是游客，不能发言
      break;
  }
}