使用WebRTC进行屏幕共享？

Question

使用WebRTC进行屏幕共享？

webrtcscreensharing

31

我们正在探索WebRTC，但看到了有关今天可能性和支持的冲突信息。

使用WebRTC，是否可以重新创建类似于join.me或WebEx的屏幕共享服务，其中：

您可以分享屏幕的一部分
您可以授予对方控制权
不需要下载任何内容

在任何WebRTC浏览器上今天是否可行？Chrome在iOS上呢？

- Crashalot

1

这里有一个演示：WebRTC屏幕共享：https://webrtc-experiment.appspot.com/screen-broadcast/ - 同时进行广播！ - Muaz Khan

1

屏幕部分、屏幕一部分或屏幕区域共享是可能的——请查看演示——https://webrtc-experiment.appspot.com/#part-of-screen-sharing——尝试自己！——https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing#how-to-use-in-your-own-site——虽然使用html2canvas库来拍摄html元素的快照并使用socket.io或WebRTC数据通道进行传输。 - Muaz Khan

屏幕共享演示 - Abhi

6个回答

8

您可能已经了解到在Chrome Canary（26+）中提供了屏幕截图（而非标签截图）功能。我们最近在以下网址上发布了演示：https://screensharing.azurewebsites.net

请注意，您需要在https://下运行它。

video: {
  mandatory: {
    chromeMediaSource: 'screen'   
  }

你可以在这里找到一个例子： https://html5-demos.appspot.com/static/getusermedia/screenshare.html

- dathor

嗨dathor，只是提醒一下，azurewebsites上的演示可以捕捉屏幕，但无法传输到另一个端点。它只显示主页。然而，官方的HTML5演示非常好。为此点赞！ - jamesmortensen

你好，是的，有一个新的演示可以在http://joinaspot.com找到，确保在https://上下文中运行。 - dathor

我非常疲倦，可能错过了，但我没有看到屏幕共享功能？不过演示很酷。让我想起了https://bistri.com/。 - jamesmortensen

是的，当您运行https://时，它会给您提供该选项... 您还可以下载我们的免费开源库并自行构建。请查看https://github.com/XSockets/WebRTC - dathor

仅供参考：大多数有趣的链接都已经失效了。 https://html5-demos.appspot.com/static/getusermedia/screenshare.html 上再也没有服务器了，即使我尝试使用 about:flags（选项已丢失）和 --enable-usermedia-screen-capture（不起作用），也无法在 Chrome 45 中让它工作。http://joinaspot.com/ 是一个域名商店。https://github.com/XSockets/WebRTC 返回404。 - Peter V. Mørch

1

我在Chrome 55上尝试了这个操作，但是失败了，并显示了以下信息：PERMISSION_DENIED。您是否没有启用SSL？您是否已启用--enable-usermedia-screen-capture标志？我猜测在Chrome上不允许这样的操作（早期版本34+是可以的），但是谷歌已经从Chrome中删除了该权限。 - Bilbo Baggins

7

我知道我回答有点晚了，但希望它能帮助那些遇到问题的人，如果不是原帖。

目前，Firefox和Chrome都支持通过WebRTC作为媒体流共享整个屏幕或其中一部分（您可以选择的某些应用程序窗口），就像摄像头/麦克风提供的内容一样，因此还没有让其他方控制您的桌面的选项。除此之外，还有一个问题，您的网站必须在https模式下运行，并且在firefox和chrome中，用户需要安装扩展程序。

您可以在Muaz Khan的屏幕共享演示中尝试，该页面也包含所需的扩展程序。

附：如果您不想安装扩展程序来运行演示，在firefox中（在chrome中无法逃脱扩展程序），您只需要修改两个标志：

转到about:config
将media.getusermedia.screensharing.enabled设置为true。
将*.webrtc-experiment.com添加到media.getusermedia.screensharing.allowed_domains标志中。
刷新演示页面并单击共享屏幕按钮。

- mido

1

这个屏幕共享演示不再起作用了，因为chrome浏览器中的屏幕共享选项已经不存在了。 - Bilbo Baggins

现在不需要在Firefox中操纵about:config了。屏幕共享在当前版本的Firefox中默认就可以使用。 - CpnCrunch

6

据我所知，目前任何浏览器都无法实现屏幕共享，但谷歌Chrome团队表示他们最终打算支持这种情况（请参见其路线图上的“屏幕共享”条目）; 我猜想这意味着最终其他浏览器也会跟进，IE和Safari可能是最后一个。但所有这些可能要到2月份之后才能实现，那时他们应该会完成当前的WebRTC标准并发布生产版本。(希望微软的最后一分钟不会把这搞砸。) 我可能错过了最近的一些事情，但我一直在密切关注这个项目，我认为屏幕共享甚至还没有进入Chrome Canary，更别说dev / beta / prod了。Opera是唯一一款在WebRTC实现方面与Chrome齐头并进的浏览器(Firefox似乎落后了约六个月)，我也没有看到该团队有关屏幕共享的任何消息。

我被告知目前有一种方法可以做到这一点，那就是编写自己的网络摄像头驱动程序，使本地屏幕出现在WebRTC getUserMedia() API中，作为另一个视频源。我不知道是否有人已经这样做了 - 当然，这需要在相关机器上安装该驱动程序。最终，使用VNC或类似工具可能会更容易些。

- Ken Smith

0

这是可能的，我已经在此方面进行了工作并构建了一个屏幕共享演示。在此期间，观看者可以访问您的鼠标和键盘。如果他移动了他的鼠标，那么您的鼠标也会移动，如果他从键盘上输入，则会输入到您的电脑中。

查看此代码，此代码用于屏幕共享...

现在，在这些日子里，您可以使用此功能共享屏幕，无需任何扩展程序。

    const getLocalScreenCaptureStream = async () => {
  try {
    const constraints = { video: { cursor: 'always' }, audio: false };
    const screenCaptureStream = await navigator.mediaDevices.getDisplayMedia(constraints);

    return screenCaptureStream;
  } catch (error) {
    console.error('failed to get local screen', error);
  }
};

- Naju Bhadarka

0

navigator.mediaDevices.getDisplayMedia(constraint).then((stream)=>{
// todo...
})

现在你可以这样做，但Safari在音频方面与Chrome不同。

- GiantKs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sam Dutton · Accepted Answer

chrome.tabCapture API可供Chrome应用程序和扩展使用。

这使得捕获选项卡的可见区域成为流成为可能，该流可以在本地使用或通过RTCPeerConnection的addStream()共享。

有关更多信息，请参见WebRTC Tab Content Capture proposal。

最初支持使用带有chromeMediaSource约束条件的getUserMedia来共享“普通”网页的屏幕共享，但现已被禁止。

编辑于2015年4月1日：现在只有Chrome应用程序和扩展程序中支持屏幕共享。