1 WebRTC音视频通话功能简介
本文介绍如何基于WebRTC快速实现一个简单的实时音视频通话。
在开始之前,您可以先了解一些实时音视频推拉流相关的基础概念:
-
流:一组按指定编码格式封装的音视频数据内容。一个流可以包含几个轨道,比如视频和音频轨道。
-
推流:把采集阶段封包好的音视频数据流推送到 ZEGO 实时音视频云的过程。
-
拉流:从 ZEGO 实时音视频云将已有音视频数据流拉取播放的过程。
-
房间:是 ZEGO 提供的音视频空间服务,用于组织用户群,同一房间内的用户可以互相收发实时音视频及消息。
-
用户需要先登录某个房间,才能进行音视频推流、拉流操作。
-
用户只能收到自己所在房间内的相关消息(用户进出、音视频流变化等)。
更多相关概念可参考即构官网关于音视频SDK的介绍 术语说明。
2 实现WebRTC视频通话的前提条件
在实现基本的WebRTC实时音视频功能之前,请确保: - 已在项目中集成 ZEGO Express SDK,详情请参考 快速开始 - 集成。 - 已在 ZEGO 控制台 创建项目,申请有效的 AppID 和 ServerSecret,详情请参考 控制台 - 项目管理 中的“项目信息”。
3 WebRTC音视频通话示例代码
我们提供了一个实现了WebRTC音视频通话基本流程的完整示例 HTML 文件,可作为WebRTC开发过程中的参考。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Zego Express Video Call</title> <!-- 此处需要改成正确的 SDK 版本号 --> <script src="ZegoExpressWebRTC-x.x.x.js"></script> <style type="text/css"> h1, h4 { text-align: center; } .video-wrapper { width: 610px; margin: 0 auto; } .video-wrapper h4 { width: 300px; display: inline-block; position: relative; } #remote-video, #local-video { width: 300px; height: 270px; display: inline-block; position: relative; } .video-wrapper video { height: auto; } </style> </head> <body> <h1> Zego RTC Video Call </h1> <div class="video-wrapper"> <h4>Local video</h4> <h4>Remote video</h4> <div id="local-video"></div> <div id="remote-video"></div> </div> <script> // 文档中的 js 示例代码可粘贴至此处 // 项目唯一标识 AppID,Number 类型,请从 ZEGO 控制台获取 let appID = 0 // 接入服务器地址 Server,String 类型,请从 ZEGO 控制台获取(获取方式请参考上文“前提条件”) let server = "" // 初始化实例 const zg = new ZegoExpressEngine(appID, server); zg.setDebugVerbose(false) // 房间状态更新回调 // 此处在登录房间成功后,立即进行推流。在实现具体业务时,您可选择其他时机进行推流,只要保证当前房间连接状态是连接成功的即可。 // 房间状态更新回调 zg.on('roomStateChanged', async (roomID, reason, errorCode, extendedData) => { if (reason == 'LOGINED') { console.log("与房间连接成功,只有当房间状态是连接成功时,才能进行推流、拉流等操作。") } }) zg.on('roomUserUpdate', (roomID, updateType, userList) => { // 其他用户进出房间的通知 }); zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => { // 房间内其他用户音视频流变化的通知 if (updateType == 'ADD') { // 流新增,开始拉流 // 此处演示拉取流新增的列表中第一条流的音视频 const streamID = streamList[0].streamID; // streamList 中有对应流的 streamID const remoteStream = await zg.startPlayingStream(streamID); // 创建媒体流播放组件 const remoteView = zg.createRemoteStreamView(remoteStream); remoteView.play("remote-video", {enableAutoplayDialog:true}); } else if (updateType == 'DELETE') { // 流删除,通过流删除列表 streamList 中每个流的 streamID 进行停止拉流。 const streamID = streamList[0].streamID; zg.stopPlayingStream(streamID) } }); // 登录房间,成功则返回 true // userUpdate 设置为 true 才能收到 roomUserUpdate 回调。 let userID = "user1"; // userID 用户自己设置,必须保证全局唯一 let userName = "user1";// userName 用户自己设置,没有唯一性要求 let roomID = "123"; // roomID 用户自己设置,必须保证全局唯一 // token 由用户自己的服务端生成,为了更快跑通流程,可以通过即构控制台 https://console.zego.im/ 获取临时的音视频 token,