1.0.6 - 增加 音频

packages/core/README.md

@@ -1,9 +1,10 @@
 # @Simaq/core
+
 录屏核心 SDK
 
-## npm 私服地址  
-[http://192.168.0.47:4873/-/web/detail/@simaq/core](http://192.168.0.47:4873/-/web/detail/@simaq/core).
+## npm 私服地址
 
+[http://192.168.0.47:4873/-/web/detail/@simaq/core](http://192.168.0.47:4873/-/web/detail/@simaq/core).
 
 ## Installation
 
@@ -22,10 +23,10 @@ const videoRecorder = new VideoRecorder({
     autoDownload: true,
     debug: true, // 是否调试，
 });
-// 开始录屏
-const handlerStartRecord = videoRecorder.startRecord;
-// 停止录屏
-const handlerEndRecord = videoRecorder.endRecord;
+//  开始录屏方法
+ videoRecorder.startRecord();
+// 停止录屏方法
+ videoRecorder.endRecord();
 
 
 videoRecorder.on('startRecord', () => {

packages/core/package.json

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

packages/core/src/lib/basicSimaqRecorder.ts

@@ -18,6 +18,7 @@ export class BasicSimaqRecorder extends EventEmitter {
     };
     private isStartRecoding = false;
     private stream: MediaStream;
+    private audioInput: MediaStream;
     private mediaRecorder: MediaRecorder;
     // public record = new BehaviorSubject<Blob>(null);
     private recordChunks: Blob[] = [];
@@ -40,9 +41,9 @@ export class BasicSimaqRecorder extends EventEmitter {
                 return;
             }
             this.isStartRecoding = true;
-            this.emit('startRecord');
             const media = await this.getDisplayMedia();
             if (media) {
+                this.emit('startRecord');
                 // console.log('media', media);
                 const video: HTMLVideoElement = getVideo();
                 if (video) {
@@ -63,6 +64,11 @@ export class BasicSimaqRecorder extends EventEmitter {
     private getDisplayMedia(): Promise<MediaStream | null> {
         return new Promise(async (resolve) => {
             try {
+                const audioInput = await this.getDeaultAudio();
+                if (audioInput) {
+                    this.audioInput = audioInput;
+                }
+                console.log('audioInput', audioInput);
                 if (navigator.mediaDevices.getDisplayMedia) {
                     const res = await navigator.mediaDevices.getDisplayMedia(
                         this.displayMediaStreamConstraints,
@@ -76,12 +82,28 @@ export class BasicSimaqRecorder extends EventEmitter {
         });
     }
 
+    private async getDeaultAudio(): Promise<MediaStream> {
+        return new Promise(async (resolve) => {
+            try {
+                if (navigator.mediaDevices.getUserMedia) {
+                    const res = await navigator.mediaDevices.getUserMedia({
+                        audio: true,
+                        video: false,
+                    });
+                    return resolve(res);
+                }
+                return resolve(null);
+            } catch (error) {
+                return resolve(null);
+            }
+        });
+    }
+
     public endRecord(): void {
         this.isStartRecoding = false;
         this.streamStop();
         this.emit('endRecord');
     }
-
     private streamStop(): void {
         if (this.stream) {
             this.stream.getTracks().forEach((track) => track.stop());
@@ -89,11 +111,17 @@ export class BasicSimaqRecorder extends EventEmitter {
         if (this.mediaRecorder) {
             this.mediaRecorder.stop();
         }
-
     }
 
     private createMediaRecoder(): void {
         console.log('video-flag', videoConstraints.value);
+        // let mergeSteam: MediaStream;
+        let audioTrack: MediaStreamTrack, videoTrack: MediaStreamTrack;
+        if (this.audioInput) {
+            [videoTrack] = this.stream.getVideoTracks();
+            [audioTrack] = this.audioInput.getAudioTracks();
+            this.stream = new MediaStream([videoTrack, audioTrack]);
+        }
         const mediaRecorder = new MediaRecorder(this.stream, {
             mimeType: 'video/webm;codecs=H264,opus',
             audioBitsPerSecond: videoConstraints.value.audioBitsPerSecond,
@@ -103,11 +131,6 @@ export class BasicSimaqRecorder extends EventEmitter {
         this.mediaRecorder.ondataavailable = (event) => {
             // console.log('ondataavailable', event.data);
             this.recordChunks.push(event.data);
-            // this.record.next(
-            //     new Blob([event.data], {
-            //         type: 'video/mp4; codecs=h264',
-            //     }),
-            // );
             this.emit(
                 'record',
                 new Blob([event.data], {

play/src/App.vue

@@ -28,6 +28,7 @@ videoRecorder.on('endRecord', () => {
 
 <template>
     <div>
+
     </div>
     <button type="button" @click="videoRecorder.startRecord">开始录屏</button>
     <button type="button" @click="videoRecorder.endRecord">停止录屏</button>