feat: msr

.vscode/settings.json

@@ -37,5 +37,6 @@
     "ts",
     "tsx",
     "vue"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -40,6 +40,7 @@
     "browser-tool": "^1.0.5",
     "flv.js": "^1.6.2",
     "mediasoup-client": "^3.6.84",
+    "msr": "^1.3.4",
     "pinia": "^2.0.11",
     "socket.io-client": "^4.6.1",
     "vconsole": "^3.15.0",

pnpm-lock.yaml

@@ -43,6 +43,7 @@ specifiers:
   lint-staged: ^12.1.4
   mediasoup-client: ^3.6.84
   mini-css-extract-plugin: ^2.6.0
+  msr: ^1.3.4
   node-emoji: ^1.11.0
   pinia: ^2.0.11
   portfinder: ^1.0.28
@@ -84,6 +85,7 @@ dependencies:
   browser-tool: 1.0.5
   flv.js: 1.6.2
   mediasoup-client: 3.6.84
+  msr: 1.3.4
   pinia: 2.0.33_hmuptsblhheur2tugfgucj7gc4
   socket.io-client: 4.6.1
   vconsole: 3.15.0
@@ -6907,6 +6909,10 @@ packages:
   /ms/2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  /msr/1.3.4:
+    resolution: {integrity: sha512-vx1gmfKCacOylK5YNSlWWrWcqMfOjSgQQn3rb4NA830LlBrXyWVHJQdbILG4xiK9Xz77K35ve2CLodX2gEzlKA==}
+    dev: false
+
   /multicast-dns/7.2.5:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
     hasBin: true

src/views/bilibiliPush/index.vue

@@ -122,6 +122,7 @@
 
 <script lang="ts" setup>
 import { getRandomString } from 'billd-utils';
+import MediaStreamRecorder from 'msr';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 import { IAdminIn, ICandidate, IOffer, liveTypeEnum } from '@/interface';
@@ -233,7 +234,8 @@ onMounted(() => {
     const res =
       bottomRef.value.getBoundingClientRect().top -
       topRef.value.getBoundingClientRect().top;
-    localVideoRef.value.style.height = `${res}px`;
+    localVideoRef.value.style.height = `100px`;
+    // localVideoRef.value.style.height = `${res}px`;
   }
   localVideoRef.value?.addEventListener('loadstart', () => {
     console.warn('视频流-loadstart');
@@ -478,9 +480,10 @@ function endLive() {
     localVideoRef.value.srcObject = null;
   }
   if (!websocketInstant.value) return;
-  websocketInstant.value.send({
-    msgType: WsMsgTypeEnum.roomNoLive,
-  });
+  websocketInstant.value.close();
+  // websocketInstant.value.send({
+  //   msgType: WsMsgTypeEnum.roomNoLive,
+  // });
 }
 
 function startLive() {
@@ -520,7 +523,8 @@ async function startMediaDevices() {
     // const rec = new MediaRecorder(event, { mimeType: 'image/png' });
     // const rec = new MediaRecorder(event);
     const rec = new MediaRecorder(event, {
-      mimeType: 'video/webm;codecs=avc1.64001f,opus',
+      // mimeType: 'video/webm;codecs=avc1.64001f,opus',
+      mimeType: 'video/webm',
     });
     rec.addEventListener('dataavailable', (e) => {
       console.log(new Date().toLocaleString(), 'dataavailable');
@@ -571,6 +575,59 @@ async function startGetDisplayMedia() {
     if (!localVideoRef.value) return;
     localVideoRef.value.srcObject = event;
     localStream.value = event;
+    const rec = new MediaStreamRecorder(event);
+    // const rec = new MediaRecorder(event, {
+    //   mimeType: 'video/webm',
+    // });
+    rec.ondataavailable = (blob) => {
+      if (!websocketInstant.value) return;
+      // websocketInstant.value.socketIo?.emit(WsMsgTypeEnum.sendBlob, e.data);
+      // websocketInstant.value.socketIo?.emit('aaa', { aa: recordedBlob });
+      websocketInstant.value.send({
+        msgType: WsMsgTypeEnum.sendBlob,
+        data: { blob, timestamp: new Date().getTime() },
+      });
+    };
+    rec.start(500);
+
+    // rec.addEventListener('dataavailable', (e) => {
+    //   console.log(new Date().toLocaleString(), 'dataavailable');
+    //   if (e.data.size <= 0) {
+    //     return;
+    //   }
+    //   blobArr.value.push(e.data);
+
+    //   console.log(e.data.stream());
+    //   // document.querySelector<HTMLVideoElement>('#blobVideo')!.srcObject =
+    //   //   e.data.stream();
+    //   // const recordedBlob = new Blob([e.data], { type: 'video/webm' });
+    //   // const res1 = blobArr.value.pop();
+    //   // const res2 = res1 ? [res1] : [];
+    //   // const recordedBlob = new Blob(res2, { type: 'video/webm' });
+    //   const recordedBlob = new Blob(blobArr.value, { type: 'video/webm' });
+    //   // const recordedBlob = new Blob([e.data]);
+    //   console.log(recordedBlob, blobArr.value.length, 222);
+    //   // const url = window.URL.createObjectURL(recordedBlob);
+    //   // const a = document.createElement('a');
+    //   // a.style.display = 'none';
+    //   // a.href = url;
+    //   // a.download = 'test.webm';
+    //   // document.body.appendChild(a);
+    //   // a.click();
+    //   // setTimeout(() => {
+    //   //   document.body.removeChild(a);
+    //   //   window.URL.revokeObjectURL(url);
+    //   // }, 100);
+    //   if (!websocketInstant.value) return;
+    //   // websocketInstant.value.socketIo?.emit(WsMsgTypeEnum.sendBlob, e.data);
+    //   // websocketInstant.value.socketIo?.emit('aaa', { aa: recordedBlob });
+    //   websocketInstant.value.send({
+    //     msgType: WsMsgTypeEnum.sendBlob,
+    //     data: { blob: recordedBlob, timestamp: new Date().getTime() },
+    //   });
+    //   // blobArr.value = [];
+    // });
+    // rec.start(500);
   }
 }
 function addTrack() {

test.drawio

@@ -0,0 +1,39 @@
+<mxfile host="65bd71144e">
+    <diagram id="dqmK7txivQjgTJvqpF2s" name="第 1 页">
+        <mxGraphModel dx="961" dy="602" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="5" value="推流" style="edgeStyle=none;html=1;entryX=0.442;entryY=0.017;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="2" target="3">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="2" value="浏览器" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="90" y="120" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="服务器" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="180" y="300" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="6" value="推流" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="4" target="3">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="浏览器" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="120" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="9" value="拉流" style="edgeStyle=none;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="7" target="3">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" value="浏览器" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="85" y="470" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="10" value="拉流" style="edgeStyle=none;html=1;" edge="1" parent="1" source="8">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="240" y="360" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="8" value="浏览器" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="290" y="470" width="120" height="60" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>