如何在Angle 2+应用程序中记录桌面屏幕 [英] How to record desktop screen in angular 2+ application

查看:103
本文介绍了如何在Angle 2+应用程序中记录桌面屏幕的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要通过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 in Electron app as someone down voted me it might be possible that he/she tried to use this in Electron app. You have to use this solution in browser specific application but not in Electron right now.

这篇关于如何在Angle 2+应用程序中记录桌面屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