录屏

src/app/views/login/login.component.html

@@ -46,6 +46,7 @@
       <strong>点击下载谷歌浏览器👉</strong>
       <a [href]="http.domain+'/chrome64/ChromeSetup32.exe'">win32</a>
       <a [href]="http.domain+'/chrome64/ChromeSetup64.exe'">win64</a>
+      <a href="javascript:;" (click)="showScreen($event)">录屏</a>
     </div>
   </div>
 </div>

src/app/views/login/login.component.ts

@@ -9,6 +9,8 @@ import { baseUrlType } from "src/app/type/types";
 import { ToolService } from 'src/app/services/tool.service';
 import { Title } from '@angular/platform-browser';
 import { MarkingService } from 'src/app/services/marking.service';
+
+declare var MediaRecorder: any;
 @Component({
   selector: "app-login",
   templateUrl: "./login.component.html",
@@ -301,4 +303,35 @@ export class LoginComponent implements OnInit {
     });
     return parents;
   }
+
+  // 录屏
+  isRecording:boolean = false;
+  async showScreen(e){
+    if(this.isRecording){
+      return;
+    }
+    this.isRecording = true;
+    e.preventDefault();
+    let stream = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
+    let mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm";
+
+    let mediaRecorder = new MediaRecorder(stream, { mimeType: mime });
+    let chunks = [];
+    //录制
+    mediaRecorder.addEventListener('dataavailable', function (e) {
+      chunks.push(e.data)
+    })
+    //停止
+    mediaRecorder.addEventListener('stop', function () {
+      let blob = new Blob(chunks, { type: chunks[0].type });
+      let url = URL.createObjectURL(blob);
+      let a = document.createElement('a');
+      a.href = url;
+      a.download = 'video.webm';
+      a.click();
+      this.isRecording = false;
+    })
+    //手动启动
+    mediaRecorder.start()
+  }
 }