实时视频会议小程序SDK
使用此组件需要依赖小程序基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
准备工作
- 注册微信小程序,登录微信公众号小程序平台获取微信小程序appid,appSecrert,修改类目审核(社交、教育、医疗、政务民生、金融,目前只有这些支持),并在开发设置中配置socket合法域名wss://域名:9095
- 获取开发者信息
- 开发-配置中开启“使用npm模块”,基础库选择2.4.0及以上,打开“不校验合法域名”、真机调试打开“调试”。集成miniprogram-ar-meet、miniprogram-ar-push、miniprogram-ar-play
使用说明
使用方法
- 安装 SDK
npm install --save miniprogram-ar-meet
- 会议初始化
//创建实例
let wxmeet = new wxRTMeet();
that.setData({
wxmeet: wxmeet
});
//服务认证 方法一:
//wxmeet.initEngine(config.DEV_ID, config.APP_ID, config.APP_KEY, config.APP_TOKEN, config.APP_DOMAIN);
//服务认证 方法二:
//设置用户验证token
wxmeet.setUserToken("");
//配置开发者应用信息
wxmeet.initAppInfo(config.APP_ID, config.APP_TOKEN);
- 加入房间
//加入房间
wxmeet.joinRoom(roomId, userid, username, JSON.stringify({ userid }), that.data.enableVideo, that.data.enableAudio);
//加入房间成功回调
wxmeet.on("onJoinRoomOK", () => {
wx.showToast({
title: '加入房间成功',
});
});
//加入房间失败回调
wxmeet.on("onJoinRoomFaild", (code, info) => {
console.log("加入房间失败:", code, info ? info : "");
});
- 收到推流地址
//收到推流URL回调,将URL绑定到ar-push组件中,其他人将收到自己的视频
wxmeet.on("onGetPushUrl", (code, data) => {
console.log('onGetPushUrl', code, data);
if (code === 0) {//成功
that.setData({
pushURL: data.pushURL
});
} else {
wx.showToast({
icon: 'none',
title: '获取房间签名失败',
});
}
});
- 退出房间
wxmeet.leaveRoom();
完整代码
WXML
<!--pages/room/room.wxml-->
<!-- 发布组件,view包裹可自定义样式 -->
<view>
<ar-push
id="arPush"
width="{{pushWidth}}"
height="200"
coverImg=""
enableAudio="{{enableAudio}}"
enableVideo="{{enableVideo}}"
pushURL="{{pushURL}}"
bindNetStateChange="handlePushNetChange"
bindRoomEvent="handleRoomEvent">
</ar-push>
</view>
<button class="meet_btn" bindtap="pausePush">暂停推流</button>
<button class="meet_btn" bindtap="resumePush">恢复推流</button>
<button class="meet_btn" bindtap="switchCamera">切换前后摄像头</button>
<button class="" bindtap="enableCamera">开关摄像头 :: 当前状态{{enableVideo ? '开' : '关'}}</button>
<button class="" bindtap="enableMicphone">开关麦克风 :: 当前状态{{enableAudio ? '开' : '关'}}</button>
<!-- 拉流组件,view包裹可自定义样式-->
<view wx:for="{{members}}" wx:key="index">
<ar-play
id="{{item.pubID}}-play"
data-id="{{item.pubID}}"
pubID="{{item.pubID}}"
width="{{item.width}}"
height="{{item.height}}"
playURL="{{item.playURL}}"
bindNetStateChange="handlePlayNetChange"
bindPlayStatus="handlePlayStatus">
</ar-play>
<button class="meet_btn" data-id="{{item.pubID}}" bindtap="pause">暂停</button>
<button class="meet_btn" data-id="{{item.pubID}}" bindtap="play">播放</button>
<button class="meet_btn" data-id="{{item.pubID}}" bindtap="full">全屏</button>
</view>
<button type="button" bindtap="leaveRoom">退出房间</button>
JS
const _windowWidth = wx.getSystemInfoSync().windowWidth
const config = require('../../config.js');
let wxRTMeet = require('miniprogram-ar-meet');
// pages/room/room.js
Page({
/**
* 页面的初始数据
*/
data: {
arPusherComponent: null,
wxmeet: null,
pushURL: '',
pushWidth: _windowWidth,
enableVideo: true,
enableAudio: false,
members: []
},
//停止推流
pausePush () {
this.data.arPusherComponent.pause();
},
//恢复推流
resumePush () {
this.data.arPusherComponent.resume();
},
//切换摄像头
switchCamera () {
this.data.arPusherComponent.switchCamera();
},
//打开/关闭摄像头
enableCamera () {
this.setData({
enableVideo: !this.data.enableVideo
}, () => {
this.data.wxmeet.setLocalVideoEnable(this.data.enableVideo);
});
},
//打开/关闭麦克风
enableMicphone () {
this.setData({
enableAudio: !this.data.enableAudio
}, () => {
this.data.wxmeet.setLocalAudioEnable(this.data.enableAudio);
});
},
//退出房间
leaveRoom() {
this.data.wxmeet.leaveRoom();
wx.navigateBack();
},
onScreen() {
wx.setKeepScreenOn({
keepScreenOn: true
})
},
offScreen() {
wx.setKeepScreenOn({
keepScreenOn: false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
let roomId = '' + options.roomid;
let wxmeet = new wxRTMeet();
that.onScreen();
that.setData({
wxmeet: wxmeet,
arPusherComponent: that.selectComponent('#arPush')
});
//服务认证 方法一:
//wxmeet.initEngine(config.DEV_ID, config.APP_ID, config.APP_KEY, config.APP_TOKEN, config.APP_DOMAIN);
//服务认证 方法二:
//设置用户验证token
wxmeet.setUserToken("");
//配置开发者应用信息
wxmeet.initAppInfo(config.APP_ID, config.APP_TOKEN);
let userid = '' + parseInt(Math.random() * 10000);
let username = '' + parseInt(Math.random() * 1000000);
wxmeet.joinRoom(roomId, userid, username,JSON.stringify({ userid }), that.data.enableVideo, that.data.enableAudio);
wxmeet.on("onJoinRoomOK", () => {
wx.showToast({
title: '加入房间成功',
});
});
wxmeet.on("onJoinRoomFaild", (code, info) => {
console.log("加入房间失败:", code, info ? info : "");
});
//收到离开房间指令,收到该回调需要离开房间
wxmeet.on("onLeaveMeet", (code, info) => {
console.log("离开房间的原因:", info ? info : "");
});
wxmeet.on("onGetPushUrl", (code, data) => {
console.log('onGetPushUrl', code, data);
if (code === 0) {//成功
that.setData({
pushURL: data.pushURL
});
} else {
wx.showToast({
icon: 'none',
title: '获取房间签名失败',
});
}
});
},
//监听房间事件
handleRoomEvent (e) {
let that = this;
let data = e.detail;
console.log('handleRoomEvent', data);
switch (data.tag) {
case "MemberJoin":
let newMember = data.detail;
newMember.map(item => {
let nitem = Object.assign({}, item, {
width: 100,
height: 100
});
members.push(nitem);
});
that.setData({
members: members
});
break;
case "MemberLeave":
let leaveUsers = data.detail;
members.map((item, index) => {
leaveUsers.map((i, n) => {
if (i.pubID === item.pubID) {
members.splice(index, 1);
}
});
});
that.setData({
members: members
});
break;
case "PushError":
//重新进会
break;
}
},
//监听推流网络质量
handlePushNetChange (e) {
let that = this;
let data = e.detail;
console.log('handlePushNetChange ====> 音频码率: %d , 视频码率: %d , 网络偏移: %d , 帧率:%d , 视频分辨率: %d * %d , GOP: %d', data.audioBitrate, data.videoBitrate, data.netJitter ? data.netJitter : 0, data.videoFPS, data.videoWidth, data.videoHeight, data.videoGOP);
},
//监听拉流网络质量
handlePlayNetChange(e) {
let that = this;
let data = e.detail;
console.log('handlePlayNetChange 用户PubId:', e.currentTarget.id.replace('user_', '').replace('-play', ''), ' , 用户网络状态: ', data);
},
//监听播放状态
handlePlayStatus (e) {
let that = this;
let data = e.detail;
//错误码参考 https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
console.log('handlePlayStatus', `pubID为 ${data.pubID} 的播放状态为 ${data.code}`);
},
pause (e) {
let that = this;
let data = e.currentTarget.dataset;
//参考 https://developers.weixin.qq.com/miniprogram/dev/api/media/live/LivePlayerContext.pause.html
that.selectComponent(`#${data.id}-play`).pause({
complete: res => {
console.log('selectComponent pause', res);
}
});
},
play (e) {
let that = this;
let data = e.currentTarget.dataset;
//参考 https://developers.weixin.qq.com/miniprogram/dev/api/media/live/LivePlayerContext.play.html
that.selectComponent(`#${data.id}-play`).play({
complete: res => {
console.log('selectComponent pause', res);
}
});
},
full (e) {
let that = this;
let data = e.currentTarget.dataset;
//参考 https://developers.weixin.qq.com/miniprogram/dev/api/media/live/LivePlayerContext.requestFullScreen.html
that.selectComponent(`#${data.id}-play`).requestFullScreen({
direction: 90,
complete: res => {
console.log('selectComponent pause', res);
}
});
//此处由于只做演示,所以2秒之后结束全屏
setTimeout(() => {
that.selectComponent(`#${data.id}-play`).exitFullScreen({
complete: res => {
console.log('selectComponent pause', res);
}
});
}, 2000);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
//小程序后台,手机切到主页面
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//返回入口,关闭小程序
this.data.wxmeet.leaveRoom();
this.offScreen();
},
})