fix: web audio

src/hooks/use-push.ts

@@ -202,7 +202,8 @@ export function usePush() {
       if (!sender) {
         console.log(
           'pc添加track-开播后中途添加，替换它',
-          addTrackInfo.track?.id
+          addTrackInfo.track?.id,
+          canvasVideoStream.value!.getAudioTracks()[0]
         );
         rtc.peerConnection
           ?.getSenders()
@@ -218,6 +219,14 @@ export function usePush() {
     });
     console.log('addTrack后结果的音频轨', mixedStream.getAudioTracks());
     console.log('addTrack后结果的视频轨', mixedStream.getVideoTracks());
+    console.log(
+      'addTrack后canvasVideoStream音频轨',
+      canvasVideoStream.value?.getAudioTracks()
+    );
+    console.log(
+      'addTrack后canvasVideoStream视频轨',
+      canvasVideoStream.value?.getVideoTracks()
+    );
     localStream.value = mixedStream;
   }
 

src/hooks/use-srs-ws.ts

@@ -66,6 +66,10 @@ export const useSrsWs = () => {
     clearInterval(loopHeartbeatTimer.value);
   });
 
+  setInterval(() => {
+    console.log(canvasVideoStream.value?.getAudioTracks());
+  }, 1000);
+
   const mySocketId = computed(() => {
     return networkStore.wsMap.get(roomId.value)?.socketIo?.id || '-1';
   });
@@ -91,7 +95,7 @@ export const useSrsWs = () => {
     if (!rtc) return;
     canvasVideoStream.value?.getTracks().forEach((track) => {
       if (rtc && canvasVideoStream.value) {
-        console.log('插入track', track);
+        console.log('11canvasVideoStream插入track', track.kind, track);
         rtc.peerConnection?.addTrack(track, canvasVideoStream.value);
       }
     });
@@ -373,7 +377,7 @@ export const useSrsWs = () => {
           networkStore.updateRtcMap(`${roomId.value}___${receiver!}`, rtc);
           canvasVideoStream.value?.getTracks().forEach((track) => {
             if (rtc && canvasVideoStream.value) {
-              console.log('插入track', track);
+              console.log('22canvasVideoStream插入track', track.kind, track);
               rtc.peerConnection?.addTrack(track, canvasVideoStream.value);
             }
           });

src/views/push/rtc/index.vue

@@ -478,8 +478,9 @@ let streamTmp: MediaStream;
 const webaudioVideo = ref<HTMLVideoElement>();
 
 function handleMixedAudio() {
-  console.log('handleMixedAudiohandleMixedAudio');
+  console.log('handleMixedAudio');
   const allAudioTrack = appStore.allTrack.filter((item) => item.audio === 1);
+  audioCtx.value = new AudioContext();
   if (audioCtx.value) {
     const gainNode = audioCtx.value.createGain();
     allAudioTrack.forEach((item) => {
@@ -488,20 +489,35 @@ function handleMixedAudio() {
       audioInput.connect(gainNode);
       console.log('混流', item.stream?.id, item.stream);
     });
-    if (streamTmp) {
-      const destination = audioCtx.value.createMediaStreamDestination();
-      streamTmp.addTrack(destination.stream.getAudioTracks()[0]);
-      gainNode.connect(destination);
-      const mixedStream = new MediaStream();
-      mixedStream.addTrack(destination.stream.getAudioTracks()[0]);
-      mixedStream.addTrack(canvasVideoStream.value!.getVideoTracks()[0]);
-      canvasVideoStream.value = mixedStream;
-      return;
-    }
+    // if (streamTmp) {
+    //   const destination = audioCtx.value.createMediaStreamDestination();
+    //   streamTmp.addTrack(destination.stream.getAudioTracks()[0]);
+    //   gainNode.connect(destination);
+    //   const mixedStream = new MediaStream();
+    //   console.log(
+    //     'destination.stream.getAudioTracks()',
+    //     destination.stream.getAudioTracks()
+    //   );
+    //   mixedStream.addTrack(destination.stream.getAudioTracks()[0]);
+    //   mixedStream.addTrack(canvasVideoStream.value!.getVideoTracks()[0]);
+    //   canvasVideoStream.value = mixedStream;
+    //   return;
+    // }
+
     const destination = audioCtx.value.createMediaStreamDestination();
-    streamTmp = destination.stream;
-    // @ts-ignore
-    canvasVideoStream.value?.addTrack(destination.stream.getAudioTracks()[0]);
+    // streamTmp = destination.stream;
+    if (canvasVideoStream.value?.getAudioTracks()[0]) {
+      canvasVideoStream.value.removeTrack(
+        canvasVideoStream.value?.getAudioTracks()[0]
+      );
+      canvasVideoStream.value?.addTrack(destination.stream.getAudioTracks()[0]);
+    } else {
+      canvasVideoStream.value?.addTrack(destination.stream.getAudioTracks()[0]);
+    }
+    console.log(
+      canvasVideoStream.value?.getAudioTracks(),
+      'canvasVideoStreamcanvasVideoStream'
+    );
     gainNode.connect(destination);
     webaudioVideo.value = createVideo({ appendChild: true });
     webaudioVideo.value.className = 'web-audio-video';
@@ -1310,7 +1326,6 @@ async function addMediaOk(val: {
       const { canvasDom, scale } = await autoCreateVideo({
         stream,
         id: mediaVideoTrack.id,
-        video: videoEl,
       });
       mediaVideoTrack.scaleInfo = { scaleX: scale, scaleY: scale };
       mediaVideoTrack.videoEl = videoEl;
@@ -1354,7 +1369,7 @@ async function addMediaOk(val: {
     console.log('获取视频成功', fabricCanvas.value);
   }
 
-  canvasVideoStream.value = pushCanvasRef.value!.captureStream();
+  // canvasVideoStream.value = pushCanvasRef.value!.captureStream();
 }
 
 function handleChangeMuted(item: AppRootState['allTrack'][0]) {