WebRTC实现简单音视频通话功能

ZEGO即构开发者

于 2022-07-27 10:06:26 发布

阅读量2.8k

点赞数 1

分类专栏：音视频开发文章标签： VUE WebRTC WebRTC推拉流

本文链接：https://blog.csdn.net/ZEGO123/article/details/126006848

版权

1 WebRTC音视频通话功能简介

本文介绍如何基于WebRTC快速实现一个简单的实时音视频通话。

在开始之前，您可以先了解一些实时音视频推拉流相关的基础概念：

流：一组按指定编码格式封装的音视频数据内容。一个流可以包含几个轨道，比如视频和音频轨道。
推流：把采集阶段封包好的音视频数据流推送到 ZEGO 实时音视频云的过程。
拉流：从 ZEGO 实时音视频云将已有音视频数据流拉取播放的过程。
房间：是 ZEGO 提供的音视频空间服务，用于组织用户群，同一房间内的用户可以互相收发实时音视频及消息。
1. 用户需要先登录某个房间，才能进行音视频推流、拉流操作。
2. 用户只能收到自己所在房间内的相关消息（用户进出、音视频流变化等）。

更多相关概念可参考即构官网关于音视频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<

最低0.47元/天解锁文章