Screenastはスプリングブーツをアングルにする

この記事では、アングルからスプリングブートサーバーへのスクリーンフィードの流れ方を調べ、ビデオファイルとして保存します.私は最近、この方法を私のプロジェクトの一つに使いました.これはmultipartシリーズの第1部です.私は初心者プログラマですので、まだ改善の余地があります.
始めましょう.

スクリーンキャプチャのための角度フロントエンドの設定
画面をキャプチャし、キャプチャしたビデオをダウンロードするの基本的な機能を持つことから始めましょう.これは単純な角度プロジェクト、画面のキャプチャという名前を付け、以下のコマンドを実行して、プロジェクトを所望のフォルダーに作成します.

ng new Screen-Capture

今すぐあなたの信頼できるエディタで開き、フォルダを開きますapp.component.ts カメラストリームをキャプチャするコードを追加します.

const mediaDevices = navigator.mediaDevices as any;
declare var MediaRecorder: any;

これらの行はブラウザをインポートするmediaDevice api とaを作るmediarecorder グローバル変数.
追加しましょうstartRecording 機能

1   async startRecording() {
2     var options;
3 
4     if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
5       options = {
6         videoBitsPerSecond: 2500000,
7         mimeType: 'video/webm; codecs=vp9',
8       };
9     } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
10       options = {
11         videoBitsPerSecond: 2500000,
12         mimeType: 'video/webm; codecs=vp8',
13       };
14     } else {
15       options = { videoBitsPerSecond: 2500000, mimeType: 'video/webm' };
16     }
17 
18     try {
19       this.stream = await mediaDevices.getDisplayMedia({
20         screen: {
21           width: { min: 1024, ideal: 1280, max: 1920 },
22           height: { min: 576, ideal: 720, max: 1080 },
23           frameRate: { min: 10, ideal: 20, max: 25 },
24         },
25       });
26     } catch (err) {
27       alert('No devices found for recording.');
28     }
29     this.recorder = new MediaRecorder(this.stream, options);
30     let metadata: any;
31 
32     this.frameCount = 0;
33 
34     this.recorder.ondataavailable = (e: { data: any }) => {
35       this.blobarr.push(e.data);
36       this.frameCount += 1;
37     };
38 
39     this.recorder.addEventListener('stop', () => {
40       this.stream.getTracks().forEach(function (track: any) {
41         track.stop();
42       });
43       this.isRecording = false;
44     });
45 
46     this.recorder.start(500);
47   }

今、この機能は、これが我々のアプリケーションのすべての重い持ち上げとして最も重要です.関数の中で、行番号MediaRecorder 最高のコーデックについては、ビデオをエンコードするために使用される行われます.vp9 それは新しいハードウェア上で高速なパフォーマンスを持っているので、ほとんどの好みが与えられますwebm . ビットレートを制限するのに良い練習もあります.
19 - 24ライン

