产品百科 |零门槛玩转 RTC Web Demo

简介: 本文为您介绍了运行 Web Demo 的前提条件及具体步骤。在您成功运行 Demo 后,您可以进入房间和远端用户进行音视频通信。

本文为您介绍了运行 Web Demo 的前提条件及具体步骤。在您成功运行 Demo 后,您可以进入房间和远端用户进行音视频通信。

前提条件

在执行 Demo 步骤之前,您需要从控制台获取鉴权信息,具体操作请参见生成 Token

您需要下载示例代码,详情请参见 SDK 下载

操作步骤

  1. 打开 index.html 文件。
  • 集成 SDK。下载最新 Web SDK 添加到代码同层目录,并打开相关注释。image.png
  • 定位到 314 行代码处并配置 AppId AppKey
    说明 从控制台获取的 Token 仅为开发测试使用,正式上线有被攻击风险。建议您自己搭建服务端生成 Token,并使用 Https 协议。搭建服务端请参见服务端生成 Token
var appId = "yourAppId";
var appKey = "yourAppKey";
  1. 运行 Demo。
  1. 输入房间号,单击进入房间image.png
  2. 进入房间后,已经默认开启本地预览并开始推送视频流(摄像头大流和音频)。您可以开启或关闭本地预览,也可以打开或关闭推流。image.png说明房间显示用户名、房间号、推流状态。如果在当前房间内有其他成员,左侧会显示其用户名。
  • 如果您想更改推流状态,您可以直接对推流选项进行热切换,也可以先单击停止推流,然后选择推视频流推共享流image.png
  • 如果您想和其他房间成员进行音视频通信,您可以将鼠标移动到左侧该成员用户名上,当出现共享流 订阅视频流 订阅时,然后进行选择操作。
    说明 Demo 中仅可订阅视频流和共享流,音频流单独订阅您可以自行开发实现,接口说明请参见 AliRtcEngine 接口
    image.png
    说明 订阅后的用户界面显示在房间右侧,互相订阅后即可开始实时音视频通信。


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

image.png

相关文章
|
2月前
|
Web App开发 前端开发 网络性能优化
Web网页端IM产品RainbowChat-Web的v7.2版已发布
RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统)。
41 1
|
3月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
71 11
|
4月前
|
开发者 UED
Axure“Web高端交互元件库”:产品与设计的得力助手
这套“Web高端交互元件库”精心构建了四大板块内容,分别是登陆首页集合、Web框架集合、表单元件集合以及主流后台组件。每一板块都包含了大量实用且美观的交互元件,设计师与开发者可以根据具体项目需求,快速找到并应用这些元件,从而大大提升工作效率。
|
5月前
|
Java Serverless Docker
函数计算产品使用问题之使用Docker镜像部署的Web服务如何获取客户端的真实IP
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
4月前
|
Prometheus 监控 Cloud Native
实时计算 Flink版产品使用问题之怎么关闭HDFS的Web界面
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
4月前
|
消息中间件 监控 Kafka
实时计算 Flink版产品使用问题之怎么调整Flink Web U显示的日志行数
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
5月前
|
人工智能 关系型数据库 分布式数据库
PolarDB产品使用问题之如何将自有BI系统接入NL2BI的Web前端
PolarDB产品使用合集涵盖了从创建与管理、数据管理、性能优化与诊断、安全与合规到生态与集成、运维与支持等全方位的功能和服务,旨在帮助企业轻松构建高可用、高性能且易于管理的数据库环境,满足不同业务场景的需求。用户可以通过阿里云控制台、API、SDK等方式便捷地使用这些功能,实现数据库的高效运维与持续优化。
|
6月前
|
监控 Serverless 持续交付
阿里云云效产品使用问题之如何让流水线支持构建 flutter web 应用到 OSS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
6月前
|
机器学习/深度学习 运维 网络协议
函数计算产品使用问题之创建一个http服务,可以通过公网来访问,是否只能选择web函数
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
6月前
|
缓存 算法 API
视觉智能开放平台产品使用合集之如何在Web浏览器中查看处理后的图片
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
163 0