微信小程序 SDK_视频直播(LIVE)-阿里云帮助中心

前置要求

小程序基础库最低版本要求 2.10.0
微信 App 最低版本要求 7.0.9
您的小程序具备 live-pusher 和 live-player 组件的使用权限，申请开通的要求和流程详情，请参见微信 live-pusher 的文档。

说明

微信开发者工具不支持 live-pusher 和 live-player，请使用真机进行体验和测试，并且小程序测试号无法进行测试。

步骤一：开通应用

登录视频直播控制台。
在左侧导航栏单击直播+ > 实时音视频 > 应用管理。
单击创建应用。
填写自定义的实例名称，勾选服务协议后，点击立即购买。
提示开通成功后，刷新应用管理页面，即可查看您新建的实时音视频应用。
说明
创建应用默认不产生费用，实际按照您具体云上用量后付费。更多信息，请参见实时音视频费用。

步骤二：获取应用ID和AppKey

成功开通应用后，在应用管理列表中找到该应用，单击操作栏中的管理按钮，进入基本信息页面，在该页面获取对应的应用ID和AppKey 。

步骤三：集成接入

在微信公众平台-管理-开发管理-服务器域名中设置socket合法域名，如下所示：
```
wss://rs.rtn.aliyuncs.com
```
在您的小程序js中定义data用来存储 live-pusher 和 live-player 的数据。
```
Component({
  data: {
    pusher: {},
    playerList: [],
  },
});
```

在您的小程序wxml中将数据与 live-pusher 和 live-player 绑定。

<live-pusher
  url="{{pusher.url}}"
  beauty="{{pusher.beauty}}"
  whiteness="{{pusher.whiteness}}"
  mode="{{pusher.mode}}"
  autopush="{{pusher.autopush}}"
  mirror="{{pusher.mirror}}"
  local-mirror="{{pusher.localMirror}}"
  remote-mirror="{{pusher.remoteMirror}}"
  enable-ans="{{pusher.enableAns}}"
  enable-agc="{{pusher.enableAgc}}"
  device-position="{{pusher.devicePosition}}"
  muted="{{!pusher.enableMic}}"
  enable-mic="{{pusher.enableMic}}"
  enable-camera="{{pusher.enableCamera}}"
  bindstatechange="onPusherStateChange"
  <!-- 其余属性省略，具体有哪些属性可参考 live-pusher 文档 -->
/>
<view class="player-container" wx:for="{{playerList}}" wx:key="id">
  <live-player
    id="{{item.id}}"
    src="{{item.src}}"
    mode="{{item.mode}}"
    autoplay="{{item.autoplay}}"
    muted="{{item.muted}}"
    mute-audio="{{item.muteAudio}}"
    mute-video="{{item.muteVideo}}"
    min-cache="{{item.minCache}}"
    max-cache="{{item.maxCache}}"
    bindstatechange="onPlayerStateChange"
    <!-- 其余属性省略，具体有哪些属性可参考 live-player 文档 -->
  />
</view>

使用 npm 集成 SDK。
```
npm install aliyun-rtc-wx-sdk
```

初始化引擎。

import AliRtcEngine from "aliyun-rtc-wx-sdk";

this.artc = AliRtcEngine.getInstance(this)

创建好AliRtcEngine实例后，需要监听、处理相关事件。

this.artc.on("remoteUserOnLineNotify", (user, playerList) => {
  wx.showToast({
    title: `${user.displayName || user.userId} 加入了房间`,
    icon: "none",
  });
  this.setData({
    playerList,
  });
});
this.artc.on("remoteUserOffLineNotify", (user, playerList) => {
  wx.showToast({
    title: `${user.displayName || user.userId} 退出了房间`,
    icon: "none",
  });
  this.setData({
    playerList,
  });
});
this.artc.on("remoteTrackAvailableNotify", (_userId, playerList) => {
  this.setData({
    playerList,
  });
});
this.artc.on("bye", () => {
  wx.showToast({
    title: "您已被踢出房间",
    icon: "none",
  });
  this.setData({
    pusher: {},
    playerList: [],
  });
});

加入频道。您可以按需选择单参数入会或者多参数入会的方案。Token计算方式，请参见Token鉴权。

单参数入会：

const userName = '测试用户1'; // 可以修改为您的用户名（支持中文）

try {
  // fetchToken需要您来实现，从服务端获取Base64Token
  const base64Token = await fetchToken();
  const { pusherAttributes, playerList } = await this.artc.joinChannel(base64Token, userName);
  // 加入成功，继续执行其他操作
} catch (error) {
  // 加入失败
}

多参数入会：

// 参考文档 Token 鉴权部分，从服务端或本地生成鉴权信息
// 注意：为了您的数据安全，任何情况下都不应该将带有 appKey 的 token 计算逻辑发布给用户
const appId = 'yourAppId'; // 从控制台获取
const appKey = 'yourAppKey'; // 从控制台获取，注意请勿在生产环境露出您的 AppKey
const channelId = 'AliRtcDemo'; // 可以修改为您的频道ID（仅支持英文字母、数字）
const userId = 'test1'; // 可以修改为您的用户ID（仅支持英文字母、数字）
const userName = '测试用户1'; // 可以修改为您的用户名（支持中文）
const timestamp = Math.floor(Date.now() / 1000) + 3600; // 一个小时后过期

try {
  const token = await generateToken(appId, appKey, channelId, userId, timestamp);
  // 加入频道，参数 token、nonce 等一般由服务端返回
  const { pusherAttributes, playerList } = await this.artc.joinChannel({
    channelId,
    userId,
    appId,
    token,
    timestamp,
  }, userName);
  // 加入成功，继续执行其他操作
} catch (error) {
  // 加入失败
}

入会成功后更新 data 并开始推流。

this.setData(
  {
    pusher: pusherAttributes,
    playerList,
  },
  () => {
    this.artc.getPusherInstance().start();
  },
);

在 methods 中定义 live-pusher 和 live-player 的事件处理方法。

Component({
  methods: {
    onPusherStateChange(e: any) {
      // live-pusher 的 code 可查看 live-pusher 的文档
      console.log("live-pusher code: ", e.detail.code);
      this.artc.handlePusherStateChange(e);
    },
    onPlayerStateChange(e: any) {
      // live-player 的 code 可查看 live-player 的文档
      console.log("live-player code: ", e.detail.code);
      this.artc.handlePlayerStateChange(e);
    },
  },
});

离开会议。

await this.artc.leaveChannel();
this.setData({
  pusher: {},
  playerList: [],
});