Как записать экран с помощью RecordRTC в Angular 6
Я пытаюсь записать экран со следующим фрагментом кода
<canvas #canvas></canvas>
<video #video controls></video>
<div class="row">
<div class="col d-flex justify-content-between">
<button mat-raised-button color="primary" (click)="startRecording()">Record</button>
<button mat-raised-button color="warn" (click)="stopRecording()">Stop</button>
</div>
</div>
export class ScreenRecordComponent implements OnInit {
@ViewChild('canvas') canvasRef: ElementRef
@ViewChild('video') videoRef: ElementRef
constructor() {
}
canvas: HTMLCanvasElement
video: HTMLVideoElement
recorder: CanvasRecorder
ngOnInit() {
this.video = this.videoRef.nativeElement
this.canvas = this.canvasRef.nativeElement
this.canvas.width = 640
this.canvas.height = 460
}
startRecording() {
let CanvasRecorder = RecordRTC.CanvasRecorder
this.recorder = new CanvasRecorder(this.canvas, { disableLogs: true });
this.recorder.record()
}
stopRecording() {
this.recorder.stop((blob: Blob) => {
console.log(blob)
console.log(URL.createObjectURL(blob))
this.video.src = URL.createObjectURL(blob)
});
}
}
Когда я ударил start
кнопку, а затем через мгновение stop
в консоль пришли следующие результаты
h ttps://stackru.com/images/6d408cd0fd7cca82f689209e5f60687c39114062.png
Пожалуйста, руководство, где я делаю ошибку?
1 ответ
Это служба записи экрана, из вашего компонента вы можете использовать предоставленные методы, вы можете использовать только startRecording, stopRecording и в вашем компоненте getRecordedBlog для подписки или .then для ответа blob
import * as RecordRTC from 'recordrtc';
import * as moment from 'moment';
import { Observable, Subject } from 'rxjs';
import { isNullOrUndefined } from 'util';
interface RecordedVideoOutput {
blob: Blob;
url: string;
title: string;
}
@Injectable({ providedIn: 'root' })
export class ScreenRecordingService {
private stream: any;
private recorder: any;
private interval: any;
private startTime: any;
private _stream = new Subject<MediaStream>();
private _recorded = new Subject<RecordedVideoOutput>();
private _recordedUrl = new Subject<string>();
private _recordingTime = new Subject<string>();
private _recordingFailed = new Subject<string>();
getRecordedUrl(): Observable<string> {
return this._recordedUrl.asObservable();
}
getRecordedBlob(): Observable<RecordedVideoOutput> {
return this._recorded.asObservable();
}
getRecordedTime(): Observable<string> {
return this._recordingTime.asObservable();
}
recordingFailed(): Observable<string> {
return this._recordingFailed.asObservable();
}
getStream(): Observable<MediaStream> {
return this._stream.asObservable();
}
startRecording() {
var browser = <any>navigator;
if (this.recorder) {
// It means recording is already started or it is already recording something
return;
}
this._recordingTime.next('00:00');
return new Promise((resolve, reject) => {
browser.mediaDevices
.getDisplayMedia({
video: {
displaySurface: 'monitor', // monitor, window, application, browser
logicalSurface: true,
cursor: 'always', // never, always, motion
},
})
.then((screenStream: any) => {
navigator.mediaDevices.getUserMedia({ audio: true }).then((mic) => {
screenStream.addTrack(mic.getTracks()[0]);
this.stream = screenStream;
this.record();
resolve(this.stream);
});
})
.catch((error: any) => {
this._recordingFailed.next();
reject;
});
});
}
abortRecording() {
this.stopMedia();
}
private record() {
this.recorder = new RecordRTC(this.stream, {
type: 'video',
mimeType: 'video/webm',
bitsPerSecond: 44000,
});
this.recorder.startRecording();
this.startTime = moment();
this.interval = setInterval(() => {
const currentTime = moment();
const diffTime = moment.duration(currentTime.diff(this.startTime));
const time =
this.toString(diffTime.minutes()) +
':' +
this.toString(diffTime.seconds());
this._recordingTime.next(time);
this._stream.next(this.stream);
}, 500);
}
private toString(value: any) {
let val = value;
if (!value) {
val = '00';
}
if (value < 10) {
val = '0' + value;
}
return val;
}
stopRecording() {
if (this.recorder) {
this.recorder.stopRecording(this.processVideo.bind(this));
//this.processVideo.bind(this.recorder)
//this.processVideo(this.recorder);
//this.stopMedia();
}
}
private processVideo(audioVideoWebMURL: any) {
// console.log(audioVideoWebMURL);
const recordedBlob = this.recorder.getBlob();
this.recorder.getDataURL(function (dataURL: any) {});
const recordedName = encodeURIComponent(
'video_' + new Date().getTime() + '.webm'
);
this._recorded.next({
blob: recordedBlob,
url: audioVideoWebMURL,
title: recordedName,
});
this.stopMedia();
//this.recorder.save(recordedName);
}
private stopMedia() {
if (this.recorder) {
this.recorder = null;
clearInterval(this.interval);
this.startTime = null;
if (this.stream) {
this.stream.getAudioTracks().forEach((track: any) => track.stop());
this.stream.getVideoTracks().forEach((track: any) => track.stop());
this.stream.stop();
this.stream = null;
}
}
}
}