屏幕分享/窗口分享
介绍
Web SDK 在 v1.0.0 版本之后增加了屏幕共享功能,如下图所示,发布端可以选择自己的屏幕或者应用窗口画面发布到房间中。
浏览器支持
目前该功能仅支持 Chrome、Firefox,在 SDK 2.2.0 之后,Chrome 72 以上的版本可以支持无插件屏幕录制了,如果您的 Chrome 低于 72 或者 SDK 版本低于 2.2.0,请按照下方的方式安装 Chrome 屏幕录制插件。
Safari 的屏幕录制支持已经集成在了 2.2.0 版本中,等待 Safari TP 正式发布即可支持
Chrome 插件安装
因为 Chrome 在逐渐收紧第三方插件的安装,所以我们这里提供 3 种方式来安装插件。如果您的设备可以访问到 Google 服务,我们建议您通过 Chrome 商店安装。
这里提供的链接均为最新版本的插件链接(适用 SDK >= 1.1.0),如果需要使用历史版本,见下方版本列表里下载。
商店安装
确保您可以访问到 Google 服务,访问这里安装插件
插件文件安装
插件安装可能在部分 Chrome 的版本上的版本会被禁止,如果失败,请使用下面的开发模式安装
首先下载插件文件,下载地址 下载完成后,Chrome 访问 chrome://extensions/ 或者右上角-更多工具-拓展程序,打开拓展程序页面 将下载的 crx 文件拖动到这个页面内完成安装
开发模式安装
这个安装方法是目前唯一适用于各个情况下的安装方法
首先下载插件zip包,下载地址
下载完成后将该 zip 包解压到一个文件夹中
之后Chrome 访问 chrome://extensions/ 或者右上角-更多工具-拓展程序,打开拓展程序页面
如图所示打开开发者模式,点击 加载已解压的扩展程序,选择我们刚刚解压到的文件夹中的 CaptureExtension 文件夹完成安装
安装完成后,需要重新启动 Chrome
检测 Chrome 插件是否正常工作
import { isChromeExtensionAvailable } from "pili-rtc-web";
isChromeExtensionAvailable().then(isAvailable => {
if (!isAvailable) {
console.log("插件异常!");
}
});
开启屏幕共享
通过 getLocalTracks 或 getLocalStream 获取本地的屏幕画面流。
在 Stream 模式下的 getLocalStream 中,屏幕共享和摄像头采集不能同时打开。
deviceManager.getLocalTracks({
screen: {
enabled: true,
source: "window",
bitrate: 600,
height: 480,
width: 640,
},
audio: {
enabled: true,
}
})
其中 source 属性代表是采集窗口画面(window)还是采集屏幕画面(screen), 如果不传入的话 Chrome 会使用一个系统弹窗让用户选择,Firefox 默认使用窗口。 如果没有正确配置 chrome 插件,或者浏览器不兼容,会抛出相应的错误代码,详细见 错误代码
注意!截止目前最新的 Chrome 版本(75) 在无插件的采集模式下,依然不支持指定
source
,如果业务上需要强制指定某个source
类型,请打开forceChromePlugin
强制使用插件采集
deviceManager.getLocalTracks({
screen: {
enabled: true,
source: "window",
// chrome 下强制使用 chrome 插件采集
forceChromePlugin: true,
},
})
捕获系统声音
在上面开启屏幕共享的例子中,捕获到的声音是设备麦克风的声音。
如果想要捕获设备系统发出的声音,可以使用如下配置。
deviceManager.getLocalTracks({
screen: {
enabled: true,
audio: true
}
})
注意,Chrome 浏览器在版本 (74) 中开始支持捕获系统声音,其他浏览器尚不支持。 另外,Windows 平台可以捕获整个系统声音,Mac/Linux 平台目前仅可捕获某个标签页的声音。
版本列表
- v1.0.1 (适用 1.1.0 > SDK >= 1.0.0)