ZEGO：如何从零搭建H5直播平台

H5已成为品牌宣传最重要的表现方式，基于H5打造的的营销方案具有游戏化、场景化、跨屏互动等优势，能更好的展示商品促进用户转化。H5技术还有开发简单，研发周期短，用户接触成本低等特点，尤其是其强化了web网页的表现性能，除了可描绘二维图形外，还有用于播放视频和音频的标签。

通过H5搭建的直播平台可实现网页高清流畅播放，强交互性增加了用户互动，下面我们就分享搭建H5直播平台的方法。

一、实现H5直播的关键技术：WebRTC

搭建H5直播平台，首选是WebRTC技术。WebRTC即网页即时通信，是一个支持网页浏览器进行实时语音对话或视频对话的开源API。WebRTC包括了音频引擎，视频引擎、传输引擎等，浏览器把最底层的音视频渲染和网络传输的底层能力开放给开发者，开发者可以根据自己的需求选择是否进行重载。

音频引擎中，包括了两个编解码器：iSAC和iLBC，前者针对宽带和超宽带的音频编解码，后者针对窄带音频编解码。音频引擎还包括了音频抖动缓冲，回声消除和噪音抑制模块等。

视频引擎中，包括了VP8和VP9的视频编解码器，甚至是即将到来的AV1，视频引擎还包括视频抖动缓冲和图像质量增强等模块。

传输引擎，WebRTC使用的是SRTP（Secured Realtime Transport Protocol）安全实时传输协议，采取的是P2P的通信方式，没有媒体服务器等后端的实现。

WebRTC基础架构如下所示：

二、基于WebRTC开发直播平台的优劣势

2017年6 月 7 日，苹果宣布，旗下的浏览器内核 WebKit 将正式支持 WebRTC，意味着 macOS High Sierra、iOS 11 中的Safari 浏览器都将用上 WebRTC 技术，同时意味着可以基于webRTC搭建包含Android、IOS、mac、windows等全终端式的RTC应用。

传统意义上的应用体验都是需要下载APP，对于推销人员和试用用户来说都是繁琐的操作，而基于WebRTC的音视频应用，取代了繁重的APP下载，操作简单方便，获客变得更加容易。

当然，WebRTC应用的开发缺陷性也非常明显，主要有：

1.没有开放音视频前处理接口，无法接入美颜、滤镜、变声等自定义视频处理功能。

2.编解码器、抖动缓冲和语音前处理3A等能力只能依靠WebRTC，不能依据自身场景进行特定设置。

3.部分主流浏览器是不支持WebRTC，用户必须在对应平台指定的浏览器才可以进行应用访问。

三、即构WebRTC音视频云服务

随着兼容WebRTC的浏览器越来越多，基于WebRTC打造的H5直播平台应用范围越来越广，更多的平台需要开发独立的H5直播来实现更好的宣传效果。针对这一市场需求，以及教育、金融等领域客户的强烈产品需求，即构推出WebRTC音视频云服务。

即构在成熟的商用系统中加入WebRTC网关，正式上线WebRTC网关服务器，实现APP、微信小程序、WebRTC三端的连麦互通。WebRTC网关服务器的上线意味着即构的音视频能力可以全面支持网页端视频互动场景。

如上图所示，即构-WebRTC音视频云服务的搭建只需要基于Zego-Web-SDK集成相应的接口，即可实现格式转换、协议转换、录制/混流、多终端分发等功能，具体的集成方案可以参见https://doc.zego.im/CN/388.html。

四、搭建H5直播平台的方法

基于即构WebSDK搭建H5直播平台，只需简单的5步即可完成，以下是具体的步骤：

1.初始化 SDK

