❤
npm
Sign UpSign In

live-service-sdk-wx
TypeScript icon, indicating that this package has built-in type declarations

1.3.53 • Public • Published

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 ， agora-rtc-sdk-ng 没有自动安装就需要自己安装一下

  • 安装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 './LiveModel';

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.join();
  • 主播开播（主播，前提是需要有摄像头以及部署了https）
client.publish().then(
([audioTrack, videoTrack]) => {
    // 主播播放本地流
    audioTrack.play();// 主播播放本地音频流
    videoTrack.play('player'); // 主播播放本地视频流 player可以是id| HTMLElement,sdk将在这个元素上插入video标签
});
  • 监听主播发布流事件（观众），播放
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();
  • 进出直播间事件
client.on('MemberJoined', async (event, { memberId }) => {
  console.log(`${memberId}进入直播间`);
});
client.on('MemberLeft', (event, { memberId }) => {
  console.log(`${memberId}离开直播间`);
});
  • 直播间所有人员
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.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);

1.2.0更新 主要是去除服务实例的相关接口修改以及自定义url 去除 api.getApps()等跟服务实例相关接口 预告列表接口修改 api.getTrailers(appid,queryOptions) 改为api.getTrailers(queryOptions) 直播列表接口修改 api.getLives(queryOptions) 去除filter[app_id]条件

一次性设置url api.setBaseUrl('http://xxxx'); 也可以在接口参数里指定单个接口的url跟路径

所有接口最后面添加了一个url参数 api.getLives(queryOptions) 改为 api.getLives(queryOptions,url)

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.3.530latest

Version History

VersionDownloads (Last 7 Days)Published
1.3.530

Package Sidebar

Install

npm i live-service-sdk-wx

Weekly Downloads

0

Version

1.3.53

License

none

Unpacked Size

165 kB

Total Files

47

Last publish

Collaborators

  • raynip
Try on RunKit
Report malware