文档反馈
文档反馈

实现互动直播(小程序)

网易云信互动直播产品的基本功能包括音视频通话和连麦直播,当您成功初始化 SDK 之后,您可以简单体验本产品的基本业务流程,例如主播加入房间、发布本地流、订阅远端流等。本文档为您展示互动直播的基本业务流程,帮助您快速接入 NERTC SDK。

前提条件

请确认您已完成以下操作:

实现互动直播

1. 初始化客户端对象

调用 YunXinMiniappSDK.Client 方法创建一个用于控制通话的客户端对象,然后调用 init() 进行初始化。

let client = YunXinMiniappSDK.Client({
    debug: true,
    appkey: ''
});

client.init();

2. 加入房间

调用 client.join 方法加入房间。

client.join 中您可以将 yourToken 替换成已获取的 NERTC Token 。并填入想要加入的房间名以及用户 uid。

let joinParam = { 
    channelName: '', 
    uid: 100,
    token: 'yourToken', //安全模式下必填,设为已获取的 NERTC Token。非安全模式下,请勿设置 Token。
    liveEnable: 1,  //是否开启互动直播
    recordType: 0,  //以下为服务器录制相关参数,请参考API文档
    recordAudio: 0, 
    recordVideo: 0, 
    isHostSpeaker: 0, 
  }
  client.join(joinParam).then(data => {
     console.log('!!!! 房间房间成功:')
  }).catch(e => {
     console.error('!!!! 房间房间失败:', e)
  })

3. 发布本地流

成功加入房间后,就能调用 client.publish 方法将本地音视频流发布到房间中。成功发布后,SDK 会返回该路音视频流的 URL。

client.publish().then(url => {
    console.log('推流成功, 获取推流地址: ', url);
    //业务层将推流 url 设置的live-pusher组件中
}).catch(e => {
    console.log('推流失败,原因: ', e);
})

4. 订阅远端流

当远端流发布到房间时,会触发 stream-added 事件,您需要通过 client.on 监听该事件并在回调中订阅新加入的远端流。

client.on('stream-added', (uid) => { 
    console.log('收到别人的发布请求: ', uid) 
    client.subscribe(uid).then(data => { 
        logger.log('订阅别人成功,获取到拉流地址: ', data.url) 
        //业务层将拉流 url 设置的live-player组件中
    }).catch(e => {
        logger.log('订阅别人失败,原因: ', e) 
    }) 
})

当远端用户取消发布流或退出房间时,关闭并移除对应的流。

client.on("stream-removed", e => {
  let uid = e.uid;
  console.log(`通知 ${uid} 停止推流`);
  //业务层做停止推流动作,清除响应的live-player组件
});

5. 事件通知

SDK 内部做了重连相关的逻辑,中途会有一些事件通知到业务层,此外也有一些业务事件会反馈,建议根据自己的业务合理利用。

6. 监听质量数据

微信小程序 SDK 的推流和拉流,主要依赖小程序平台的 live-pusherlive-player 组件,因此想要获取小程序实时媒体的收发情况,需用业务层主动去监听小程序的回调事件。

live-puser 组件监听事件

请参考小程序 live-pusher 文档查看详细信息。

其中:

<live-pusher  
    wx:if="{{rtmpUrl!==''}}" 
    wx:key="livePusher" 
    style="display:inline-block;width:180px;height:150px;" 
    aspect="16:9" 
    mode="RTC" 
    enable-agc="true" 
    enable-ans="true" 
    orientation="vertical"  
    url="{{rtmpUrl}}" //推流地址,client.publish()接口可以获取
    muted="false" 
    enable-camera="true" 
    beauty="0" 
    waiting-image="../../images/cover.png" 
    max-bitrate="500"  
    min-bitrate="200" 
    bindstatechange="pusherStateChangeHandler" 
    bindnetstatus="pusherNetstatusHandler"  
    binderror="pusherErrorHandler" 
    debug="true" 
    autopush="true" 
> 

您可以调用 SDK 的数据上报接口,实时传递给 SDK 这些数据,可以帮助 SDK 进行问题排查、质量优化。也可以自己监听这些信息,进行进一步的业务处理。

示例代码:

function pusherStateChangeHandler(data) {
    let { code } = e.detail
    client.dataReporter('push', 'bindstatechange', { 
      code, 
      reason: '' //状态码的说明,小程序live-pusher组件文档有详细说明
    })
}

function pusherNetstatusHandler(data) {
    let { info } = e.detail
    client.dataReporter('push', 'bindnetstatus', info)
}

function pusherErrorHandler(data) {
    let { errMsg, errCode } = e.detail
    client.dataReporter('push', 'binderror', { 
      errCode, 
      errMsg
    })
}

live-puser 组件监听事件

