产品百科 | RTC Web SDK 如何调用屏幕分享接口

简介: 阿里云 RTC SDK 为您提供屏幕分享使用的接口方法,通过本文档您可以了解实现的具体调用流程。

阿里云 RTC SDK 为您提供屏幕分享使用的接口方法,通过本文档您可以了解实现的具体调用流程。

前提条件

您需要调用 isSupport 接口根据返回参数 supportScreenShare 来检测是否支持屏幕分享。

环境要求

Web SDK 屏幕共享功能的环境要求请参见环境要求

推流端

  1. 设置参数。
/**
 * 设置视频/屏幕流参数
 * @param {Number} width 宽度
 * @param {Number} height 高度
 * @param {Number} frameRate 帧率
 * @param {Number} type 类型 1:摄像头流 2:共享流
 */
aliWebrtc.setVideoProfile({
    width,
    height,
    frameRate
},type);
  1. 启动屏幕分享。
// 配置屏幕共享推流
aliWebrtc.configLocalScreenPublish = true;
// 启动推流
aliWebrtc.publish().then(()=>{
    //推流成功
}).catch((err) => {
  //推流失败
})
  1. 共享屏幕声音。说明共享屏幕声音支持 Windows 端 Chrome 75 及以上版本或 Edge 80 及以上版本,Mac 端仅支持分享标签页声音。
  1. 勾选分享音频image.png
  2. 推音频流。分享的音频会和麦克风混流,需要同时推音频流,此时订阅端只需订阅音频流就可以听到对方麦克风和屏幕分享音频。
  1. 停止屏幕分享。
// 配置屏幕共享停止
aliWebrtc.configLocalScreenPublish = false;
// 启动停推
aliWebrtc.publish().then(()=>{
    //推流成功
}).catch((err) => {
  //推流失败
})
  1. 错误码提示。
aliWebrtc.on("onError",(error)=>{
  //10010 屏幕共享未知错误
  //10011 屏幕共享在选择页面取消选择 屏幕共享被禁止
  //10012 屏幕共享在网页底部悬浮窗单击停止共享  屏幕共享已取消
    console.log(error.errorCode);
})

订阅端

订阅端用户可通过手动方式订阅推流端屏幕共享流,并设置对应 video 显示,详情请参见 AliRtcEngine 接口


「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。

image.png


相关文章
|
JavaScript 前端开发 开发工具
在使用智能媒体服务接入直播剪辑Web SDK时
在使用智能媒体服务接入直播剪辑Web SDK时
209 7
|
前端开发 JavaScript API
阿里云智能媒体服务IMS(Intelligent Media Services)的视频剪辑Web SDK
【1月更文挑战第15天】【1月更文挑战第72篇】阿里云智能媒体服务IMS(Intelligent Media Services)的视频剪辑Web SDK
472 6
|
4月前
|
API 开发工具 开发者
百宝箱开放平台 ✖️ Web SDK
本服务支持开发者将智能体以网页悬浮窗形式集成至Web页面,通过引入SDK并配置agentId等参数实现交互,需先完成应用发布。
250 0
|
Web App开发 前端开发 JavaScript
网页浏览和编辑DWG快速入门的方法(WEB CAD SDK)
MxDraw云图在线CAD解决方案,包括MxDraw、MxCAD开发包、图纸转换程序和后端服务。支持多种平台和CPU架构,推荐使用最新版Chrome或Edge浏览器。提供AutoCAD各版本dwg格式支持,具备三维和二维编辑功能。提供入门开发指南和功能丰富的示例。用户可下载开发包进行功能演示,包括在线预览和编辑CAD图纸。
2069 93
网页浏览和编辑DWG快速入门的方法(WEB CAD SDK)
|
编解码 前端开发 JavaScript
响应式Web设计:适应所有屏幕的艺术与科学
【6月更文挑战第11天】响应式Web设计是适应各种屏幕尺寸和分辨率的网站设计方法,利用CSS3媒体查询、流动布局、弹性图片和JavaScript等技术实现。其原则包括灵活性、可用性和可访问性。最佳实践包括优先考虑移动设备体验、简化布局、优化资源、多设备测试和遵循Web可访问性标准。随着设备多样化,响应式设计成为现代Web设计的关键趋势。
|
5月前
|
开发工具 Android开发
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
684 11
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
822 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
JavaScript 前端开发 Java
[Android][Framework]系统jar包,sdk的制作及引用
[Android][Framework]系统jar包,sdk的制作及引用
519 0
|
程序员 开发工具 Android开发
Android|使用阿里云推流 SDK 实现双路推流不同画面
本文记录了一种使用没有原生支持多路推流的阿里云推流 Android SDK,实现同时推送两路不同画面的流的方法。
331 7
|
Java Linux API
Android SDK
【10月更文挑战第21天】
451 1