1.0.4

packages/core/README.md

@@ -27,6 +27,18 @@ const handlerStartRecord = videoRecorder.startRecord;
 // 停止录屏
 const handlerEndRecord = videoRecorder.endRecord;
 
+
+videoRecorder.on('startRecord', () => {
+    //开始录屏event
+});
+videoRecorder.on('record', (data: Blob) => {
+    //录屏后片断数据
+    console.log('record', data);
+});
+videoRecorder.on('endRecord', () => {
+    //结束录屏event
+});
+
 #  <button type="button" @click="videoRecorder.startRecord">开始录屏</button>
 #  <button type="button" @click="videoRecorder.endRecord">停止录屏</button>
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simaq/core",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index",
   "types": "dist/index",
   "files": [
@@ -18,6 +18,7 @@
     "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
+    "eventemitter3": "^4.0.7",
     "rxjs": "~7.5.5"
   },
   "devDependencies": {

packages/core/src/lib/basicSimaqRecorder.ts

@@ -2,8 +2,8 @@ import { audioConstraints } from './audioConstraints';
 import { videoConstraints } from './videoConstraints';
 import { isSupport } from './isSupport';
 import { getVideo } from './videoElement';
-import { BehaviorSubject } from 'rxjs';
-
+// import { BehaviorSubject } from 'rxjs';
+import { EventEmitter } from 'eventemitter3';
 export type ResolutionType = '1080p' | '2k' | '4k';
 export interface InitConfigType extends DisplayMediaStreamConstraints {
     uploadUrl: '';
@@ -11,7 +11,7 @@ export interface InitConfigType extends DisplayMediaStreamConstraints {
     autoDownload?: boolean;
     debug?: boolean;
 }
-export class BasicSimaqRecorder {
+export class BasicSimaqRecorder extends EventEmitter {
     displayMediaStreamConstraints: DisplayMediaStreamConstraints = {
         video: videoConstraints.getValue(),
         audio: audioConstraints.getValue(),
@@ -19,11 +19,12 @@ export class BasicSimaqRecorder {
     private isStartRecoding = false;
     private stream: MediaStream;
     private mediaRecorder: MediaRecorder;
-    public record = new BehaviorSubject<Blob>(null);
+    // public record = new BehaviorSubject<Blob>(null);
     private recordChunks: Blob[] = [];
     private autoDownload = false;
 
     constructor(arg: InitConfigType) {
+        super();
         console.log('arg', arg);
         this.autoDownload = arg.autoDownload;
         videoConstraints.subscribe((value) => {
@@ -39,6 +40,7 @@ export class BasicSimaqRecorder {
                 return;
             }
             this.isStartRecoding = true;
+            this.emit('startRecord');
             const media = await this.getDisplayMedia();
             if (media) {
                 // console.log('media', media);
@@ -78,6 +80,7 @@ export class BasicSimaqRecorder {
     public endRecord(): void {
         this.isStartRecoding = false;
         this.streamStop();
+        this.emit('endRecord');
     }
 
     private streamStop(): void {
@@ -87,6 +90,7 @@ export class BasicSimaqRecorder {
         if (this.mediaRecorder) {
             this.mediaRecorder.stop();
         }
+
     }
 
     private createMediaRecoder(): void {
@@ -100,7 +104,13 @@ export class BasicSimaqRecorder {
         this.mediaRecorder.ondataavailable = (event) => {
             // console.log('ondataavailable', event.data);
             this.recordChunks.push(event.data);
-            this.record.next(
+            // this.record.next(
+            //     new Blob([event.data], {
+            //         type: 'video/mp4; codecs=h264',
+            //     }),
+            // );
+            this.emit(
+                'record',
                 new Blob([event.data], {
                     type: 'video/mp4; codecs=h264',
                 }),
@@ -110,7 +120,7 @@ export class BasicSimaqRecorder {
             setTimeout(() => {
                 this.handleAutoDownload();
                 this.recordChunks = [];
-                this.record.next(null);
+                // this.record.next(null);
             }, 1000);
         };
     }

play/src/App.vue

@@ -13,10 +13,15 @@ const videoRecorder = new VideoRecorder({
     debug: true,
 });
 console.log('videoRecorder', videoRecorder);
-videoRecorder.record.subscribe((data) => {
-    if (data) {
-        console.log('前端收到', data);
-    }
+videoRecorder.on('startRecord', () => {
+    //开始录屏event
+});
+videoRecorder.on('record', (data: Blob) => {
+    //录屏后片断数据
+    console.log('record', data);
+});
+videoRecorder.on('endRecord', () => {
+    //结束录屏event
 });
 // window.videoRecorder = videoRecorder;
 </script>

pnpm-lock.yaml

@@ -28,10 +28,12 @@ importers:
 
   packages/core:
     specifiers:
+      eventemitter3: ^4.0.7
       rimraf: ~3.0.2
       rxjs: ~7.5.5
       typescript: ~4.7.0
     dependencies:
+      eventemitter3: 4.0.7
       rxjs: 7.5.5
     devDependencies:
       rimraf: 3.0.2
@@ -1585,6 +1587,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /eventemitter3/4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    dev: false
+
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true