一、下載agora的微信小程序sdk，配置和注冊相關(guān)信息

agora微信小程序文檔地址：https://docs.agora.io/cn/Interactive%20Broadcast/landing-page?platform=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F
根據(jù)文檔注冊agora賬號，以及小程序配置，文檔寫的很清楚并且有截圖

二、通過文檔快速的實(shí)現(xiàn)視頻直播，開始寫自己的第一個(gè)demo

image.png

2.1 html代碼

直播播放

  <view >
    <live-player
        id="player"
        src="{{rtmpUrl}}"
        mode="RTC"
        bindstatechange="playerStateChange"
        binderror="playerror"
        autoplay="{{true}}"
        object-fit="fillCrop" />
  </view>

直播錄制

<view style="margin-top:100rpx">
    <live-pusher
        url="{{rtmpUrl}}"
        mode="RTC"
        bindstatechange="recorderStateChange"
        style="height:600rpx;width:600rpx"
        autopush="{{true}}"
        />

2.2 js代碼

先理一遍邏輯，如何實(shí)現(xiàn)直播

1.agora的sdk初始化，傳入房間號（channel）、用戶ID uid（自定義）、用戶角色role（audience觀眾 ，broadcaster主播，token（服務(wù)端生成）
2.初始化后會(huì)發(fā)布返回本地流的rtmp 的url，至此就完成了發(fā)布本地流和推流的過程，非常簡單，實(shí)現(xiàn)其他觀眾加入和多名主播需要進(jìn)步一步改造

/**聲網(wǎng)client初始化 */
agoraClintInit(userInfo){
  return new Promise((resolve,reject)=>{
    let that=this
    let client={}
    client = new AgoraMiniappSDK.Client()
    this.subscribeEvents(client)
    this.client = client
    let channel=userInfo.channel
    let uid = userInfo.uid
    console.log("==userinfo",userInfo)
    client.setRole(userInfo.role);   //如果作為觀眾加入則需要設(shè)置該角色 audience觀眾 
    // 初始化客戶端
    client.init(APPID, () => {
      Utils.log(`client init success`);
      // 加入頻道
      client.join(token, channel, uid, () => {
        Utils.log(`client join channel success`);
        // 發(fā)布本地流
        if (this.isBroadcaster()) {
          client.publish(url => {
            that.setData({
              playUrl:url
            })
            Utils.log(`client publish success:${url}`);
            resolve(url);
          }, e => {
            Utils.log(`client publish failed: ${e.code} ${e.reason}`);
            reject(e)
          });
        } else {
          resolve();
        }
      }, e => {
        Utils.log(`client join channel failed: ${e.code} ${e.reason}`);
        reject(e)
      })
    }, e => {
      Utils.log(`client init failed: ${e} ${e.code} ${e.reason}`);
      reject(e)
    });
  })
      
},