产品百科 |零门槛玩转 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

相关文章
|
10月前
|
JSON Linux Go
Golang之我想写个"web框架"-7: 完成一个“留言小demo”
Golang之我想写个"web框架"-7: 完成一个“留言小demo”
135 0
|
11月前
|
JavaScript
移动端也能兼容的web页面制作1:MDBootstrap演示Demo运行演示
移动端也能兼容的web页面制作1:MDBootstrap演示Demo运行演示
239 0
|
JavaScript
通过闪烁标题来实现web消息通知的小demo
一段js代码模拟实现web消息推送的功能,通过闪烁文档的标题来实现,代码如下:
92 0
通过闪烁标题来实现web消息通知的小demo
|
Web App开发
Web蓝牙打印Demo以及Webbluetooth的用法
Web蓝牙打印Demo以及Webbluetooth的用法
984 0
|
存储 jenkins 机器人
RobotFramework实战篇-PC端web自动化demo及持续集成
Robotframework该框架的学习成本比较低,很多功能都是现成的,而且脚本易于维护,而且同时支持web端,移动端以及接口自动化,用例套件管理以及用例执行和报告查看,日志记录等功能都比较完善,而且可扩展性强。
RobotFramework实战篇-PC端web自动化demo及持续集成
|
Kubernetes 关系型数据库 MySQL
单机版的K8s环境搭建及部署Java Web应用Demo
傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心里寂寞而凄凉,感到自己的生命被剥夺了。当时我是个年轻人,但我害怕这样生活下去,衰老下去。在我看来,这是比死亡更可怕的事。--------王小波
1099 0
单机版的K8s环境搭建及部署Java Web应用Demo
|
Web App开发 Java 测试技术
24、【支付模块开发】——将下载下来的支付宝API Demo运行在web上
上一篇23、【支付模块快发】——Java对接支付宝步骤(沙箱环境)我们讲解了怎么配置相关配置文件,下面我们调试一下怎么使其在IDEA的web项目中跑起来,然后在浏览器中进行操作 我们用IDEA导入支付宝对接Demo的是时候发现不能运行,下面讲解一下怎么...
1471 0