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，token 为字符串
let token = ``;
zg.loginRoom(roomID, token, { userID, userName: userID}, {userUpdate: true}).then(async result => {if (result == true) {console.log("login success");
// 与房间连贯胜利，只有当房间状态是连贯胜利时，能力进行推流、拉流等操作。// 创立流、预览
// 调用 createStream 接口后，须要期待 ZEGO 服务器返回流媒体对象能力执行后续操作
const localStream = await zg.createStream();
// 创立媒体流播放组件
const localView = zg.createLocalStreamView(localStream);
localView.play("local-video", {enableAutoplayDialog:true});
// 开始推流，将本人的音视频流推送到 ZEGO 音视频云，此处 streamID 由用户定义，需全局惟一
let streamID = new Date().getTime().toString();
zg.startPublishingStream(streamID, localStream)
}
});
// // 登录房间的第二种写法
// (async function main(){// await zg.loginRoom(roomID, token, { userID, userName: userID}, {userUpdate: true})
// })()
</script>
</body>
</html>4 WebRTC 音视频通话实现流程
以用户 A 拉取用户 B 的流为例，一次简略的 WebRTC 实时音视频通话次要流程如下：
- 用户 A 创立实例，登录房间。（登录胜利后，可预览本人的画面并推流。）
- 用户 B 创立实例，登录同一个房间。登录胜利后，用户 B 开始推流，此时 SDK 会触发
roomStreamUpdate回调，示意房间内有流的变动。 - 用户 A 可通过监听
roomStreamUpdate回调，当回调告诉有流新增时，获取用户 B 的流 ID，来拉取播放用户 B 刚刚推送的流。
4.1 创立 WebRTC 实时音视频通话界面
为不便实现根本的 WebRTC 实时音视频性能，您可参考 WebRTC 实时音视频的示例代码和下图实现一个简略实时音视频性能的页面。
关上或新建“index.html”页面文件，并拷贝以下代码到文件中。
<html>
<head>
<meta charset="UTF-8">
<title>Zego Express Video Call</title>
<style type="text/css">
* {font-family: sans-serif;}
h1,
h4 {text-align: center;}
#local-video, #remote-video {
width: 400px;
height: 300px;
border: 1px solid #dfdfdf;
}
#local-video {
position: relative;
margin: 0 auto;
display: block;
}
#remote-video {
display: flex;
margin: auto;
position: relative !important;
}
</style>
</head>
<body>
<h1>
Zego RTC Video Call
</h1>
<h4>Local video</h4>
<div id="local-video"></div>
<h4>Remote video</h4>
<div id="remote-video"></div>
<script>
// 文档中的 js 示例代码可粘贴至此处
// const zg = new ZegoExpressEngine(appID, server);
</script>
</body>
</html>4.2 创立引擎并监听回调
- 创立并初始化一个
ZegoExpressEngine的实例，将您我的项目的 AppID 传入参数“appID”，Server 传入参数“server”。 - 即构实时音视频 SDK 提供如房间连贯状态、音视频流变动、用户进出等告诉回调。为防止错过任何告诉，您须要在创立 ZegoExpressEngine 后立刻监听回调。
// 我的项目惟一标识 AppID，Number 类型，请从 ZEGO 控制台获取
let appID = ;
// 接入服务器地址 Server，String 类型，请从 ZEGO 控制台获取（获取形式请参考上文“前提条件”）let server = "";
// 初始化实例
const zg = new ZegoExpressEngine(appID, server);
// 房间状态更新回调
zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {if (reason == 'LOGINING') {// 登录中} else if (reason == 'LOGINED') {
// 登录胜利
// 只有当房间状态是登录胜利或重连胜利时，推流（startPublishingStream）、拉流（startPlayingStream）能力失常收发音视频
// 将本人的音视频流推送到 ZEGO 音视频云
} else if (reason == 'LOGIN_FAILED') {// 登录失败} else if (reason == 'RECONNECTING') {// 重连中} else if (reason == 'RECONNECTED') {// 重连胜利} else if (reason == 'RECONNECT_FAILED') {// 重连失败} else if (reason == 'KICKOUT') {// 被踢出房间} else if (reason == 'LOGOUT') {// 登出胜利} else if (reason == 'LOGOUT_FAILED') {// 登出失败}
});
// 房间内其余用户进出房间的告诉
// 只有调用 loginRoom 登录房间时传入 ZegoRoomConfig，且 ZegoRoomConfig 的 userUpdate 参数为“true”时，用户能力收到 roomUserUpdate 回调。zg.on('roomUserUpdate', (roomID, updateType, userList) => {if (updateType == 'ADD') {for (var i = 0; i < userList.length; i++) {console.log(userList[i]['userID'], '退出了房间：', roomID)
}
} else if (updateType == 'DELETE') {for (var i = 0; i < userList.length; i++) {console.log(userList[i]['userID'], '退出了房间：', roomID)
}
}
});
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {// 房间内其余用户音视频流变动的告诉});
4.3 检测浏览器 WebRTC 兼容性
思考到不同的浏览器对 WebRTC 的兼容性不同，在实现实时音视频推拉流性能之前，您须要检测浏览器是否失常运行 WebRTC。
您能够调用 checkSystemRequirements 接口检测浏览器的兼容性，检测后果的含意，请参考 ZegoCapabilityDetection 接口下的参数形容。
const result = await zg.checkSystemRequirements();
// 返回的 result 为兼容性检测后果。webRTC 为 true 时示意反对 webRTC，其余属性含意能够参考接口 API 文档。console.log(result);
// {
// webRTC: true,
// customCapture: true,
// camera: true,
// microphone: true,
// videoCodec: {H264: true, H265: false, VP8: true, VP9: true},
// screenSharing: true,
// errInfo: {}
// }您还能够通过 ZEGO 提供的实时音视频推拉流在线检测工具 在线检测工具，在须要检测的浏览器中关上，间接检测浏览器的兼容性。请参考 浏览器兼容性阐明 获取 音视频 SDK 反对的浏览器兼容版本。
4.4 登录房间
1. 生成 Token
登录房间须要用于验证身份的 Token，开发者可间接在 ZEGO 控制台获取长期 Token（有效期为 24 小时）来应用，详情请参考 控制台 – 项目管理 中的“我的项目信息”。
长期 Token 仅供调试，正式上线前，请从开发者的业务服务器生成 Token，详情可参考 应用 Token 鉴权。
2. 登录房间
调用 loginRoom 接口，传入房间 ID 参数“roomID”、“token”和用户参数“user”，依据理论状况传入参数“config”，登录房间。
- “roomID”、“userID”和“userName”参数的取值都为自定义。
- “roomID”和“userID”都必须惟一，倡议开发者将“userID”设置为一个有意义的值，可将其与本人的业务账号零碎进行关联。
- 只有调用
loginRoom接口登录房间时传入ZegoRoomConfig配置，且“userUpdate”参数取值为“true”时，用户能力收到roomUserUpdate回调。
// 登录房间，胜利则返回 true
// userUpdate 设置为 true 能力收到 roomUserUpdate 回调。let userID = Util.getBrow() + '_' + new Date().getTime();
let userName = "user0001";
let roomID = "0001";
let token = ;
// 为防止错过任何告诉，您须要在登录房间前先监听用户退出 / 退出房间、房间连贯状态变更、推流状态变更等回调。zg.on('roomStateChanged', async (roomID, reason, errorCode, extendedData) => {})
zg.loginRoom(roomID, token, { userID, userName: userID}, {userUpdate: true}).then(result => {if (result == true) {console.log("login success")
}
}); 您能够监听 roomStateChanged 回调实时监控本人与房间的连贯状态。只有当房间状态是连贯胜利时，能力进行推流、拉流等操作。
4.5 预览本人的画面，并推送到 ZEGO 音视频云
- 创立流并预览本人的画面
开始推流前须要创立本端的音视频流，调用 createStream 接口获取媒体流对象，默认会采集摄像头画面和麦克风声音。媒体流对象能够应用 createLocalStreamView 创立本地媒体流播放组件进行播放，也能够通过 video 元素 srcObject 属性赋值进行播放。
- 需期待
createStream接口返回流媒体对象后，再将本人的音视频流推送到 ZEGO 音视频云。
调用 startPublishingStream 接口，传入“streamID”和创立流失去的流对象“localStream”，向远端用户发送本端的音视频流。
“streamID”由您本地生成，然而须要保障同一个 AppID 下，“streamID”全局惟一。如果同一个 AppID 下，不同用户各推了一条“streamID”雷同的流，会导致后推流的用户推流失败。
// 此处在登录房间胜利后，立刻进行推流。在实现具体业务时，您可抉择其余机会进行推流，只有保障以后房间连贯状态是连贯胜利的即可。zg.loginRoom(roomID, token, { userID, userName: userID}, {userUpdate: true}).then(async result => {if (result == true) {console.log("login success")
// 创立流、预览
// 调用 createStream 接口后，须要期待 ZEGO 服务器返回流媒体对象能力执行后续操作
const localStream = await zg.createStream();
// 创立媒体流播放组件对象，用于预览本地流
const localView = zg.createLocalStreamView(localStream);
// 将播放组件挂载到页面，"local-video" 为组件容器 DOM 元素的 id。localView.play("local-video");
// 开始推流，将本人的音视频流推送到 ZEGO 音视频云
let streamID = new Date().getTime().toString();
zg.startPublishingStream(streamID, localStream)
}
});
（可选）设置音视频采集参数
通过属性设置相干采集参数
可依据须要通过 createStream 接口中的如下属性设置音视频相干采集参数，详情可参考 自定义视频采集：
camera：摄像头麦克风采集流相干配置screen：屏幕捕获采集流相干配置custom：第三方流采集相干配置
4.6 拉取其余用户的音视频
进行视频通话时，咱们须要拉取到其余用户的音视频。
房间内有其余用户退出时，SDK 会触发 roomStreamUpdate 回调，告诉房间内有流新增，基于此可获取其余用户的“streamID”。此时，调用 startPlayingStream 接口依据传入的其余用户的“streamID”，拉取远端已推送到 ZEGO 服务器的音视频画面。若须要从 CDN 拉流，可参考 应用 CDN 直播。
// 流状态更新回调
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
// 当 updateType 为 ADD 时，代表有音视频流新增，此时能够调用 startPlayingStream 接口拉取播放该音视频流
if (updateType == 'ADD') {
// 流新增，开始拉流
// 这里为了使示例代码更加简洁，咱们只拉取新增的音视频流列表中第的第一条流，在理论的业务中，倡议开发者循环遍历 streamList，拉取每一条音视频流
const streamID = streamList[0].streamID;
// streamList 中有对应流的 streamID
const remoteStream = await zg.startPlayingStream(streamID);
// 创立媒体流播放组件对象，用于播放远端媒体流。const remoteView = zg.createRemoteStreamView(remoteStream);
// 将播放组件挂载到页面，"remote-video" 为组件容器 DOM 元素的 id。remoteView.play("remote-video");
} else if (updateType == 'DELETE') {// 流删除，进行拉流}
});- 局部浏览器因自动播放限度策略问题，应用
ZegoStreamView媒体流播放组件进行播放媒体流可能碰壁，SDK 默认会在界面上弹窗提醒复原播放。 - 您能够将 ZegoStreamView.play() 办法的第二个参数 options.enableAutoplayDialog 设置为 false 敞开主动弹窗，通过在
autoplayFailed事件回调中，在页面上显示一个按钮，疏导用户点击复原播放。
至此，您曾经胜利实现了简略的实时音视频通话，可在浏览器中关上 “index.html”，体验实时音视频性能。
5 实时音视频 SDK 罕用性能
5.1 罕用告诉回调
// 房间连贯状态更新回调
// 本地调用 loginRoom 退出房间时，您可通过监听 roomStateChanged 回调实时监控本人在本房间内的连贯状态。zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {if (reason == 'LOGINING') {// 登录中} else if (reason == 'LOGINED') {
// 登录胜利
// 只有当房间状态是登录胜利或重连胜利时，推流（startPublishingStream）、拉流（startPlayingStream）能力失常收发音视频
// 将本人的音视频流推送到 ZEGO 音视频云
} else if (reason == 'LOGIN_FAILED') {// 登录失败} else if (reason == 'RECONNECTING') {// 重连中} else if (reason == 'RECONNECTED') {// 重连胜利} else if (reason == 'RECONNECT_FAILED') {// 重连失败} else if (reason == 'KICKOUT') {// 被踢出房间} else if (reason == 'LOGOUT') {// 登出胜利} else if (reason == 'LOGOUT_FAILED') {// 登出失败}
});
// 房间内其余用户推送的音视频流新增 / 缩小的告诉
// 本人推送的流不能在这里接管到告诉
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {if (updateType == 'ADD') {
// 流新增
for (var i = 0; i < streamList.length; i++) {console.log('房间',roomID,'内新增了流：', streamList[i]['streamID'])
}
const message = "其余用户的视频流 streamID:" + streamID.toString();} else if (updateType == 'DELETE') {
// 流删除
for (var i = 0; i < streamList.length; i++) {console.log('房间',roomID,'内缩小了流：', streamList[i]['streamID'])
}
}
});
// 房间内其余用户进出房间的告诉
// 只有调用 loginRoom 登录房间时传入 ZegoRoomConfig，且 ZegoRoomConfig 的 userUpdate 参数为“true”时，用户能力收到 roomUserUpdate 回调。zg.on('roomUserUpdate', (roomID, updateType, userList) => {if (updateType == 'ADD') {for (var i = 0; i < userList.length; i++) {console.log(userList[i]['userID'], '退出了房间：', roomID)
}
} else if (updateType == 'DELETE') {for (var i = 0; i < userList.length; i++) {console.log(userList[i]['userID'], '退出了房间：', roomID)
}
}
});
// 用户推送音视频流的状态告诉
// 用户推送音视频流的状态产生变更时，会收到该回调。如果网络中断导致推流异样，SDK 在重试推流的同时也会告诉状态变动。zg.on('publisherStateUpdate', result => {
// 推流状态更新回调
var state = result['state']
var streamID = result['streamID']
var errorCode = result['errorCode']
var extendedData = result['extendedData']
if (state == 'PUBLISHING') {console.log('胜利推送音视频流：', streamID);
} else if (state == 'NO_PUBLISH') {console.log('未推送音视频流');
} else if (state == 'PUBLISH_REQUESTING') {console.log('申请推送音视频流：', streamID);
}
console.log('错误码:', errorCode,'额定信息:', extendedData)
})
// 推流品质回调。// 胜利推流后，您会定时收到回调音视频流品质数据（如分辨率、帧率、码率等）。zg.on('publishQualityUpdate', (streamID, stats) => {
// 推流品质回调
console.log('流品质回调')
})
// 用户拉取音视频流的状态告诉
// 用户拉取音视频流的状态产生变更时，会收到该回调。如果网络中断导致拉流异样，SDK 会主动进行重试。zg.on('playerStateUpdate', result => {
// 拉流状态更新回调
var state = result['state']
var streamID = result['streamID']
var errorCode = result['errorCode']
var extendedData = result['extendedData']
if (state == 'PLAYING') {console.log('胜利拉取音视频流：', streamID);
} else if (state == 'NO_PLAY') {console.log('未拉取音视频流');
} else if (state == 'PLAY_REQUESTING') {console.log('申请拉取音视频流：', streamID);
}
console.log('错误码:', errorCode,'额定信息:', extendedData)
})
// 拉取音视频流时的品质回调。// 胜利拉流后，您会定时收到拉取音视频流时的品质数据告诉（如分辨率、帧率、码率等）。zg.on('playQualityUpdate', (streamID,stats) => {// 拉流品质回调})
// 收到播送音讯的告诉
zg.on('IMRecvBroadcastMessage', (roomID, chatData) => {console.log('播送音讯 IMRecvBroadcastMessage', roomID, chatData[0].message);
alert(chatData[0].message)
});
// 收到弹幕音讯的告诉
zg.on('IMRecvBarrageMessage', (roomID, chatData) => {console.log('弹幕音讯 IMRecvBroadcastMessage', roomID, chatData[0].message);
alert(chatData[0].message)
});
// 收到自定义信令音讯的告诉
zg.on('IMRecvCustomCommand', (roomID, fromUser, command) => {console.log('自定义音讯 IMRecvCustomCommand', roomID, fromUser, command);
alert(command)
});5.2 进行音视频通话
1. 进行推流、销毁流
调用 stopPublishingStream 接口进行向远端用户发送本端的音视频流。调用 destroyStream 接口销毁创立的流数据，销毁流后开发需自行销毁 video（进行采集）。
// 依据本端 streamID 进行推流
zg.stopPublishingStream(streamID)
// localStream 是调用 createStream 接口获取的 MediaStream 对象
zg.destroyStream(localStream)2. 进行拉流
调用 stopPlayingStream 接口进行拉取远端推送的音视频流。
// 流状态更新回调
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {if (updateType == 'ADD') {// 流新增，开始拉流} else if (updateType == 'DELETE') {
// 流删除，通过流删除列表 streamList 中每个流的 streamID 进行进行拉流。const streamID = streamList[0].streamID;
zg.stopPlayingStream(streamID)
}
});3. 退出房间
调用 logoutRoom 接口退出房间。
zg.logoutRoom(roomID)以上整个推拉流过程的 API 调用时序可参考下图：
6 调试视频通话性能
在真机中运行我的项目，运行胜利后，能够看到本端视频画面。
为不便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输出雷同的 AppID、RoomID，输出一个不同的 UserID，即可退出同一房间与真机设备互通。当胜利开始音视频通话时，能够听到远端的音频，看到远端的视频画面。
7 获取音视频 SDK 更多反对
获取本文的 Demo、开发文档、技术支持，拜访即构文档核心
近期有开发布局的开发者可上即构官网查看，恰逢即构七周年全线音视频产品 1 折的优惠，分割商务获取 RTC 产品优惠；