分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

HTTP-FLV直播初探

发布时间:2023-09-06 01:25责任编辑:沈小雨关键词:暂无标签

目前几种视频流的简单对比:

协议

httpflv

rtmp

hls

dash

传输方式

http流

tcp流

http

http

视频封装格式

flv

flv tag

Ts文件

Mp4 3gp webm

延时

数据分段

连续流

连续流

切片文件

切片文件

Html5播放

可通过html5解封包播放(flv.js)

不支持

可通过html5解封包播放(hls.js)

如果dash文件列表是mp4webm文件,可直接播放

  • RTMP(Real Time Messaging Protocol)是基于TCP的,由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。

  • HLS(HTTP Live Streaming)是基于HTTP的,是Apple公司开放的音视频传输协议。

  • HTTP FLV则是将RTMP封装在HTTP协议之上的,可以更好的穿透防火墙等。

  

Http_flv & RTMP

这两个协议实际上传输数据是一样的,数据都是flv文件的tag。http_flv是一个无限大的http流的文件,相比rtmp就只能直播,而rtmp还可以推流和更多的操作。但是http有个好处,就是是以80http通信的,穿透性强,而且rtmp是非开放协议。

这两个协议是如今直播平台主选的直播方式,主要原因就是延时极低。

将测试:RTMP延迟1s左右,HTTPFLV延迟1-2s左右,可用于对延迟要求比较苛刻的场景,但要注意兼容性,文章最后会说明HTTPFLV兼容性。


HTTP FLV直播Demo:

<!DOCTYPE html><html><head> ???<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> ???<title>flv.js demo</title> ???<style> ???????.mainContainer { ???????????display: block; ???????????width: 1024px; ???????????margin-left: auto; ???????????margin-right: auto; ???????} ???????.urlInput { ???????????display: block; ???????????width: 100%; ???????????margin-left: auto; ???????????margin-right: auto; ???????????margin-top: 8px; ???????????margin-bottom: 8px; ???????} ???????.centeredVideo { ???????????display: block; ???????????width: 100%; ???????????height: 576px; ???????????margin-left: auto; ???????????margin-right: auto; ???????????margin-bottom: auto; ???????} ???????.controls { ???????????display: block; ???????????width: 100%; ???????????text-align: left; ???????????margin-left: auto; ???????????margin-right: auto; ???????????margin-top: 8px; ???????????margin-bottom: 10px; ???????} ???????.logcatBox { ???????????border-color: #CCCCCC; ???????????font-size: 11px; ???????????font-family: Menlo, Consolas, monospace; ???????????display: block; ???????????width: 100%; ???????????text-align: left; ???????????margin-left: auto; ???????????margin-right: auto; ???????} ???</style></head><body> ???????<div class="mainContainer"> ???????<video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay> ???????????Your browser is too old which doesn‘t support HTML5 video. ???????</video> ???</div> ???<script src="./flv.js?v=2"></script> ???????<script> ????????if (flvjs.isSupported()) { ???????????startVideo() ???????} ???????function startVideo(){ ???????????var videoElement = document.getElementById(‘videoElement‘); ???????????var flvPlayer = flvjs.createPlayer({ ???????????????type: ‘flv‘, ???????????????isLive: true, ???????????????hasAudio: true, ???????????????hasVideo: true, ???????????????enableStashBuffer: true, ???????????????url: ‘https://xl.live-play.acgvideo.com/live-xl/520658/live_12860646_332_c521e483.flv?wsSecret=778d91efcb22c588be28cb67ebe57082&wsTime=1510929009‘ ???????????}); ???????????flvPlayer.attachMediaElement(videoElement); ???????????flvPlayer.load(); ???????????flvPlayer.play(); ???????} ???????videoElement.addEventListener(‘click‘, function(){ ???????????alert( ‘是否支持点播视频:‘ + flvjs.getFeatureList().mseFlvPlayback + ‘ 是否支持httpflv直播流:‘ + flvjs.getFeatureList().mseLiveFlvPlayback ) ???????}) ???????function destoryVideo(){ ???????????flvPlayer.pause(); ???????????flvPlayer.unload(); ???????????flvPlayer.detachMediaElement(); ???????????flvPlayer.destroy(); ???????????flvPlayer = null; ???????} ???????function reloadVideo(){ ???????????destoryVideo() ???????????startVideo() ???????} ???</script> ???</body></html>

flv.js问题:(暂时发现这几个)

1. 播放一段时间后,音视频不同步

2. 播放一段时间后,音频模糊

3. 暂停后继续播放是接着暂停时的场景继续播,对于直播会产生延迟 =》 临时解决方案:暂停后继续播放时,手动销毁视频再重新加载播放

4. 手机端兼容性差

 --------------------------------------------

1,2 问题解决方案:

尝试设置 config.fixAudioTimestampGap = false

控制台将不会输出大量警告信息。

经检测,不同的推流客户端,会导致音视频同步问题有不一样的体现。

LFLiveKit 的音频流时间戳问题,定期会有两帧之间存在两倍时间戳差,会导致严重音画不同步。

目前在我们平台,ios客户端音视频均同步,安卓客户端音视频不同步,需要设置flvjs的config.fixAudioTimestampGap = false才会音视频同步。

github issue:https://github.com/Bilibili/flv.js/issues/136

----------------------------------------------

判断flv.js在手机端是否支持点播和httpflv直播:

是否支持点播视频:flvjs.getFeatureList().mseFlvPlayback

是否支持httpflv直播流:flvjs.getFeatureList().mseLiveFlvPlayback 

目前测试结果:

ios :均不支持,包括微信和safari

安卓:微信均不支持;其他浏览器部分支持点播,全部不支持直播

HTTP-FLV直播初探

原文地址:http://www.cnblogs.com/saysmy/p/7851911.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved