feat: 阶段保存

src/assets/constant.scss

@@ -18,8 +18,10 @@ $w-1300: 1300px;
 $w-1275: 1275px;
 $w-1250: 1250px;
 $w-1200: 1200px;
+$w-1150: 1150px;
 $w-1100: 1100px;
 $w-1000: 1000px;
+$w-950: 950px;
 
 $w-350: 350px;
 $w-300: 300px;

src/hooks/use-ws.ts

@@ -49,7 +49,7 @@ export const useWs = () => {
   const trackInfo = reactive({ track_audio: 1, track_video: 1 });
   const localVideo = ref<HTMLVideoElement>(document.createElement('video'));
   const localStream = ref<MediaStream>();
-  const fabricCanvasEl = ref<HTMLCanvasElement>();
+  const fabricCanvasEl = ref<HTMLVideoElement>();
   const canvasVideoStream = ref<MediaStream>();
   const lastCoverImg = ref('');
   const maxBitrate = ref([
@@ -154,7 +154,7 @@ export const useWs = () => {
       value: 1080,
     },
   ]);
-  const currentMaxBitrate = ref(maxBitrate.value[3].value);
+  const currentMaxBitrate = ref(maxBitrate.value[4].value);
   const currentResolutionRatio = ref(resolutionRatio.value[4].value);
   const currentMaxFramerate = ref(maxFramerate.value[2].value);
 
@@ -165,6 +165,7 @@ export const useWs = () => {
     (newTrack, oldTrack) => {
       console.log('appStore.allTrack变了');
       if (fabricCanvasEl.value) {
+        // @ts-ignore
         const mixedStream = fabricCanvasEl.value.captureStream();
         localStream.value = mixedStream;
       } else {
@@ -566,13 +567,11 @@ export const useWs = () => {
       //   isSRS: true,
       // });
       if (fabricCanvasEl.value) {
-        console.log(fabricCanvasEl.value, 332332232);
-        const el = document.querySelector('#canvasRef') as HTMLCanvasElement;
-        const mixedStream = el.captureStream();
+        // @ts-ignore
+        const mixedStream = fabricCanvasEl.value.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) => {

src/layout/pc/head/index.vue

@@ -350,14 +350,23 @@ function quickStart() {
   window.$message.info('敬请期待！');
 }
 
-function handleStartLive(key) {
+function handleStartLive(key: liveTypeEnum) {
   if (!loginTip()) {
     return;
   }
-  const url = router.resolve({
-    name: routerName.push,
-    query: { liveType: key },
-  });
+  let url;
+  if (key === liveTypeEnum.canvasPush) {
+    url = router.resolve({
+      name: routerName.pushByCanvas,
+      query: { liveType: liveTypeEnum.srsPush },
+    });
+  } else {
+    url = router.resolve({
+      name: routerName.push,
+      query: { liveType: key },
+    });
+  }
+
   openToTarget(url.href);
 }
 </script>

src/router/index.ts

@@ -134,16 +134,17 @@ export const defaultRoutes: RouteRecordRaw[] = [
         path: '/pull/:roomId',
         component: () => import('@/views/pull/index.vue'),
       },
-      {
-        name: routerName.push,
-        path: '/push',
-        component: () => import('@/views/push/index.vue'),
-      },
+
       {
         name: routerName.pushByCanvas,
         path: '/pushByCanvas',
         component: () => import('@/views/pushByCanvas/index.vue'),
       },
+      {
+        name: routerName.push,
+        path: '/push',
+        component: () => import('@/views/push/index.vue'),
+      },
     ],
   },
   {

src/views/pushByCanvas/index.vue

@@ -9,9 +9,10 @@
         class="container"
       >
         <AudioRoomTip></AudioRoomTip>
+        <!-- <div id="canvasRef"></div> -->
         <canvas
-          id="canvasRef"
-          ref="canvasRef"
+          id="pushCanvasRef"
+          ref="pushCanvasRef"
         ></canvas>
         <div
           v-if="!appStore.allTrack || appStore.allTrack.length <= 0"
@@ -253,14 +254,14 @@ const topRef = ref<HTMLDivElement>();
 const bottomRef = ref<HTMLDivElement>();
 const danmuListRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();
-const canvasRef = ref<HTMLCanvasElement>();
+const pushCanvasRef = ref<HTMLCanvasElement>();
 const fabricCanvas = ref<fabric.Canvas>();
 const localVideoRef = ref<HTMLVideoElement>();
 const remoteVideoRef = ref<HTMLVideoElement[]>([]);
 const isSRS = route.query.liveType === liveTypeEnum.srsPush;
-const canvasSize = reactive({
-  width: 1920,
-  height: 1080,
+const wrapSize = reactive({
+  width: 0,
+  height: 0,
 });
 const scaleRatio = ref(0);
 const videoRatio = ref(16 / 9);
@@ -313,13 +314,26 @@ function createAutoVideo({ stream, id }: { stream: MediaStream; id }) {
   video.style.height = `1px`;
   video.style.position = 'fixed';
   video.style.bottom = '0';
-  video.style.left = '0';
+  video.style.right = '0';
+  video.style.opacity = '0';
+  video.style.pointerEvents = 'none';
   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.Rect({
+  //   left: 100,
+  //   top: 50,
+  //   fill: 'yellow',
+  //   width: 200,
+  //   height: 100,
+  //   objectCaching: false,
+  //   stroke: 'lightgreen',
+  //   strokeWidth: 4,
+  // });
   const dom = new fabric.Image(video, {
     top: 0,
     left: 0,
@@ -331,53 +345,31 @@ function createAutoVideo({ stream, id }: { stream: MediaStream; id }) {
     fabric.util.requestAnimFrame(render);
   });
 
+  // canvasVideoStream.value = document
+  //   .querySelector('#pushCanvasRef')!
+  //   .captureStream();
+  canvasVideoStream.value = pushCanvasRef.value!.captureStream();
+
   setTimeout(() => {
-    const el = document.querySelector('#canvasRef') as HTMLCanvasElement;
-    const mixedStream = el.captureStream();
-    mixedStream.getTracks().forEach((track) => {
-      console.log('canvas的流', track.id, 322312112);
-    });
+    canvasVideoStream.value
+      ?.getVideoTracks()[0]
+      .applyConstraints({
+        width: { ideal: 640 },
+        height: { ideal: 480 },
+        // frameRate: { ideal: 30 },
+      })
+      .then(() => {
+        console.log('修改成功');
+        canvasVideo.value!.srcObject = canvasVideoStream.value!;
+      })
+      .catch((e) => {
+        console.error('修改错误', e);
+      });
   }, 1000);
-
-  canvasVideoStream.value = canvasRef.value?.captureStream();
-  // canvasVideo.value!.srcObject = canvasRef.value?.captureStream();
-  const mixedStream = new MediaStream();
-  // 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', scaleRatio.value, track, track.id, track.kind);
-    // fabricCanvas.value?.setHeight(200);
-    // fabricCanvas.value?.setWidth(200 * videoRatio.value);
-    // const x = containerRef.value!.getBoundingClientRect().width / 200;
-    // ratio.value = ratio.value * x;
-    // console.log(ratio.value);
-    // track.applyConstraints({
-    //   height: 120,
-    // });
-  });
-  // console.log(mixedStream, '23321');
-  canvasVideo.value!.srcObject = mixedStream;
+  canvasVideo.value!.srcObject = canvasVideoStream.value!;
 }
 
 function initCanvas() {
-  const ins = markRaw(new fabric.Canvas(canvasRef.value!));
   const resolutionHeight = currentResolutionRatio.value;
   const resolutionWidth = currentResolutionRatio.value * videoRatio.value;
   const wrapWidth = containerRef.value!.getBoundingClientRect().width;
@@ -392,12 +384,20 @@ function initCanvas() {
     wrapHeight,
     wrapWidth
   );
+  // lower-canvas: 实际的canvas画面，也就是pushCanvasRef
+  // upper-canvas: 操作时候的canvas
+  const ins = markRaw(new fabric.Canvas(pushCanvasRef.value!));
+  // ins.setWidth(resolutionWidth);
+  // ins.setHeight(resolutionHeight);
   ins.setWidth(wrapWidth);
   ins.setHeight(wrapHeight);
-  // ins.setZoom(scaleRatio.value);
+  console.log({ resolutionWidth, resolutionHeight });
+  ins.setZoom(1);
+  wrapSize.width = wrapWidth;
+  wrapSize.height = wrapHeight;
   fabricCanvas.value = ins;
-  fabricCanvasEl.value = canvasRef.value!;
   const video = createVideo({});
+  fabricCanvasEl.value = video;
   canvasVideo.value = video;
   document.body.appendChild(video);
 }
@@ -545,7 +545,7 @@ function handleStartMedia(item: { type: MediaTypeEnum; txt: string }) {
     display: inline-block;
     overflow: hidden;
     box-sizing: border-box;
-    width: $w-1000;
+    width: $w-950;
     height: 100%;
     border-radius: 6px;
     background-color: white;
@@ -749,10 +749,10 @@ function handleStartMedia(item: { type: MediaTypeEnum; txt: string }) {
   .push-wrap {
     width: $w-1475;
     .left {
-      width: $w-1200;
+      width: $w-1150;
     }
     .right {
-      width: $w-250;
+      width: $w-300;
     }
   }
 }