请参考小程序 live-player 文档查看详细信息。

其中:

<live-player 
    bindtap='videoClickHandler' 
    style="display:inline-block;width:180px;height:150px;" 
    data-user="{{uid}}" //可以设置成client.subscribe(uid)中的uid 
    wx:if="{{item.uid !== uid}}" //要记得及时清除不存在的拉流地址
    src="{{item.url}}"  //client.subscribe(uid)订阅成功的拉流地址 
    mode="RTC" 
    debug="true" 
    min-cache="0.2"  
    max-cache="0.8"  
    auto-pause-if-navigate= "true" 
    auto-pause-if-open-native= "true" 
    bindstatechange="pullerStateChangeHandler" 
    bindnetstatus="pullerNetstatusHandler" 
    autoplay="true" 
    >

您可以调用 SDK 的数据上报接口,实时传递给 SDK 这些数据,可以帮助 SDK 进行问题排查、质量优化。也可以自己监听这些信息,进行进一步的业务处理。

示例代码:

function pullerStateChangeHandler(data) {
    let { code } = e.detail
    client.dataReporter('pull', 'bindstatechange', { 
      code, 
      reason: '' //状态码的说明,小程序live-player组件文档有详细说明
    })
}

function pullerNetstatusHandler(data) {
    let { info } = e.detail
    client.dataReporter('pull', 'bindnetstatus', info)
}

7. 离开房间

调用接口 Client.leave 离开房间。

Sample code

您可以直接参考如下示例代码,在项目中实现想要的功能。

import YunXinMiniappSDK from '../../sdk/NIM_Web_Netcall_weixin_G2.js'


let client = YunXinMiniappSDK.Client({
    debug: true,
    appkey: ''
});

client.init();

//监听事件通知
initEvent()

let joinParam = { 
    channelName: '', 
    uid: 100,
    liveEnable: 1, 
    recordType: 0, 
    recordAudio: 0, 
    recordVideo: 0, 
    isHostSpeaker: 0, 
}
client.join(joinParam).then(data => {
    console.log('!!!! 房间房间成功:')
    client.publish().then(url => {
        console.log('推流成功, 获取推流地址: ', url);
        //业务层将推流 url 设置的live-pusher组件中
    }).catch(e => {
        console.log('推流失败,原因: ', e);
    })
}).catch(e => {
    console.error('!!!! 房间房间失败:', e)
})

function initEvent() {
    client.on('stream-added', (uid) => { 
        console.log('收到别人的发布请求: ', uid) 
        client.subscribe(uid).then(data => { 
            logger.log('订阅别人成功,获取到拉流地址: ', data.url) 
            //业务层将拉流 url 设置的live-player组件中
        }).catch(e => {
            logger.log('订阅别人失败,原因: ', e) 
        }) 
    })
    //通知应用程序更新后的推流地址和拉流地址。
 client.on('syncDone', (data) => {  
   var localUid = 1000 //自己推流的uid
   data.userList.map(item => {  
     const {uid, url} = item  
     if (uid == localUid) {  
       console.log('更新了推流地址')
       //建议应用上层逻辑,live-pusher组件重新推流  
     } else {  
       console.log('更新了拉流地址')
       //建议应用上层逻辑,live-palyer组件重新推流    
     }  
   })  
   console.log('音视频通知:已经删除远端音视频流')  
 })  

 //通知应用程序有人离开房间。  
 client.on('clientLeave', (data) => {  
   logger.log(data.userlist) //离开的成员列表  
   console.log('音视频通知:有人离开了,清除拉流的live-player组件')  
 })  

 //通知应用程序有人加入房间。  
 client.on('clientJoin', (data) => {  
   const {uid} = data  
   console.log('音视频通知:有人加入')  
 })  

 //通知应用程序自己被踢出。  
 client.on('kicked', (data) => {  
   console.log('音视频通知:被踢')  
 })  

 //通知应用程序socket建立成功。  
 client.on('open', (data) => {  
   console.log('音视频通知:和服务器socket建立成功')  
 })  

 //通知应用程序音视频socket关闭。  
 client.on('disconnect', (data) => {  
   console.log('音视频通知:和服务器socket关闭了')  
 })  

 //通知应用程序准备重连。  
 client.on('willreconnect', (data) => {  
   console.log('音视频通知:准备重新建立和服务器之间的联系')  
 })  

 //通知应用程序sdk信令发送超时。  
 client.on('sendCommandOverTime', (data) => {  
   console.log('音视频通知:sdk信令发送超时')  
 })  

 //通知应用程序房间被解散。  
 client.on('liveRoomClose', (data) => {  
   console.log('音视频通知:房间解散了')  
 }) 
}
×

反馈成功

非常感谢您的反馈,我们会继续努力做得更好。