// 声明变量 var zg;
// 初始化实例 zg = new ZegoClient();
// 配置必要参数 zg.config(
{ appid: appid, // 必填，应用id，由即构分配 idName: idName, // 必填，用户自定义id，全局唯一 nickName: nickName, // 必填，用户自定义昵称 remoteLogLevel: 1, // 上传日志最低级别，建议跟 logLevel 一致 logLevel: 1, // 日志级别，debug:0,info:1,warn:2,error:3,report:99,disable:100（数字越大，日志越少），建议选择 1 server: server // 必填，接入服务器地址，由即构分配 logUrl: logUrl // 必填，logServer 地址，由即构分配 });

2.创建房间&登录房间

即构推流服务基于房间概念执行，在推拉流前需要创建一个相应的直播房间；

zg.login(roomId, 2, loginToken, function(streamList) { //登录成功处理逻辑 }, function(err) { alert("login error: " + err.msg); });

3.本地预览

在开播前可以预览当前画面，可以指定麦克风和摄像头的设备Id，也可以使用默认设备。源代码片段如下，仅供参考：

function doPreview(audioInput, videoInput) { var avConstraints = { audio: true, audioInput: audioInput, video: true, videoInput: videoInput, videoQuality: videoQuality, horizontal: true
}; //WebRTC可以共用相同设备，所以预览时必须指定开播的streamId
zg.startPreview( localVideo, avConstraints, function() { trace("preview success"); doPublish();
}, function(error) { alert("start device error " , error); });
}

4. 开始直播
开始直播前必须先开始预览。源代码片段如下，仅供参考：

function doPublish() {var result = zg.startPublishingStream(publishStreamId, localVideo);if (!result) {alert("publish " + publishStreamId + " return " + result);}
}

5. 开始拉流
指定播放流的<video标签，画面会渲染在指定的标签里，streamid可于登录成功回调中取得。源代码如下，仅供参考:

function doPlay(streamId,video) {var result = zg.startPlayingStream(streamId, video);if (!result) {alert('哎呀，播放失败啦');video.style = 'display:none';console.error("play " + el.nativeElement.id + " return " + result);}
}

基于Zego-Web-SDK进行H5直播平台的构建，只需集成相关接口即可实现视频直播功能。Zego-Web-SDK与即构成熟的商用系统实现互连互通，在实现H5直播功能的同时，通过接入即构全球分发调度和智能路由系统，能满足用户低延时、高可用性和大规模分发的需求。

ZEGO：如何从零搭建H5直播平台相关推荐

架构 | 如何从零开始搭建高性能直播平台？
GitChat 作者:七夜前言现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实 ...
GitChat·架构 | 如何从零开始搭建高性能直播平台？
GitChat 作者:七夜前言现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实 ...
漫谈直播，从0认识直播并快速搭建专属直播平台
漫谈直播,从零开始认识直播并快速搭建专属直播平台 author:pasca time:2018/12/05 目录文章目录漫谈直播,从零开始认识直播并快速搭建专属直播平台目录一.直播科普 1.直 ...
音视频开发（23）---音视频直播技术--10分钟搭建好直播平台
音视频直播技术--10分钟搭建好直播平台前言今天给大家讲一下如何搭建最简单的音视频直播平台.在之前的文章中我已经给大家介绍过音视频直播技术架构,没看过的同学可以看一下.了解了直播的技术架构,我们就 ...
使用nginx搭建流媒体直播平台(该方式不适用与多人聊天)
一概要说明使用nginx搭建流媒体直播平台,目的就是要支持rtmp协议,实现用户使用rtmp(rtmp://192.168.201.128/myapp)协议推送流到服务器.然后其他用户点播该用户推 ...
vue+node.js手把手教你搭建一个直播平台（一）
上一期,帅气的小羽给老铁们简单介绍了项目的功能以及需要用到的一些环境和工具,现在就让我们荡起双桨,撸起袖子,准备开始敲代码啦!!! 先甩锅,小羽主要是搞前端开发的,所以这期张主要讲后端内容,可能讲的不 ...
如何从零开始搭建高性能直播平台？
本文转自https://segmentfault.com/a/1190000010724280 前言现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交 ...
GitChat · 架构 | 如何从零开始搭建高性能直播平台？
前言现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实时解盘,在线专家讲座,专家在 ...
axios下载图片 node_vue+node.js手把手教你搭建一个直播平台（二）
上一期,帅气的小羽给老铁们介绍了直播平台的项目的后端搭建,这期就让小羽带大家来搭建一下前端的框架. 1.创建前端工程毫无疑问,搭建一个项目的框架,那第一步肯定是得创建一个工程啦.cmd命令,输入vu ...

ZEGO：如何从零搭建H5直播平台

ZEGO：如何从零搭建H5直播平台相关推荐

最新文章

热门文章