|
|
@@ -0,0 +1,337 @@
|
|
|
+import { genTestUserSig } from './GenerateTestUserSig.js'
|
|
|
+const app = getApp()
|
|
|
+Page({
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面的初始数据
|
|
|
+ */
|
|
|
+ data: {
|
|
|
+ roomID: 1, // 房间号
|
|
|
+ role: '',
|
|
|
+ userList: [], // 主播list
|
|
|
+ userID: '',
|
|
|
+ debugMode: false,
|
|
|
+ initialRole: '',
|
|
|
+ showRolePanel: false,
|
|
|
+ presenterConfig: {
|
|
|
+ enableMic: true,
|
|
|
+ muteAllAudio: false,
|
|
|
+ },
|
|
|
+ headerHeight: app.globalData.headerHeight,
|
|
|
+ statusBarHeight: app.globalData.statusBarHeight,
|
|
|
+ rtcConfig: {
|
|
|
+ sdkAppID: '1400537003', // 必要参数 开通实时音视频服务创建应用后分配的 sdkAppID
|
|
|
+ userID: '', // 必要参数 用户 ID 可以由您的帐号系统指定
|
|
|
+ userSig: '', // 必要参数 身份签名,相当于登录密码的作用
|
|
|
+ template: '', // 必要参数 组件模版,支持的值 1v1 grid custom ,注意:不支持动态修改, iOS 不支持 pusher 动态渲染
|
|
|
+ },
|
|
|
+ },
|
|
|
+ enterRoom: function({ sdkAppID, userSig }) {
|
|
|
+ const template = 'custom'
|
|
|
+ const roomID = this.data.roomID
|
|
|
+ console.log('* room enterRoom', roomID, template)
|
|
|
+ this.data.rtcConfig = {
|
|
|
+ sdkAppID: sdkAppID, // 您的实时音视频服务创建应用后分配的 sdkAppID
|
|
|
+ userID: '2',
|
|
|
+ userSig: userSig,
|
|
|
+ template: template, // 1v1 grid custom
|
|
|
+ debugMode: this.data.debugMode, // 非必要参数,打开组件的调试模式,开发调试时建议设置为 true
|
|
|
+ audioVolumeType: this.data.audioVolumeType,
|
|
|
+ }
|
|
|
+ this.setData({
|
|
|
+ rtcConfig: this.data.rtcConfig,
|
|
|
+ }, () => {
|
|
|
+ // 进房前决定是否推送视频或音频
|
|
|
+ if (this.data.role === 'presenter') {
|
|
|
+ this.trtcComponent.publishLocalAudio()
|
|
|
+ }
|
|
|
+ // roomID 取值范围 1 ~ 4294967295
|
|
|
+ this.trtcComponent.enterRoom({ roomID: roomID })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getSignature: function(userID) {
|
|
|
+ console.log('* room getSignature', userID)
|
|
|
+ const Signature = genTestUserSig(userID)
|
|
|
+
|
|
|
+ this.enterRoom({
|
|
|
+ sdkAppID: Signature.sdkAppID,
|
|
|
+ userSig: Signature.userSig,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ bindTRTCRoomEvent: function() {
|
|
|
+ const TRTC_EVENT = this.trtcComponent.EVENT
|
|
|
+ // 初始化事件订阅
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.LOCAL_JOIN, (event)=>{
|
|
|
+ console.log('* room LOCAL_JOIN', event)
|
|
|
+ // 进房成功,触发该事件后可以对本地视频和音频进行设置
|
|
|
+ // if (this.data.role === 'presenter') {
|
|
|
+ // this.trtcComponent.publishLocalAudio()
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.LOCAL_LEAVE, (event)=>{
|
|
|
+ console.log('* room LOCAL_LEAVE', event)
|
|
|
+ })
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.ERROR, (event)=>{
|
|
|
+ console.log('* room ERROR', event)
|
|
|
+ })
|
|
|
+ // 远端用户进房
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_JOIN, (event)=>{
|
|
|
+ console.log('* room REMOTE_USER_JOIN', event, this.trtcComponent.getRemoteUserList())
|
|
|
+ const userList = this.trtcComponent.getRemoteUserList()
|
|
|
+ this.handleOnUserList(userList).then(() => {
|
|
|
+ console.log(this.data.userList)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // 远端用户退出
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_LEAVE, (event)=>{
|
|
|
+ console.log('* room REMOTE_USER_LEAVE', event, this.trtcComponent.getRemoteUserList())
|
|
|
+ const userList = this.trtcComponent.getRemoteUserList()
|
|
|
+ this.handleOnUserList(userList).then(() => {
|
|
|
+ console.log(this.data.userList)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // 远端用户推送音频
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_ADD, (event)=>{
|
|
|
+ if (this.data.userList.length < 6) {
|
|
|
+ // 订阅音频
|
|
|
+ const data = event.data
|
|
|
+ // 如果不订阅就不会自动播放音频
|
|
|
+ const userList = this.trtcComponent.getRemoteUserList()
|
|
|
+ this.handleOnUserList(userList).then(() => {
|
|
|
+ console.log(this.data.userList)
|
|
|
+ })
|
|
|
+ console.log('* room REMOTE_AUDIO_ADD', event, this.trtcComponent.getRemoteUserList())
|
|
|
+ this.trtcComponent.subscribeRemoteAudio({ userID: data.userID })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 远端用户取消推送音频
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, (event)=>{
|
|
|
+ console.log('* room REMOTE_AUDIO_REMOVE', event, this.trtcComponent.getRemoteUserList())
|
|
|
+ const userList = this.trtcComponent.getRemoteUserList()
|
|
|
+ this.handleOnUserList(userList).then(() => {
|
|
|
+ console.log(this.data.userList)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_VOLUME_UPDATE, (event)=>{
|
|
|
+ const userID = event.data.target.dataset.userid
|
|
|
+ const volume = event.data.detail.volume
|
|
|
+ this.data.userList.forEach((item) =>{
|
|
|
+ if (item.userID === userID) {
|
|
|
+ item.volume = volume
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.setData({
|
|
|
+ userList: this.data.userList,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleOnUserList: function(userList) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const newUserList = []
|
|
|
+ let index = 0
|
|
|
+ const oldUserList = this.data.userList
|
|
|
+ userList.forEach((item) => {
|
|
|
+ if (item.hasMainAudio) {
|
|
|
+ const user = this.judgeWhetherExist({ userID: item.userID, streamType: 'main' }, oldUserList)
|
|
|
+ index += 1
|
|
|
+ if (user) {
|
|
|
+ // 已存在
|
|
|
+ newUserList.push(Object.assign(user, { index: index }))
|
|
|
+ } else {
|
|
|
+ newUserList.push({
|
|
|
+ userID: item.userID,
|
|
|
+ streamType: 'main',
|
|
|
+ index: index,
|
|
|
+ hasMainAudio: item.hasMainAudio,
|
|
|
+ volume: 0,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.setData({
|
|
|
+ userList: newUserList,
|
|
|
+ }, () => {
|
|
|
+ console.log('handleOnUserList newUserList', newUserList)
|
|
|
+ resolve()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ judgeWhetherExist: function(target, userList) {
|
|
|
+ userList.forEach( (item) => {
|
|
|
+ if (target.userID === item.userID && target.streamType === item.streamType) {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ handlePublishAudio() {
|
|
|
+ if (this.data.presenterConfig.enableMic) {
|
|
|
+ this.trtcComponent.unpublishLocalAudio()
|
|
|
+ const config = this.data.presenterConfig
|
|
|
+ config.enableMic = false
|
|
|
+ this.setData({
|
|
|
+ presenterConfig: config,
|
|
|
+ }, () => {
|
|
|
+ wx.showToast({
|
|
|
+ title: '您已关闭麦克风',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 500,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.trtcComponent.publishLocalAudio()
|
|
|
+ const config = this.data.presenterConfig
|
|
|
+ config.enableMic = true
|
|
|
+ this.setData({
|
|
|
+ presenterConfig: config,
|
|
|
+ }, () => {
|
|
|
+ wx.showToast({
|
|
|
+ title: '您已开启麦克风',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 500,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleMuteAllAudio() {
|
|
|
+ if (this.data.presenterConfig.muteAllAudio) {
|
|
|
+ this.data.userList.forEach((item) => {
|
|
|
+ this.trtcComponent.subscribeRemoteAudio({ userID: item.userID })
|
|
|
+ })
|
|
|
+ const config = this.data.presenterConfig
|
|
|
+ config.muteAllAudio = false
|
|
|
+ this.setData({
|
|
|
+ presenterConfig: config,
|
|
|
+ }, () => {
|
|
|
+ wx.showToast({
|
|
|
+ title: '取消禁音成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 500,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.data.userList.forEach((item) => {
|
|
|
+ this.trtcComponent.unsubscribeRemoteAudio({ userID: item.userID })
|
|
|
+ })
|
|
|
+ const config = this.data.presenterConfig
|
|
|
+ config.muteAllAudio = true
|
|
|
+ this.setData({
|
|
|
+ presenterConfig: config,
|
|
|
+ }, () => {
|
|
|
+ wx.showToast({
|
|
|
+ title: '禁音成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 500,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 返回上一页
|
|
|
+ */
|
|
|
+ onBack: function() {
|
|
|
+ wx.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleRoleChange() {
|
|
|
+ if (this.data.initialRole !== 'presenter' ) {
|
|
|
+ this.setData({
|
|
|
+ showRolePanel: !this.data.showRolePanel,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmRoleChange() {
|
|
|
+ if (this.data.role === 'audience') {
|
|
|
+ this.trtcComponent.publishLocalAudio().then(() => {
|
|
|
+ this.setData({
|
|
|
+ role: 'presenter',
|
|
|
+ showRolePanel: false,
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '上麦失败',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.trtcComponent.unpublishLocalAudio().then(() => {
|
|
|
+ this.setData({
|
|
|
+ role: 'audience',
|
|
|
+ showRolePanel: false,
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '下麦失败',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ * @param {*} options 配置项
|
|
|
+ */
|
|
|
+ onLoad: function(options) {
|
|
|
+ console.log('room onload', options)
|
|
|
+ wx.setKeepScreenOn({
|
|
|
+ keepScreenOn: true,
|
|
|
+ })
|
|
|
+ // 获取 rtcroom 实例
|
|
|
+ this.trtcComponent = this.selectComponent('#trtc-component')
|
|
|
+ Object.getOwnPropertyNames(options).forEach((key) => {
|
|
|
+ if (options[key] === 'true') {
|
|
|
+ options[key] = true
|
|
|
+ }
|
|
|
+ if (options[key] === 'false') {
|
|
|
+ options[key] = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 监听TRTC Room 关键事件
|
|
|
+ this.bindTRTCRoomEvent()
|
|
|
+ this.setData({
|
|
|
+ roomID: 1,
|
|
|
+ // role: 1,
|
|
|
+ // initialRole: 1,
|
|
|
+ userID: '2',
|
|
|
+ debugMode:true,
|
|
|
+ // audioVolumeType: options.audioVolumeType,
|
|
|
+ }, () => {
|
|
|
+ this.getSignature('2')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady: function() {
|
|
|
+ console.log('room ready')
|
|
|
+ wx.setKeepScreenOn({
|
|
|
+ keepScreenOn: true,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow: function() {
|
|
|
+ console.log('room show')
|
|
|
+ wx.setKeepScreenOn({
|
|
|
+ keepScreenOn: true,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ onHide: function() {
|
|
|
+ console.log('room hide')
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload: function() {
|
|
|
+ console.log('room unload')
|
|
|
+ wx.setKeepScreenOn({
|
|
|
+ keepScreenOn: false,
|
|
|
+ })
|
|
|
+ },
|
|
|
+})
|
|
|
+
|