gemercheung 2 anos atrás
pai
commit
1302467e86

+ 7 - 1
packages/core/README.md

@@ -36,11 +36,17 @@ videoRecorder.on('record', (data: Blob) => {
     //录屏后片断数据
     console.log('record', data);
 });
-videoRecorder.on('endRecord', () => {
+
+videoRecorder.on('endRecord', (data: Blob) => {
     //结束录屏event
 });
 
+
+
 #  <button type="button" @click="videoRecorder.startRecord">开始录屏</button>
 #  <button type="button" @click="videoRecorder.endRecord">停止录屏</button>
 
 ```
+
+## resolution
+4K | 2K |1080p

+ 1 - 1
packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simaq/core",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/index",
   "types": "dist/index",
   "files": [

+ 5 - 3
packages/core/src/lib/basicSimaqRecorder.ts

@@ -22,7 +22,7 @@ export interface PlatformConfigType {
 
 export interface InitConfigType extends DisplayMediaStreamConstraints {
     uploadUrl?: string;
-    resolution: ResolutionType;
+    resolution?: ResolutionType;
     autoDownload?: boolean;
     isElectron?: boolean;
     platform?: PlatformType;
@@ -295,6 +295,7 @@ export class BasicSimaqRecorder extends EventEmitter {
                 this.recordChunks = [];
                 resolve(blobs);
             } catch (error) {
+                this.emit('endRecord', null);
                 resolve([]);
             }
         });
@@ -321,7 +322,7 @@ export class BasicSimaqRecorder extends EventEmitter {
             this.stream = new MediaStream([videoTrack, audioTrack]);
         }
         const mediaRecorder = new MediaRecorder(this.stream, {
-            mimeType: 'video/webm;codecs=H264,opus',
+            mimeType: 'video/webm;codecs=vp9,opus',
             audioBitsPerSecond: videoConstraints.value.audioBitsPerSecond,
             videoBitsPerSecond: videoConstraints.value.videoBitsPerSecond,
         });
@@ -351,7 +352,8 @@ export class BasicSimaqRecorder extends EventEmitter {
         document.body.appendChild(a);
         a.style.display = 'none';
         a.href = url;
-        a.download = 'test.mp4';
+        const name = new Date().getTime();
+        a.download = `${name}.mp4`;
         a.click();
         window.URL.revokeObjectURL(url);
     }

+ 9 - 15
play/src/App.vue

@@ -10,14 +10,11 @@ import { onMounted } from 'vue';
 const videoRecorder = new VideoRecorder({
     // uploadUrl: '',
     resolution: '4k',
-    autoDownload: false,
-    platform: 'electron',
-    config: {
-        maxHeight: 1080,
-        minHeight: 1080,
-        maxWidth: 1920,
-        minWidth: 1920,
-    },
+    autoDownload: true,
+    platform: 'web',
+    // config: {
+    //     canvasId: '.goldplay__screen--canvas',
+    // },
     debug: false,
 });
 console.log('videoRecorder', videoRecorder);
@@ -57,13 +54,10 @@ onMounted(() => {
     ) as HTMLIFrameElement;
     console.log('testFrame', testFrame);
     testFrame.onload = () => {
-        // const canvas = testFrame.contentWindow?.document.getElementsByName(
-        //     'canvas',
-        // ) as unknown as HTMLCanvasElement;
-        console.log(
-            'testFrame-load',
-            window.frames['testFrame'].document.getElementsByName('canvas'),
-        );
+        const canvas = testFrame.contentWindow?.document.getElementsByName(
+            'canvas',
+        ) as unknown as HTMLCanvasElement;
+        console.log('testFrame-load', canvas);
     };
     // testFrame.addEventListener('load', () => {