Chrome 70使用getDisplayMedia()进行屏幕捕捉

Eede之后,Chrome是第二个通过navigator.getDisplayMedia()添加符合标准的屏幕捕捉的浏览器。

Chrome70的简介在八月宣布,并在十月discuss-webrtc Google group中确认下来。

这个特点目前设置在一个标示下,你需要更新到Chrome70,然后进入chrome://flags/开启网络试验平台。

之后仿照本文范例你就可以在Chrome扩展中记录你的屏幕。

在以前,在Chrome中的屏幕捕捉就是有可能的,但是你需要一个分离的扩展,它需要在Chrome网络商店中下载。在二月份,我们开发出一个扩展,使用了Pipe recorder.

Chrome70让我们一睹未来。

为了获取Chrome70中屏幕的媒体流,只需以下几行代码:

 

navigator.getDisplayMedia({ video: true })
  .then(stream => {
    console.log("Awesome");
  }, error => {
    console.log("Unable to acquire screen capture", error);
  });

 

你可以在开发控制台运行代码,需要选择你想要分享的部分。getDisplayMedia()不受任何媒体限制,在Chrome中用户可以选择分享整个屏幕,单独App还是Chrome窗口:

111

只要你获取了屏幕流,就可以在本地展示,或者在WebRTC点对点通信中与他人分享,或者使用媒体流记录器API记录下来。

以下是在网络页面中如何使用video标签展示捕捉的屏幕/App/Chrome:

 

navigator.getDisplayMedia({ video: true })
  .then(stream => {
    //we have a stream, attach it to a feedback video element
    videoElement.srcObject = stream;
  }, error => {
    console.log("Unable to acquire screen capture", error);
  });

 

Microsoft Edge是第一个支持标准屏幕捕捉的浏览器,时间是在2018年4月的win10和Edge更新中.

Firefox不久之后就会支持getDisplayMedia().它将会在Firefox64或65中被加入。

Safari也计划支持标准屏幕捕捉,如果你对Safari中的捕捉感兴趣,你可以留下评论,关注故障报告

GetDisplayMedia()最近在说明书中被改变,从navigator.getDisplayMedia()变成了navigator.MediaDevices.getDisplayMedia(),为了确保一致性,在Chrome的新产品发布后,使用更新后的navigator.MediaDevices.getDisplayMedia()。

原文标题:Screen Capture in Chrome 70 With getDisplayMedia()
链接:https://blog.bitsrc.io/build-a-webcam-communication-app-using-webrtc-9737384e84be

填写常用邮箱,接收社区更新

WebRTC 中文社区由

运营