19       this.stream = await mediaDevices.getDisplayMedia({
20         screen: {
21           width: { min: 1024, ideal: 1280, max: 1920 },
22           height: { min: 576, ideal: 720, max: 1080 },
23           frameRate: { min: 10, ideal: 20, max: 25 },
24         }, 

ライン19 - 24は、スクリーンのストリームハンドルを得るフレームレートの設定もこれらの行に設定されます.これらは予期しないエラーを処理するtryとcatchブロックで囲まれます.
線29 - 37

29     this.recorder = new MediaRecorder(this.stream, options);
30     let metadata: any;
31 
32     this.frameCount = 0;
33 
34     this.recorder.ondataavailable = (e: { data: any }) => {
35       this.blobarr.push(e.data);
36       this.frameCount += 1;
37     };

ライン29で、レコーダオブジェクトは、つくられるMediaRecorder 関数は、以前に得たオプションとストリームハンドルを使用します.このレコーダーオブジェクトにondataavailable イベントは、ライン34 - 37で有線です.これはRecorderオブジェクトによって発行されたデータの塊を受け取り、それを配列としてblobarr . エーframecount 変数は、放出された塊の数をカウントするために維持されます.
線39 - 46

39     this.recorder.addEventListener('stop', () => {
40       this.stream.getTracks().forEach(function (track: any) {
41         track.stop();
42       });
43       this.isRecording = false;
44     });
45 
46     this.recorder.start(500);

39行目でstop イベントが録音を停止するために配線され、このイベントは、ユーザーがレコーダーオブジェクトの停止機能を呼び出したときに解雇されます.この場合、stop イベントは、すべてのトラックのストリームを停止し、変数をトグルすると呼ばれますisRecording 嘘をつく.プログラムが現在スクリーンを記録しているならば、この変数は説明します.ライン46でstart レコーダーオブジェクトに対する関数は、500を通過して起動されます.この500は、ミリ秒の間隔であるondataavailable イベントが呼び出されます.より大きな数が長い時間間隔を示すことに注意してください.
関数追加recordStart 呼ぶstartRecording 関数.この関数はblobarr を0にして、true 状態.

1  recordStart() {
2     this.isRecording = true;
3     this.blobarr.length = 0;
4     this.startRecording();
5   }

追加recordStop 停止関数を呼び出す関数recorder オブジェクト.この関数はstop 前に記述したレコードの機能.

1  recordStop() {
2     if (this.recorder) {
3       this.recorder.stop();
4       
5     }
6   }

今すぐあなたapp.component.ts のようになります.

1 import {
2   Component,
3   ElementRef,
4   OnDestroy,
5   OnInit,
6   ViewChild,
7 } from '@angular/core';
8 
9 const mediaDevices = navigator.mediaDevices as any;
10 declare var MediaRecorder: any;
11 
12 @Component({
13   selector: 'app-root',
14   templateUrl: './app.component.html',
15   styleUrls: ['./app.component.scss'],
16 })
17 export class AppComponent implements OnDestroy {
18   recorder: any;
19   stream: any;
20   frameCount: number = 0;
21   blobarr: any[] = [];
22   finalBlob: Blob | null = null;
23   isRecording: boolean = false;
24 
25   ngOnDestroy(): void {
26     this.blobarr.length = 0;
27     this.recordStop();
28   }
29 
30   async startRecording() {
31     var options;
32 
33     if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
34       options = {
35         videoBitsPerSecond: 2500000,
36         mimeType: 'video/webm; codecs=vp9',
37       };
38     } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
39       options = {
40         videoBitsPerSecond: 2500000,
41         mimeType: 'video/webm; codecs=vp8',
42       };
43     } else {
44       options = { videoBitsPerSecond: 2500000, mimeType: 'video/webm' };
45     }
46 
47     try {
48       this.stream = await mediaDevices.getDisplayMedia({
49         screen: {
50           width: { min: 1024, ideal: 1280, max: 1920 },
51           height: { min: 576, ideal: 720, max: 1080 },
52           frameRate: { min: 10, ideal: 20, max: 25 },
53         },
54       });
55     } catch (err) {
56       alert('No devices found for recording.');
57     }
58     this.recorder = new MediaRecorder(this.stream, options);
59     let metadata: any;
60 
61     this.frameCount = 0;
62 
63     this.recorder.ondataavailable = (e: { data: any }) => {
64       this.blobarr.push(e.data);
65       this.frameCount += 1;
66     };
67 
68     this.recorder.onstop = (e: any) => {
69       this.isRecording = false;
70     };
71     this.recorder.start(500);
72   }
73 
74   downloadBlob() {
75     let downloadLink = document.createElement('a');
76     downloadLink.href = window.URL.createObjectURL(
77       new Blob(this.blobarr, { type: this.blobarr[0].type })
78     );
79     downloadLink.setAttribute('download', 'download.webm');
80     document.body.appendChild(downloadLink);
81     downloadLink.click();
82 
83     setTimeout(() => {
84       window.URL.revokeObjectURL(downloadLink.href);
85       document.body.removeChild(downloadLink);
86     }, 0);
87   }
88 
89   recordStop() {
90     if (this.recorder) {
91       this.recorder.stop();
92       this.stream.getTracks().forEach(function (track: any) {
93         track.stop();
94       });
95     }
96   }
97 
98   recordStart() {
99     this.isRecording = true;
100     this.blobarr.length = 0;
101     this.startRecording();
102   }
103 }
104 

今すぐ行くapp.component.html そして、録画を開始して、ビデオをダウンロードするために、ボタンを加えるために、以下のコードを加えてください.

1 <div *ngIf="!isRecording">
2   <button (click)="recordStart()">Start Recording</button>
3 </div>
4 <div *ngIf="isRecording">
5   <button (click)="recordStop()">Stop Recording</button>
6 </div>
7 
8 
9 <button (click)="downloadBlob()">Download</button>
10 

今すぐアプリケーションをサーブng serve -o . 録音を開始することができますし、それを停止し、記録された画面のキャストをダウンロードします.
プロジェクトのリンクはこちらgithub それは支店にあるpart1次の部分では、ビデオのチャンクを受け取るスプリングブートバックエンドを作成します.調子を合わせなさい.
ありがとう.