65.9K
CodeProject 正在变化。 阅读更多。
Home

WebRTCScreenSharing 应用程序

Intel 平台上的 Android
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2015 年 4 月 6 日

CPOL

4分钟阅读

viewsIcon

21219

本文介绍在 Chrome 浏览器中运行的屏幕共享示例应用程序。

Intel® Developer Zone 提供跨平台应用程序开发工具和操作指南、平台和技术信息、代码示例以及同行专业知识，以帮助开发人员进行创新并取得成功。加入我们的 Android、物联网、Intel® RealSense™ 技术 和 Windows 社区，下载工具、访问开发套件、与志同道合的开发人员分享想法，并参加黑客松、竞赛、路演和本地活动。

引言

WebRTC 是一个免费的开源项目，它通过简单的 JavaScript* API 使网络浏览器具备实时通信 (RTC) 功能。WebRTC 组件已得到优化，以最好地服务于此目的。WebRTC 现在已实现了实时、无插件的视频、音频和数据通信的开放标准，目前仅在 Google Chrome*、Mozilla Firefox* 和 Opera* 浏览器中得到支持。目前，Firefox 和 Opera 不支持屏幕捕获。

本文介绍在 Chrome 浏览器中运行的屏幕共享示例应用程序。此应用程序演示了如何使用 Chrome 扩展程序访问 Web 应用程序中的 desktopCapture API 来进行屏幕共享。WebRTCScreenSharing 应用程序由 HTML 和 JavaScript 组成。HTML 代码处理用户输入并执行必要步骤来格式化网页的所有视觉方面。应用程序的 JavaScript 部分包含页面的变量和运行时逻辑。JavaScript 代码创建与信令服务器的连接并调用 WebRTC 函数。

屏幕共享示例应用程序结构

WebRTCScreenSharing 应用程序使用屏幕共享扩展程序，该扩展程序包含 background.js、content-script.js 和 manifest.json。扩展程序的主要逻辑包含在 background.js 中。在 Chrome 浏览器中，共享的屏幕只能作为视频流查看。WebRTC 将屏幕共享作为媒体流传输。应用程序可以通过 manifest.json 中的权限访问 desktopCapture API。

"permissions": ["desktopCapture","<all_urls>"]

后台页面与其运行的扩展程序环境隔离，无法直接访问应用程序。扩展程序通过 content-script.js 与网页进行交互。内容脚本是在浏览器加载的页面上下文中执行的 JavaScript 代码。内容脚本无法访问页面上定义的变量或函数，但可以访问 DOM。消息通过以下链传递。

当点击“共享屏幕”时，window.postMessage({ type: 'Start_Sharing', text: 'start' }, '*'); 将一条消息发布到屏幕。

window.addEventListener('message', function(event) {
 if (event.data.type && ((event.data.type === 'Start_Sharing’))) {
 port.postMessage(event.data);
 }
}, false);

content-script 通过将 port 变量设置为以下值来与后台页面通信：

var port = chrome.runtime.connect(chrome.runtime.id);

后台页面正在监听该端口。

port.onMessage.addListener(function (msg) {
 if(msg.type === 'Start_Sharing') {
 requestScreenSharing(port, msg);
 }
 if(msg.type === 'Stop_Sharing') {
 cancelScreenSharing(msg);
 }
});

后台页面获得对流的访问权限，并将包含 chromeMediaSourceId (streamID) 的消息发回给端口（内容脚本）。

function requestScreenSharing(port, msg) {
 desktopMediaRequestId =
 chrome.desktopCapture.chooseDesktopMedia(data_sources, port.sender.tab,
 function (streamId) { if (streamId) {
 msg.type = 'Sharing_Started';
 msg.streamId = streamId;
 } else {
 msg.type = 'Stop_Sharing';
 }
 port.postMessage(msg);
 });

content-script 将消息发布回 app.js。

port.onMessage.addListener(function(msg) { window.postMessage(msg, '*'); });

在 app.js 中，使用 streamID 调用 navigator.webkitGetUserMedia。

if (event.data.type && (event.data.type === ‘Sharing_Started’)) {
 startScreenStreamFrom(event.data.streamId);
}

扩展程序安装步骤

首先必须安装扩展程序。由于 extension.crx 和 extension.pem 文件随此包提供，因此请跳过第 2 步。“警告：从 Chrome 33 开始，Windows 稳定版/测试版用户只能下载托管在 Chrome Web 商店中的扩展程序，但通过企业策略或开发者模式安装的除外（请参阅 保护 Windows 用户免受恶意扩展的侵害）。您仍然可以创建自己的 .crx 文件并在开发者频道中用于测试，但无法将其托管在自己的服务器上。”（来源：https://developer.chrome.com/extensions/hosting）。

  1. 转到 chrome://settings 并选择“扩展程序”。
  2. 点击“打包扩展程序”按钮。在“扩展程序根目录”字段中导航到“extension”目录。对于“私钥文件”，选择保存在“extension.pem”中的私钥。完成后点击“打包扩展程序”按钮。扩展程序文件将保存在“extension”目录的上一级，命名为“extension.crx”。请注意，如果您正在创建新的 crx 文件，请删除同名的旧文件。
  3. 将“extension.crx”文件从“extension”目录拖放到浏览器窗口中。扩展程序将被安装。

结论

此示例应用程序演示了一个简单的屏幕共享应用程序在 Chrome 中的工作方式。该应用程序使用 Chrome deskopCapture API，该 API 仅允许最终用户查看屏幕。它还说明了如何为该应用程序创建和安装 Chrome 扩展程序。它不是桌面共享应用程序；桌面共享只能通过原生（C/C++）应用程序实现。您可以从 Chrome 共享屏幕，并在任何支持 WebRTC 的浏览器上查看它们。Firefox/Opera 目前尚不支持屏幕捕获。但是，您可以在 Firefox 和 Opera 上查看共享的屏幕。

来源和有用链接

此示例应用程序演示了一个简单的屏幕共享应用程序在 Chrome 中的工作方式。该应用程序使用 Chrome deskopCapture API，该 API 仅允许最终用户查看屏幕。它还说明了如何为该应用程序创建和安装 Chrome 扩展程序。它不是桌面共享应用程序；桌面共享只能通过原生（C/C++）应用程序实现。您可以从 Chrome 共享屏幕，并在任何支持 WebRTC 的浏览器上查看它们。Firefox/Opera 目前尚不支持屏幕捕获。但是，您可以在 Firefox 和 Opera 上查看共享的屏幕。

  1. WebRTC 官方网站。 www.webrtc.org
  2. Chrome 扩展程序托管。 https://developer.chrome.com/extensions/hosting
    （注意：此链接只能在 Chrome 或 Firefox 浏览器中打开）。
  3. Chrome 扩展程序部署选项。 https://developer.chrome.com/extensions/hosting
© . All rights reserved.