如何在Angle 2+应用程序中记录桌面屏幕 [英] How to record desktop screen in angular 2+ application
问题描述
我需要通过Angular 6
共享桌面屏幕.我已经搜索了合适的程序包来实现此功能,但找不到它.
I need to share desktop screen via Angular 6
. I have searched for suitable package to implement this feature but couldn't found it.
实际上,我发现了许多软件包,例如 RecordRTC , screen-capture-recorder 等.其中一些不兼容,一些文件记录不清,并且无法使用代码智能.
Actually I found many packages like RecordRTC, Aperture, screen-capture-recorder and some others. Some of them were incompatible, some were poorly documented and non-availability of code-intellisense.
请告诉我我可以与Angular 6
一起使用的最兼容和文档最完整的软件包.我正在使用的平台是Windows
Please tell me the most compatible and well documented package that I can use with Angular 6
. Platform I am working on is Windows
推荐答案
最后找到一些可行的解决方案...
Finally find some working solution...
@Component({
selector: 'app-screen',
template: `<video #video autoplay style="width:360px;"></video>`
})
export class ScreenComponent implements OnInit {
constructor() { }
ngOnInit() {
this.startRecording()
}
async startRecording() {
let stream = await navigator.getDisplayMedia({ video: true })
console.log(stream)
this.videoElement.srcObject = stream
}
@ViewChild('video') videoElementRef: ElementRef
get videoElement(): HTMLVideoElement {
return this.videoElementRef.nativeElement
}
}
由于此功能处于实验阶段,因此启用Experimental Web Platform features
标志以记录用户屏幕.要启用,请按照下面的图片
As this feature is in experimental phase, so enable Experimental Web Platform features
flag to record the user screen. To enable, follow this below image
注意:已在
chrome v71.x.x
上进行了测试,请确保您的浏览器是最新的. 另请注意,这在Electron
应用程序中将不起作用,因为有人对我投了反对票,他/她可能尝试在Electron
应用程序中使用此功能. 您必须在特定于浏览器的应用程序中使用此解决方案,但现在不在Electron
中使用.
Note: It is tested on
chrome v71.x.x
, make sure your browser is up to date. Also note that, this will not work inElectron
app as someone down voted me it might be possible that he/she tried to use this inElectron
app. You have to use this solution in browser specific application but not inElectron
right now.
这篇关于如何在Angle 2+应用程序中记录桌面屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!