Web直播示例源码实现分享(Web直播demo)

本文分享一个即构Web端直播示例源码，介绍如何快速跑通示例源码，方便开发者体验基础的音视频通话服务。

Web直播 Demo 示例源码下载地址：https://github.com/zegoim/express-demo-web

Web直播准备环境

在跑通示例源码前，请安装浏览器，满足以下兼容性要求：

浏览器	Windows	Mac	Android	iOS
Chrome 58 或以上	✔️	✔️	✔️	✖
FireFox 56 或以上	✔️	✔️	✔️	✖
Safari 11 或以上	–	✔️	–	✔️
Opera 45 或以上	✔️	✔️	部分支持	✖
QQ 浏览器最新版	✔️	✔️	部分支持	✖
360 安全浏览器极速模式	✔️	✔️	✖	✖
微信浏览器	–	–	✔️	iOS 14.3 或以上版本，并且微信版本为 6.5 或以上时，支持推拉流iOS 14.3 以下版本仅支持拉流
WebView	–	–	✔️	iOS 14.3 或以上版本支持推拉流iOS 14.3 以下版本仅支持拉流

只支持 SSL 的 Web 服务器（https），localhost，127.0.0.1 等同于 https。

Web直播前提条件

已到 ZEGO 控制台创建项目，申请有效的 AppID，以及获取到接入服务器的 “Server 地址”，详情请参考控制台 – 项目管理中的“项目信息”。

示例源码目录结构

下面目录结构为 express-demo-web 子目录的文件结构，下文所涉及的文件路径均为相对于此目录的路径。

.
├── README.md
...
└── src  # 源码文件夹
    ├── Examples  # 示例代码
    │   ├── AdvancedAudioProcessing   # 音频进阶功能
    │   ├── AdvancedStreaming         # 推拉流进阶
    │   ├── AdvancedVideoProcessing   # 视频进阶功能
    │   ├── CommonFeatures            # 常用功能
    │   ├── DebugAndConfig            # 调试与配置
    │   ├── Framework                 # 最佳实践/框架相关
    │   ├── Others                    # 其他功能
    │   ├── QuickStart                # 快速开始
    │   └── Scenes                    # 最佳实践/场景相关
    ├── assets    # 资源文件夹，存放项目共用的资源文件，包括sdk、各类依赖库、翻译相关的配置文件等
    └── KeyCenter.js  # 配置相关文件，可以填写申请的appID、server地址等

运行示例源码

下载的示例源码中缺少 SDK 初始化所需的 AppID 和 Server 地址，请使用支持的浏览器，打开 “./src/Examples/DebugAndConfig/InitSettings/index.html” 文件，输入前提条件中获取的 AppID 和 Server 地址后，点击“设置”。
设置完成后，可以开始体验 Demo 功能，请使用支持的浏览器，打开 “./src/Examples” 文件夹下各场景功能的 HTML 文件。例如打开 “QuickStart/CommonUsage” 文件夹下的 “index.html”。