Я использую этот пакет NPM с Angular 8 [https://www.npmjs.com/package/webrtc-adapter] для репликации функциональности WebRT C getDisplayMedia здесь [https://webrtc.github.io/samples/src/content/getusermedia/getdisplaymedia/]
Я понял, как запустить и остановить запись (захват экрана в реальном времени), но я не могу найти и найти документацию о том, как загрузить реальную запись. Пожалуйста, смотрите код ниже, спасибо.
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import adapter from "webrtc-adapter";
@Component({
selector: 'tgh-web-rtc-screen-api',
template: `
<div class="row">
<div class="col-md-12">
<button (click)="startRecording()"> Record </button>
<button (click)="stopRecording()"> Stop </button>
<button (click)="resumeRecording()"> Resume </button>
<button (click)="downloadRecording()"> Download</button>
</div>
<div class="col-md-12">
<video #video class="video"></video>
</div>
</div>
`
})
// Must implement AfterviewInit to work properly for video recording
export class WebRtcScreenApiComponent implements OnInit , AfterViewInit {
// The HTML reference to the video element (<video></video> tag)
@ViewChild("video") video: ElementRef;
_navigator = <any> navigator;
_localStreamReference: any;
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
// set the initial state of the video
let video:HTMLVideoElement = this.video.nativeElement;
video.muted = false;
video.controls = true;
video.autoplay = false;
}
// Starts the recording and calls the on success methiod if passed
startRecording() {
// For Firefox, it requires you specify whether to present the option to share a screen or window to the user
if (adapter.browserDetails.browser == 'firefox') {
adapter.browserShim.shimGetDisplayMedia(window, 'screen');
}
// Modern way TODO: Figure out why the stream is needed
this._navigator.mediaDevices.getDisplayMedia({video: true}).then(stream => {
this.onSucces(stream);
})
.catch(e => {
this.onError(e);
});
}
//Starts the screen recording
onSucces(stream: MediaStream): void {
this._localStreamReference = stream;
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
}
// Stops the screen recording
stopRecording(): void {
const tracks = this._localStreamReference.getTracks();
tracks.forEach((track) => {
track.stop();
});
}
// Resumes recording
resumeRecording(): void {
const tracks = this._localStreamReference.getTracks();
tracks.forEach((track) => {
track.play();
});
}
// Downloads rercording in browser
downloadRecording() {
// ?
}
// on WebRTC error
onError(error: Error):void {
console.log('Error message: ' + error.message);
console.log('Error name: ' + error.name);
}
}