产品百科 |Web 端如何快速集成 RTC SDK

简介: 本文为您介绍了 Web 端集成 SDK 操作,帮助您快速集成 SDK 并能使用音视频通信基本功能。

本文为您介绍了 Web 端集成 SDK 操作,帮助您快速集成 SDK 并能使用音视频通信基本功能

前提条件

集成 Web 客户端 SDK 必须使用 HTTPS 协议。

环境要求

操作系统 浏览器类型 浏览器最低版本要求 推流 拉流 屏幕分享
Mac OS 桌面版 Safari 浏览器 11+ 支持 支持 不支持
Mac OS 桌面版 Chrome 浏览器 60+ 支持 支持 支持(需要 Chrome 72 及以上版本)
Mac OS 桌面版 Edge 浏览器 80+ 支持 支持 支持(需要 Edge 80 及以上版本)
Windows 桌面版 Chrome 浏览器 60+ 支持 支持 支持(需要 Chrome 72 及以上版本)
Windows 桌面版 Edge 浏览器 80+ 支持 支持 支持(需要 Edge 80 及以上版本)
iOS 11.1.2 及以上 移动版 Safari 浏览器 11+ 支持 支持 不支持
Android 移动版 Chrome 浏览器 63+ 支持 支持 不支持

注意

  • 由于 H.264 版权限制,桌面浏览器 RTC SDK 不支持华为系统的 Chrome 浏览器和以 Chrome WebView 为内核的浏览器的正常运行。
  • setAudioVolumemuteLocalCameramuteLocalMic 接口在 iOS 系统目前存在兼容问题,暂不支持使用。
  • 建议不要在移动端使用 Web 进行 SDK 推流,最好使用 native。
  • 纯订阅模式媒体文件播放失败,请参见 H5 纯订阅模式媒体文件播放失败问题

操作步骤

  1. 下载 SDK
  2. 将 AliWebRtcSDK 包保存到本地项目下。
  3. 在项目相应的前端页面文件中,对 aliyun-webrtc-sdk.js 文件进行引用。image.png
    说明 本图片仅供参考,具体版本号和引入样式请您以实际为准。

后续步骤

完成集成 SDK 操作,您可以实现音视频通信的基本功能,详情请参见 Web 基本功能


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

image.png


相关文章
|
10月前
|
API 开发工具 开发者
百宝箱开放平台 ✖️ Web SDK
本服务支持开发者将智能体以网页悬浮窗形式集成至Web页面,通过引入SDK并配置agentId等参数实现交互,需先完成应用发布。
449 0
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1154 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Java 开发工具 Spring
【Azure Application Insights】为Spring Boot应用集成Application Insight SDK
本文以Java Spring Boot项目为例,详细说明如何集成Azure Application Insights SDK以收集和展示日志。内容包括三步配置:1) 在`pom.xml`中添加依赖项`applicationinsights-runtime-attach`和`applicationinsights-core`;2) 在main函数中调用`ApplicationInsights.attach()`;3) 配置`applicationinsights.json`文件。同时提供问题排查建议及自定义日志方法示例,帮助用户顺利集成并使用Application Insights服务。
453 8
|
云安全 数据采集 安全
阿里云热门云安全产品简介:Web应用防火墙与云防火墙产品各自作用介绍
在阿里云的安全类云产品中,Web应用防火墙与云防火墙是用户比较关注的两款安全产品,二者在作用上各有侧重,共同构成了阿里云强大的安全防护体系。本文将对Web应用防火墙与云防火墙产品各自的主要作用进行详细介绍。
|
监控 关系型数据库 MySQL
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
702 0
|
文字识别 算法 API
视觉智能开放平台产品使用合集之支持的离线SDK有哪些
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
321 2
视觉智能开放平台产品使用合集之支持的离线SDK有哪些
|
Web App开发 前端开发 网络性能优化
Web网页端IM产品RainbowChat-Web的v7.2版已发布
RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统)。
345 1
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
621 11
|
Prometheus 监控 Cloud Native
实时计算 Flink版产品使用问题之怎么关闭HDFS的Web界面
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
存储 监控 API
视觉智能开放平台产品使用合集之人脸识别服务端的离线SDK是什么
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
310 1

热门文章

最新文章