临时提交

src/pages/rtc/index.vue

@@ -38,6 +38,7 @@ const config = reactive({
   connect: false,
   audio: true,
   video: props.inviteData.invitation?.mediaType === "video",
+	// video: false,
 });
 const isRecv = computed(
   () => userStore.selfInfo.userID !== props.inviteData.invitation?.inviterUserID

src/utils/open-im-rtc/components/VideoTrack.vue

@@ -3,8 +3,8 @@
     ref="mediaEl"
     v-bind="elementProps"
     :class="mergedClass"
-    muted
     @click="clickHandler"
+    autoplay
   ></video>
 </template>
 
@@ -65,6 +65,8 @@ watch(
 )
 
 const clickHandler = (evt: MouseEvent) => {
+  console.log(evt.target)
+  evt.target.muted = false
   emit('click', evt)
   emit('trackClick', { participant, track: pub.value } as ParticipantClickEvent)
 }

src/utils/open-im-rtc/hooks/useMediaTrackBySourceOrName.ts

@@ -46,6 +46,7 @@ export function useMediaTrackBySourceOrName(
 
       subscription = newValue.subscribe((newPublication) => {
         log.debug('update track', newPublication)
+        console.log('newPublication', newPublication)
         publication.value = newPublication
         isMuted.value = newPublication?.isMuted || false
         isSubscribed.value = newPublication?.isSubscribed || false
@@ -62,6 +63,7 @@ export function useMediaTrackBySourceOrName(
   watch(
     [() => track.value, () => options.element?.value],
     ([newTrack, newEl]) => {
+      console.log('newTrack', newTrack)
       if (!newEl) return
 
       if (newTrack) {
@@ -70,15 +72,15 @@ export function useMediaTrackBySourceOrName(
         }
 
         if (
-          options.element?.value &&
+          newEl &&
           !(isLocal(observerOptions.participant) && newTrack?.kind === 'audio')
         ) {
           console.log('attach')
 
-          newTrack.attach(options.element.value)
+          newTrack.attach(newEl)
         }
       }
-      previousElement.value = options.element?.value || null
+      previousElement.value = newEl || null
     },
     { immediate: true },
   )

src/utils/open-im-rtc/hooks/useRoom.ts

@@ -103,9 +103,18 @@ export function useRoom(props: LiveKitRoomProps) {
 
   watch(
     props.refConfig,
-    (newConfig) => {
-      console.log('2. props.refConfig', newConfig)
-      room.value = passedRoom ?? new Room(options)
+    async (newConfig) => {
+      console.log('options',options)
+      room.value = passedRoom ?? new Room({
+      // automatically manage subscribed video quality
+      adaptiveStream: true,
+      // optimize publishing bandwidth and CPU for published tracks
+      dynacast: true,
+      // default capture settings
+      // videoCaptureDefaults: {
+      //   resolution: VideoPresets.h720.resolution,
+      // },
+    })
 
       const { className } = setupLiveKitRoom()
       htmlProps.value = { className }
@@ -117,6 +126,18 @@ export function useRoom(props: LiveKitRoomProps) {
         .on(RoomEvent.MediaDevicesError, handleMediaDeviceError)
         .on(RoomEvent.EncryptionError, handleEncryptionError)
         .on(RoomEvent.ConnectionStateChanged, connectionStateChangeListener)
+        .on('trackSubscribed', (track, participant, publication) => {
+          if (track.kind === 'audio') {
+            console.log('Audio track subscribed');
+          } else if (track.kind === 'video') {
+            console.log('Video track subscribed');
+            const element = track.attach();
+            document.body.appendChild(element);
+            element.play().catch(e => {
+      console.log('自动播放被阻止，需要用户交互:', e);
+    });
+          }
+        });
 
       if (simulateParticipants) {
         room.value.simulateParticipants({
@@ -141,15 +162,32 @@ export function useRoom(props: LiveKitRoomProps) {
         return
       }
 
+      console.log('2. props.refConfig', newConfig)
+      // console.log('connectOptions', connectOptions)
       if (newConfig.connect) {
         log.debug('connecting')
+        // await room.value.prepareConnection(newConfig.serverUrl, newConfig.token);
+        let realConnectOptions = {
+          audio: true,
+          audioCaptureDefaults: {
+            autoGainControl: false,
+            echoCancellation: true,
+            noiseSuppression: true
+          },
+        }
+        if (connectOptions) {
+          realConnectOptions = { ...realConnectOptions, ...connectOptions }
+        }
+        console.log('realConnectOptions', realConnectOptions)
         room.value
-          .connect(newConfig.serverUrl, newConfig.token, connectOptions)
+          .connect(newConfig.serverUrl, newConfig.token, realConnectOptions)
           .catch((e: Error) => {
             log.warn(e)
             console.log('3. error', e)
             onError?.(e)
           })
+          await room.value.localParticipant.enableCameraAndMicrophone();
+          room.value.localParticipant.setMicrophoneEnabled(true);
       } else {
         log.debug('disconnecting because connect is false')
         room.value.disconnect()