前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >H5直播源码是什么?H5直播源码如何开发?

H5直播源码是什么?H5直播源码如何开发?

原创
作者头像
布谷鸟小刘
修改于 2021-03-04 09:44:35
修改于 2021-03-04 09:44:35
2.2K0
举报

H5直播源码是什么?

H5直播也有着一套完整的直播系统,含视频录制端、视频播放端、视频服务器端。H5直播,推流还是需要移动端或者摄像头,H5直播源码提供更多的依旧是观看,其实与传统直播系统是差不多的。

H5直播源码具有怎样的优势?

做品牌宣传的朋友都知道,H5是一个重要的表现方式。H5直播源码研发周期较短,尤其强化了web网页的表现性能。

除了微信之外,不少浏览器都可用H5观看视频,所以相对flash而言,不需要安装插件,所以传播更快。

H5相比flash而言,对CPU及内存的占用都要低一些,所以能够有效减少卡顿及发烫的现象。

想要搭建H5直播源码,WebRTC必不可少。

名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API。

WebRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单的javascript就可以达到实时通讯(Real-Time Communications (RTC))能力。

H5直播源码开发中的WebRTC,主要有以下几个优点:

具有良好的通用性,几乎在任何平台都可以正常使用。

其使用的Interactive Connectivity Establishment(ICE)能让各个设备之间自动匹配当前最好的通讯方式,这是很多别的技术都不具备的。

具备全双工的能力,即双向通讯(P2P),不仅可作为单向直播使用还能完成电子视频会议的双向音视频对话。

为Google旗下,具有良好的发展前景,最重要的:开源。

直播的大致流程:

APP端调用摄像头 -》 拍摄视频 -》 实时上传视频 -》 服务器端获取视频并解码 -》 存储成一小段一小段视频 -》 服务器端进行推流 -》 H5或者app端通过一个url拉取视频流进行播放

实际的直播和用户播放的直播会有10秒左右或者更高的延迟,这一点对于后面开发比较重要,一定要注意这个点。

怎么用H5直播源码开发直播功能

直播一共有三种状态:直播前,直播中,结束。

针对每个状态我们肯定会有不同的显示,这三种状态可以是三个页面,相互切换,或者一个页面,控制页面相关隐藏和显示。 可是我们怎么知道,我们可以用websocket,通过服务端的推送websocket广播,当获取到的直播状态和当前状态不同,便进行相应切换。

但是有时候可能因为暂时的网络原因或者其他原因,websocket的广播消息,我们并没有获取到。 所以可以让websocket间隔性的广播直播状态。

