实现互动直播（小程序）
网易云信互动直播产品的基本功能包括音视频通话和连麦直播，当您成功初始化 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 内部做了重连相关的逻辑，中途会有一些事件通知到业务层，此外也有一些业务事件会反馈，建议根据自己的业务合理利用。
- 通知应用程序更新后的推流地址和拉流地址。
//通知应用程序更新后的推流地址和拉流地址。 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 状态通知。
//通知应用程序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('音视频通知：房间解散了') })
6. 监听质量数据
微信小程序 SDK 的推流和拉流，主要依赖小程序平台的 live-pusher 和 live-player 组件，因此想要获取小程序实时媒体的收发情况，需用业务层主动去监听小程序的回调事件。
live-puser 组件监听事件
请参考小程序 live-pusher 文档查看详细信息。
其中：
- bindstatechange：状态变化事件
- bindnetstatus：网络状态通知
- binderror：渲染错误事件
<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 文档查看详细信息。
其中：
- bindstatechange：播放状态变化事件
- bindnetstatus：网络状态通知
<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('音视频通知：房间解散了')
})
}本篇文档内容是否对您有帮助？
有帮助
我要吐槽
此文档对你是否有帮助
×
有帮助
我要吐槽
×
反馈成功
非常感谢您的反馈，我们会继续努力做得更好。