meeting

src/views/home/index.vue

@@ -37,6 +37,7 @@ import DeviceSelect from './components/Device.vue'
 import { reactive, toRefs, onMounted, watch } from 'vue'
 import { VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
 import { AudioOutlined, AudioMutedOutlined } from '@vicons/antd'
+// import { Screen, ScreenOff } from '@vicons/carbon'
 export default {
   name: 'HomePage',
   components: {
@@ -54,6 +55,10 @@ export default {
       sdkSecret: '9b5fc557f286d7e4d6eafd8023026da59f0674000f319754aa1ec4beefddcdd6',
       userId: '',
       roomId: null,
+      isJoining: false,
+      isJoined: false,
+      isPublishing: false,
+      isPublished: false,
       secret: {
         'haoran': 'eJwtzEELgjAYxvHvsqsh29ymCB28hIIElZR1G2y1ty2VJSVE3z1Tj8-vgf8HVeUhfGmPUkRDjFbTBqWbHq4wsZGtl83yPJWVXQcKpYRhHHMqGJkfPXTg9eicc4oxnrWHx9*EEFHECGVLBW5jWMn6HCRBW7njJd*WNgNrNrnbFXcZG356V94Vg7W12ydr9P0BbGAyOQ__',
         'wanghaoran': 'eJwtzEELgjAcBfDvsnO4ubnFhA6ihwIhUqEOXhZO*6dNUalF9N0z9fh*7-E*KItT56l75CPqELSZMxTajFDCzC9lqptqe2XWdihq1XVQIN-1CNlyKjx3abTtoNeTc84pIWTRER5-E0IwVwq5bgeopnPPRDluaVPGTb1P3nd7CcPMHgJ2zbFJ5HCKrDkHxzLHMmX1Dn1-G3A0Zg__'
@@ -76,6 +81,134 @@ export default {
         userSig: data.secret[data.userId], // 填写服务器或本地计算的 userSig
         mode: 'rtc'
       })
+      handleClientEvents()
+    }
+
+    const joinMeetingRoom = async() => {
+      if (data.isJoining || data.isJoined) {
+        return
+      }
+      data.isJoining = true
+      !data.client && await createMeetingRoom()
+      try {
+        await data.client.join({ roomId: data.roomId })
+        data.isJoining = false
+        data.isJoined = true
+        startGetAudioLevel()
+      } catch (error) {
+        data.isJoining = false
+        console.error('join room failed', error)
+        throw error
+      }
+    }
+    /**
+     * @description: 调节音量
+     * @return {*}
+     */
+    const startGetAudioLevel = () => {
+      data.client.on('audio-volume', (event) => {
+        event.result.forEach(({ userId, audioVolume }) => {
+          if (audioVolume > 2) {
+            console.log(`user: ${userId} is speaking, audioVolume: ${audioVolume}`)
+          }
+        })
+      })
+      data.client.enableAudioVolumeEvaluation(200)
+    }
+
+    /**
+     * @description: 房间事件监听
+     * @return {*}
+     */
+    const handleClientEvents = async() => {
+      data.client.on('error', (error) => {
+        console.error(error)
+      })
+      /* 用户被踢时触发 */
+      data.client.on('client-banned', async(event) => {
+        data.localStream = null
+        await leaveMeetingRoom()
+      })
+
+      data.client.on('peer-join', (event) => {
+        const { userId } = event
+        console.log(`peer-join ${userId}`, event)
+      })
+      /* 远端用户退房事件知 */
+      data.client.on('peer-leave', (event) => {
+        const { userId } = event
+        console.log(`peer-leave ${userId}`, event)
+      })
+      /* 远端添加流 */
+      data.client.on('stream-added', (event) => {
+        const { stream: remoteStream } = event
+        const remoteUserId = remoteStream.getUserId()
+        if (remoteUserId === `share_${this.userId}`) {
+          this.unSubscribe(remoteStream)
+        } else {
+          console.log(`remote stream added: [${remoteUserId}] type: ${remoteStream.getType()}`)
+          this.subscribe(remoteStream)
+          this.addSuccessLog(`RemoteStream added: [${remoteUserId}].`)
+        }
+      })
+      /* 远端流订阅成功 */
+      data.client.on('stream-subscribed', (event) => {
+        const { stream: remoteStream } = event
+        const remoteUserId = remoteStream.getUserId()
+        console.log('stream-subscribed userId: ', remoteUserId)
+        this.addSuccessLog(`RemoteStream subscribed: [${remoteUserId}].`)
+        this.remoteStreamList.push(remoteStream)
+        this.$nextTick(() => {
+          this.playRemoteStream(remoteStream, remoteUserId)
+        })
+      })
+      /* 远端流移除 */
+      data.client.on('stream-removed', (event) => {
+        const { stream: remoteStream } = event
+        remoteStream.stop()
+        const index = this.remoteStreamList.indexOf(remoteStream)
+        if (index >= 0) {
+          this.remoteStreamList.splice(index, 1)
+        }
+        console.log(`stream-removed userId: ${remoteStream.getUserId()} type: ${remoteStream.getType()}`)
+      })
+      /* 远端流更新 */
+      data.client.on('stream-updated', (event) => {
+        const { stream: remoteStream } = event
+        console.log(`type: ${remoteStream.getType()} stream-updated hasAudio: ${remoteStream.hasAudio()} hasVideo: ${remoteStream.hasVideo()}`)
+        this.addSuccessLog(`RemoteStream updated: [${remoteStream.getUserId()}] audio:${remoteStream.hasAudio()}, video:${remoteStream.hasVideo()}.`)
+      })
+      /* 远端流禁用音频 */
+      data.client.on('mute-audio', (event) => {
+        const { userId } = event
+        console.log(`${userId} mute audio`)
+      })
+      /* 远端流启用音频 */
+      data.client.on('unmute-audio', (event) => {
+        const { userId } = event
+        console.log(`${userId} unmute audio`)
+      })
+      /* 远端流禁用视频 */
+      data.client.on('mute-video', (event) => {
+        const { userId } = event
+        console.log(`${userId} mute video`)
+      })
+      /* 远端流启用视频 */
+      data.client.on('unmute-video', (event) => {
+        const { userId } = event
+        console.log(`${userId} unmute video`)
+      })
+
+      /* 本地 client 与腾讯云的连接状态变更 */
+      data.client.on('connection-state-changed', (event) => {
+        console.log(`RtcClient state changed to ${event.state} from ${event.prevState}`)
+      })
+
+      /* 网络质量统计数据 */
+      data.client.on('network-quality', (event) => {
+        const { uplinkNetworkQuality, downlinkNetworkQuality } = event
+        console.log(`network-quality uplinkNetworkQuality: ${uplinkNetworkQuality}, downlinkNetworkQuality: ${downlinkNetworkQuality}`)
+      })
     }
 
     /**
@@ -111,6 +244,26 @@ export default {
         })
     }
 
+    /**
+     * @description: 开始推流
+     * @return {*}
+     */
+    const publishStream = async() => {
+      if (!data.isJoined || data.isPublishing || data.isPublished) {
+        return
+      }
+      data.isPublishing = true
+      try {
+        await data.client.publish(settings.localStream)
+        data.isPublishing = false
+        data.isPublished = true
+      } catch (error) {
+        data.isPublishing = false
+        console.error('publish localStream failed', error)
+        throw error
+      }
+    }
+
     /**
      * @description: 打开摄像头
      * @return {*}
@@ -171,8 +324,10 @@ export default {
     watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => {
       if (cameraId && microphoneId) {
         await createMeetingRoom()
+        await joinMeetingRoom()
         await initLocalStream()
         await playLocalStream()
+        await publishStream()
       }
     })