ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何建立HTML5直播?

2021-12-01 18:03:12  阅读:200  来源: 互联网

标签:播放器 视频 视频流 如何 直播 HTML5 播放 RTMP


做视频直播的朋友都知道,目前网页比较主流的视频直播协议是HLS协议和RTMP协议,移动端由于需要比较高的传输需求,所以以HLS传输为主,而PC端则更加注重视频的实时传输,因此以RTMP为主。

image.png

对于HTML5直播来说,直播流程大体分为三个部分:

  • 视频采集:这个部分分为也分为PC端和手机端,包括电脑上的音视频输入设备,比如摄像头录像、手机的摄像头麦克风等,由于移动直播队伍的壮大,目前主要的采集还是以移动端手机视频为主。
  • 直播流视频服务端:也就是我们讲的视频流媒体服务器,采集视频录制端传输的视频流(H264/ACC编码),通过流媒体服务器进行转码,并输出RTMP/HLS格式视频流至视频播放端。
  • 视频播放端:一般在电脑端我们TSINGSEE青犀视频用的比较多的是VLC播放器,此外还有我们自行研发的EasyPlayer播放器,手机播放器包括native播放器,还有就是H5的video标签等,目前还是以手机端的native播放器为主。

JS.png

对于H5视频录制,可以使用强大的WebRTC技术。Webrtc我们之前也介绍过,是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在PC的Chrome上支持较好,移动端支持不太理想。目前TSINGSEE青犀视频各大视频服务平台都支持了WebRTC视频流的播放,大家可以了解一下。

WebRTC.png

使用WebRTC录制视频基本流程:

① 调用window.navigator.webkitGetUserMedia()获取用户的PC摄像头视频数据。

② 将获取到视频流数据转换成 window.webkitRTCPeerConnection (一种视频流数据格式)。

③ 利用WebScoket将视频流数据传输到服务端。

H5播放视频也有需要我们进一步突破的地方,首先就是播放HLS视频时的卡顿问题,server端可以做好分片策略,将ts文件放在CDN上,前端可尽量做到DNS缓存,此外,为了能够更好实现实时互动,也可以采用RTMP协议,通过video.js播放,比如TSINGSEE青犀视频EasyPlayer.JS播放器。

标签:播放器,视频,视频流,如何,直播,HTML5,播放,RTMP
来源: https://blog.csdn.net/TsingSee/article/details/121660944

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有