总之,通过H5直播源码搭建的直播系统不仅能够在网页实现高清流畅播放,还能加入很多的交互功能。是进行网页端直播、品牌宣传的有力工具之一。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Dev Club 分享】H5 视频直播那些事
Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾讯SNG Web前端开发工程师——吕鸣,为大家分享《H5 视频直播那些事》。 分享内容简介: 目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘。 内容大体框架: 怎样利用H5来播放直播视频 怎样录制直播视频 怎样实时上传
腾讯Bugly
2018/03/23
1.8K0
淘汰的RTMP、HTTP-FLV、HLS直播技术,拥抱互联网直播的未来--WEBRTC、WEBSOCKET
随着移动互联网时代的到来,各大互联网厂商和流媒体协议组织涌现出丰富多彩各种各样的直播流媒体协议,其中比较出名的经典流媒体协议有RTMP/RTSP/HTTP-FLV/HTTP-HLS/WEBRTC等,协议简介如下:
Openskeye
2023/03/29
2.3K0
关于h5直播源码的技术扫盲
到目前,h5似乎已经成为品牌宣传最重要的表现方式。h5技术开发简单,研发周期短,且成本低廉。尤其强化了web网页的表现性能,通过h5技术搭建的直播系统不仅能够在网页实现高清流畅播放,还能加入很多的交互功能。下面,我们就针对h5直播源码做一些技术扫盲。
云豹通讯员
2020/03/11
2K0
关于h5直播源码的技术扫盲
从0到1打造直播 App
概要 分享内容: 互联网内容载体变迁历程,文字——图片/声音——视频——VR/AR——…….。从直播1.0秀场时代(YY),2.0游戏直播(斗鱼、虎牙、熊猫)到如今全民直播3.0泛生活娱乐时代(映客、花椒),国外直播app(Meerkat 、Periscope),随着VA/AR/MR提出的沉浸式视听体验,直播4.0时代很快就能到来。 在这个全民娱乐的时代,直播已经火得不要不要的,各大公司都有自己的直播产品。本文主要从直播的一些基本知识,一步步打造直播app。直播那么火的背后有什么样的技术支撑呢? 先将这些A
腾讯Bugly
2018/03/23
3K2
SkeyeVSS综合安防视频云服务WEB H5无插件播放RTSP摄像机解决方案,拒绝插件,拥抱H5,Windows PC、 Liunx、 Android
视频流媒体监控行业已经进入了互联网时代,浏览器承载了绝大多数的互联网访问流量,如何在网页上播RTSP流,将RTSP转成互联网直播协议RTMP或者HLS?
Openskeye
2023/03/30
1.5K0
一文详解WebRTC、RTSP、RTMP、SRT
好多开发者,希望对WebRTC、RTSP、RTMP、SRT有个初步的了解,知道什么场景该做怎样的方案选择,本文就四者区别做个大概的介绍。
音视频牛哥
2024/09/27
3.9K0
一文详解WebRTC、RTSP、RTMP、SRT
SkeyeVSS综合安防视频云服务H5无插件直播点播实现HEVC H265低延迟播放
SkeyeVSS视频云支持HEVC/H265编码格式的摄像机直接接入,同时不需要后台转码,直接在WEB网页前端采用H5直接进行无插件播放;
Openskeye
2023/03/30
1.2K0
RTSP和RTMP协议有什么区别?RTSP为什么常用于安防监控摄像头行业,而视频直播却只使用RTMP推流?
RTSP(Real Time Streaming Protocol)是一种用于控制实时流媒体传输的网络协议。它允许客户端与服务器进行交互,控制流媒体的播放、暂停、停止、倒放、快进等操作。RTSP协议可以用于音频、视频等多种流媒体数据的传输。
csdn博主eguid_1
2024/01/25
5.8K0
HTML 5 视频直播一站式扫盲
视频直播这么火,再不学就 out 了。 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术。 1. H5 到底能不能做视频直播? 当然可以, H5 火了这么久,涵盖了各个方面的技术。 对于视频录制,可以使用强大的 webRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在 PC 的 chrome 上支持较好,移动端支持不太理想。 对于视频播放,可以使用 HLS(HTTP Live Stream
腾讯Bugly
2018/03/23
4.9K2
HTML 5 视频直播一站式扫盲
知识:视频流媒体播放的一些知识
内嵌 flash 的方式必须要有浏览器支持。这样的方式已经被各大浏览器放弃,在谷歌浏览器中已经不再支持flash。本文不再说明。
张云飞Vir
2021/05/06
1.8K0
全民直播时代——基于WebRTC开发实时通信服务
摘要 本次分享基于 WEBRTC 技术的实时通信服务的开发经验,希望通过这次分享能让大家对这方面更有兴趣。 什么是互动直播? 互动直播是多路音视频以及数据实时通信的解决方案。 首先看一下我们又拍云自己
IT大咖说
2018/04/04
1.9K0
全民直播时代——基于WebRTC开发实时通信服务
直播技术协议介绍
目前web前端采用的直播技术一般分为以下几类:rtp/rtcp、rtmp、http-flv、hls。下面介绍不同协议
IMWeb前端团队
2019/12/03
2.6K0
直播技术协议介绍
流媒体及直播相关知识
本文主要讲解流媒体及其直播相关知识,所涉及的知识内容比较浅显,主要是做个简单的了解。
Gnep@97
2023/09/23
7460
流媒体及直播相关知识
直播系统源码,直播软件源码,客户端的实现需要解决这些问题
看看电脑、翻翻手机,直播的应用越来越广,从 PC 端一直发展到移动端,对于大多数移动直播软件源码来说,还是要以 Native 客户端实现为主,而客户端的实现需要解决这些问题。
布谷鸟小刘
2021/06/01
1.6K0
H5玩法知多少
html5的发布让移动端web增添了很多新的能力,这些能力给我们带来了很多新的玩法,不知你知道了多少呢?下面我将结合案例罗列一些自H5发布以来出现的新玩法,给大家温故而知新。本文也适合大家在策划H5活动的时候作为参考,说不定在这儿就找到灵感了。 构思H5的玩法该从何入手呢?网上的H5五花八门,其玩法大多都可以归纳到基于传感器、基于触摸屏操作、基于画面呈现、基于内容这四类来考虑。它们既有基于其中一类来构思玩法,又有将多个类别组合起来创造更复杂丰富的玩法。与H5新能力相关的是前三种类型,本文也会从这三种类型进行
腾讯ISUX
2018/06/29
2.8K0
如何开发一款 H5 小程序直播?
大前端这几年算是一个热词,对于前段来说如果不是大前端,技术相对来说就已经算是落后了。如果还停留在对ES6,Vue这些基本技能的学习只能说处于一个及格线。
Nealyang
2021/01/14
3.8K0
如何开发一款 H5 小程序直播?
干货 | 携程移动直播探索
鹏程,携程 Android 开发工程师,Android google jetpack和kotlin语言的拥护者。
携程技术
2020/11/19
1.1K0
干货 | 携程移动直播探索
译:构建音视频直播应用需要考虑的12件事
近期看到一篇音视频技术周刊的一篇文章《12 Things to Consider When Building a Live Streaming App》,感觉写的还不错,是Red5官网挂出来的一篇博客,对设计、构建一个流媒体平台系统有一定的参考意义。这里简单翻译一下,以飨读者。其中Red5是一个采用Java开发的Flash流媒体服务器,与之对标的有Nginx-Rtmp、SRS和FMS等。
潇湘落木
2020/11/12
1.4K0
Web直播,你需要先知道这些
实际情况下,当用户数量很大时,对推流设备的性能要求很高,复杂的权限管理也难以实现,采用P2P的架构基本不可行。对于个别用户提供上行流、海量用户只进行拉流的场景,腾讯课堂实现了一种P2S的解决方案。进一步学习可阅读jaychen的系列文章《WebRTC直播技术》。
IMWeb前端团队
2019/12/03
2.2K0
Web直播,你需要先知道这些
从通信到AI FreeSWITCH与WebRTC
大家好,我是杜金房,此次分享和双向通讯服务器FreeSWITCH以及WebRTC有关。首先我会为大家简单介绍FreeSWITCH,鉴于FreeSWITCH主要用于通信领域,我也会介绍WebRTC并阐述FreeSWITCH与WebRTC的关系,同时结合FreeSWITCH的其他功能和使用场景与其功能以及所使用的多媒体库,进一步探索AI技术加持下FreeSWITCH的未来发展。
LiveVideoStack
2019/07/01
5K1
从通信到AI FreeSWITCH与WebRTC
推荐阅读
相关推荐
【Dev Club 分享】H5 视频直播那些事
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档