feat: 阶段保存

src/hooks/use-ws.ts

@@ -153,21 +153,9 @@ export const useWs = () => {
       label: '1080P',
       value: 1080,
     },
-    {
-      label: '1440P',
-      value: 1440,
-    },
-    {
-      label: '1920P',
-      value: 1920,
-    },
-    {
-      label: '2400P',
-      value: 2400,
-    },
   ]);
   const currentMaxBitrate = ref(maxBitrate.value[3].value);
-  const currentResolutionRatio = ref(resolutionRatio.value[3].value);
+  const currentResolutionRatio = ref(resolutionRatio.value[4].value);
   const currentMaxFramerate = ref(maxFramerate.value[2].value);
 
   const damuList = ref<IDanmu[]>([]);
@@ -208,22 +196,22 @@ export const useWs = () => {
   watch(
     () => currentResolutionRatio.value,
     (newVal) => {
-      if (canvasVideoStream.value) {
-        canvasVideoStream.value.getVideoTracks().forEach((track) => {
-          console.log('23ds1', track);
-          track.applyConstraints({
-            frameRate: { max: currentMaxFramerate.value },
-            height: newVal,
-          });
-        });
-      } else {
-        appStore.allTrack.forEach((info) => {
-          info.track.applyConstraints({
-            frameRate: { max: currentMaxFramerate.value },
-            height: newVal,
-          });
+      // if (canvasVideoStream.value) {
+      // canvasVideoStream.value.getVideoTracks().forEach((track) => {
+      //   console.log('23ds1', track);
+      //   track.applyConstraints({
+      //     frameRate: { max: currentMaxFramerate.value },
+      //     height: newVal,
+      //   });
+      // });
+      // } else {
+      appStore.allTrack.forEach((info) => {
+        info.track.applyConstraints({
+          frameRate: { max: currentMaxFramerate.value },
+          height: newVal,
         });
-      }
+      });
+      // }
 
       networkStore.rtcMap.forEach(async (rtc) => {
         const res = await rtc.setResolutionRatio(newVal);
@@ -578,20 +566,27 @@ export const useWs = () => {
       //   isSRS: true,
       // });
       if (fabricCanvasEl.value) {
-        const mixedStream = fabricCanvasEl.value.captureStream();
+        console.log(fabricCanvasEl.value, 332332232);
+        const el = document.querySelector('#canvasRef') as HTMLCanvasElement;
+        const mixedStream = el.captureStream();
+        localStream.value?.getTracks().forEach((track) => {
+          console.log(track.id, 322312112);
+        });
+        // const mixedStream = fabricCanvasEl.value.captureStream();
         localStream.value = mixedStream;
+        setInterval(() => {
+          localStream.value?.getTracks().forEach((track) => {
+            console.log(track.id, 322312112);
+          });
+        }, 1000);
       }
       rtc.localStream = localStream.value;
-      const aaaa = document.querySelector('#canvasRef') as HTMLCanvasElement;
-      console.log(
-        localStream.value?.getVideoTracks(),
-        '235252',
-        aaaa.captureStream().getVideoTracks()
-      );
       localStream.value?.getTracks().forEach((track) => {
         console.warn(
           'srs startNewWebRtc，pc插入track',
           track.id,
+          track.getSettings().height,
+          track.getSettings().width,
           localStream.value?.id
         );
         console.log('pc添加track-2');

src/network/webRTC.ts

@@ -166,15 +166,15 @@ export class WebRTCClass {
     }
     this.localStream = stream;
 
-    if (this.maxBitrate !== -1) {
-      this.setMaxBitrate(this.maxBitrate);
-    }
-    if (this.maxFramerate !== -1) {
-      this.setMaxFramerate(this.maxFramerate);
-    }
-    if (this.resolutionRatio !== -1) {
-      this.setResolutionRatio(this.resolutionRatio);
-    }
+    // if (this.maxBitrate !== -1) {
+    //   this.setMaxBitrate(this.maxBitrate);
+    // }
+    // if (this.maxFramerate !== -1) {
+    //   this.setMaxFramerate(this.maxFramerate);
+    // }
+    // if (this.resolutionRatio !== -1) {
+    //   this.setResolutionRatio(this.resolutionRatio);
+    // }
   };
 
   /** 设置分辨率 */
@@ -462,15 +462,15 @@ export class WebRTCClass {
         if (connectionState === 'connected') {
           // 表示每一个 ICE 连接要么正在使用（connected 或 completed 状态），要么已被关闭（closed 状态）；并且，至少有一个连接处于 connected 或 completed 状态。
           console.warn(this.roomId, 'connectionState:connected');
-          if (this.maxBitrate !== -1) {
-            this.setMaxBitrate(this.maxBitrate);
-          }
-          if (this.maxFramerate !== -1) {
-            this.setMaxFramerate(this.maxFramerate);
-          }
-          if (this.resolutionRatio !== -1) {
-            this.setResolutionRatio(this.resolutionRatio);
-          }
+          // if (this.maxBitrate !== -1) {
+          //   this.setMaxBitrate(this.maxBitrate);
+          // }
+          // if (this.maxFramerate !== -1) {
+          //   this.setMaxFramerate(this.maxFramerate);
+          // }
+          // if (this.resolutionRatio !== -1) {
+          //   this.setResolutionRatio(this.resolutionRatio);
+          // }
         }
         if (connectionState === 'disconnected') {
           // 表示至少有一个 ICE 连接处于 disconnected 状态，并且没有连接处于 failed、connecting 或 checking 状态。

src/views/home/index.vue

@@ -324,11 +324,12 @@ function joinHlsRoom() {
 
 <style lang="scss" scoped>
 .home-wrap {
-  width: $w-1475;
+  background-color: papayawhip;
 
   .play-container {
     padding: 20px 0;
-    background-color: papayawhip;
+    width: $w-1475;
+    margin: 0 auto;
     text-align: center;
     white-space: nowrap;
     &.area {
@@ -378,7 +379,6 @@ function joinHlsRoom() {
         position: absolute;
         top: 0;
         left: 50%;
-        width: 100%;
         height: 100%;
         transform: translate(-50%);
 
@@ -388,7 +388,6 @@ function joinHlsRoom() {
         position: absolute;
         top: 0;
         left: 50%;
-        width: 100%;
         height: 100%;
         transform: translate(-50%);
 
@@ -535,7 +534,7 @@ function joinHlsRoom() {
   }
   .area-container {
     margin: 10px auto;
-    width: 1336px;
+    width: $w-1475;
     .area-item {
       .title {
         padding: 10px 0;
@@ -612,26 +611,19 @@ function joinHlsRoom() {
 // 屏幕宽度大于1500的时候
 @media screen and (min-width: $w-1500) {
   .home-wrap {
-    width: $w-1475;
-
     .play-container {
+      width: $w-1475;
+
       .left {
         width: $w-1200;
         height: 460px;
       }
       .right {
         height: 460px;
-
-        // .list {
-        //   .item {
-        //     width: 150px;
-        //     height: 80px;
-        //   }
-        // }
       }
     }
     .area-container {
-      width: 1085px;
+      width: $w-1475;
     }
   }
 }

src/views/push/index.vue

@@ -414,34 +414,17 @@ async function addMediaOk(val: {
       window.$message.error('srs模式最多只能有一个视频');
       return;
     }
-    // const el = document.querySelector('#canvasVideoRef') as HTMLVideoElement;
-    const el = document.querySelector('#sdfsgsa') as HTMLCanvasElement;
-    const stream = el.captureStream(24);
-    // const el = document.querySelector('#canvasVideoRef') as HTMLVideoElement;
-    console.log(el, 22121);
-    console.log(el, el, stream, 111122121);
     const track = {
       id: getRandomString(8),
-      audio: 1,
-      video: 2,
+      audio: 2,
+      video: 1,
       mediaName: val.mediaName,
-      type: MediaTypeEnum.microphone,
-      track: stream.getTracks()[0],
-      stream,
+      type: MediaTypeEnum.camera,
+      track: event.getVideoTracks()[0],
+      stream: event,
       streamid: event.id,
-      trackid: stream.getTracks()[0].id,
+      trackid: event.getVideoTracks()[0].id,
     };
-    // const track = {
-    //   id: getRandomString(8),
-    //   audio: 2,
-    //   video: 1,
-    //   mediaName: val.mediaName,
-    //   type: MediaTypeEnum.camera,
-    //   track: event.getVideoTracks()[0],
-    //   stream: event,
-    //   streamid: event.id,
-    //   trackid: event.getVideoTracks()[0].id,
-    // };
     appStore.setAllTrack([...appStore.allTrack, track]);
     addTrack(track);
     console.log('获取摄像头成功');

src/views/pushByCanvas/index.vue

@@ -262,7 +262,7 @@ const canvasSize = reactive({
   width: 1920,
   height: 1080,
 });
-const ratio = ref(0);
+const scaleRatio = ref(0);
 const videoRatio = ref(16 / 9);
 const canvasVideo = ref<HTMLVideoElement>();
 const {
@@ -317,28 +317,52 @@ function createAutoVideo({ stream, id }: { stream: MediaStream; id }) {
   document.body.appendChild(video);
   const w = stream.getVideoTracks()[0].getSettings().width;
   const h = stream.getVideoTracks()[0].getSettings().height;
+  console.log('摄像头的流', { w, h }, stream.getVideoTracks()[0].id);
   video.width = w!;
   video.height = h!;
   const dom = new fabric.Image(video, {
     top: 0,
     left: 0,
   });
-  // dom.scale(ratio.value);
+  // dom.scale(scaleRatio.value);
   fabricCanvas.value!.add(dom);
   fabric.util.requestAnimFrame(function render() {
     fabricCanvas.value?.renderAll();
     fabric.util.requestAnimFrame(render);
   });
 
+  setTimeout(() => {
+    const el = document.querySelector('#canvasRef') as HTMLCanvasElement;
+    const mixedStream = el.captureStream();
+    mixedStream.getTracks().forEach((track) => {
+      console.log('canvas的流', track.id, 322312112);
+    });
+  }, 1000);
+
   canvasVideoStream.value = canvasRef.value?.captureStream();
   // canvasVideo.value!.srcObject = canvasRef.value?.captureStream();
   const mixedStream = new MediaStream();
-  canvasVideoStream.value?.getVideoTracks().forEach((track) => {
-    console.log('----', track, track.id);
-    mixedStream.addTrack(track);
-  });
+  // canvasVideoStream.value?.getVideoTracks().forEach((track) => {
+  //   console.log('3333', canvasRef.value, track, track.id);
+  //   mixedStream.addTrack(track);
+  // });
+  // setInterval(() => {
+  //   canvasVideoStream.value?.getVideoTracks().forEach((track) => {
+  //     console.log('3333', track, track.id);
+  //     mixedStream.addTrack(track);
+  //   });
+  // }, 1000);
+  // setInterval(() => {
+  //   fabricCanvasEl.value
+  //     ?.captureStream()
+  //     .getVideoTracks()
+  //     .forEach((track) => {
+  //       console.log('44444', track, track.id);
+  //     });
+  // }, 1000);
+
   mixedStream.getVideoTracks().forEach((track) => {
-    console.log('23ds1', ratio.value, track, track.id, track.kind);
+    // console.log('23ds1', scaleRatio.value, track, track.id, track.kind);
     // fabricCanvas.value?.setHeight(200);
     // fabricCanvas.value?.setWidth(200 * videoRatio.value);
     // const x = containerRef.value!.getBoundingClientRect().width / 200;
@@ -348,14 +372,29 @@ function createAutoVideo({ stream, id }: { stream: MediaStream; id }) {
     //   height: 120,
     // });
   });
-  console.log(mixedStream, '23321');
+  // console.log(mixedStream, '23321');
   canvasVideo.value!.srcObject = mixedStream;
 }
 
 function initCanvas() {
   const ins = markRaw(new fabric.Canvas(canvasRef.value!));
-  ins.setWidth(containerRef.value!.getBoundingClientRect().width);
-  ins.setHeight(canvasSize.height * ratio.value);
+  const resolutionHeight = currentResolutionRatio.value;
+  const resolutionWidth = currentResolutionRatio.value * videoRatio.value;
+  const wrapWidth = containerRef.value!.getBoundingClientRect().width;
+  const ratio = wrapWidth / resolutionWidth;
+  scaleRatio.value = ratio;
+  const wrapHeight = resolutionHeight * ratio;
+  console.log(
+    resolutionWidth,
+    resolutionHeight,
+    'xxxxxx',
+    ratio,
+    wrapHeight,
+    wrapWidth
+  );
+  ins.setWidth(wrapWidth);
+  ins.setHeight(wrapHeight);
+  // ins.setZoom(scaleRatio.value);
   fabricCanvas.value = ins;
   fabricCanvasEl.value = canvasRef.value!;
   const video = createVideo({});
@@ -364,10 +403,6 @@ function initCanvas() {
 }
 
 onMounted(() => {
-  if (containerRef.value) {
-    ratio.value =
-      containerRef.value.getBoundingClientRect().width / canvasSize.width;
-  }
   initCanvas();
 });
 
@@ -525,7 +560,7 @@ function handleStartMedia(item: { type: MediaTypeEnum; txt: string }) {
       line-height: 0;
 
       :deep(canvas) {
-        width: 100%;
+        // width: 100%;
       }
 
       .add-wrap {