视频流
1.直播与点播
- 点播:从后端请求到MP4视频,前端把地址放在video的src中实现播放
- 直播:1.获取的是流数据2.要求实时性
2.视频流形式
- RTSP转RTMP
底层基于 TCP,在浏览器端依赖 Flash,但是从2020底年开始,谷歌已经带头不支持flash插件了
- RTSP转HLS 1. 后端将视频转成HLS流,以m3u8后缀结尾。通过浏览器用video.js可以正常播放,但是致命缺点是延迟高(10~30 秒),不符合项目的实时性需求,所以有实时视频的需求不建议用HLS流播放。
- RTSP转FLV 1. flv 分为 HTTP-FLV 和 WebSocket-FLV ,两种方式都可,具体看需求
3.flv.js与mpegts.js
经过以上的分析,现阶段最适合最直播业务的为flv流,而它的缺点是前端 video 标签不能直接播放,需要经过处理才行。不过没关系,我们有flv.js!
flv.js是一个较成熟的前端处理flv格式的插件库,是B站视频的开源插件。下面为示例代码:
import flvjs from'flv.js'if(flvjs.isSupported()){var videoPlayer = document.getElementById('video')var flvPlayer = flvjs.createPlayer({type:'flv',url:'http://test.stream.com/fetch-media.flv'})
flvPlayer.attachMediaElement(videoPlayer)
flvPlayer.load()
flvPlayer.play()}
但是flv依旧存在很多问题,比如浏览器兼容性问题,flv只支持包含 Chrome, FireFox, Safari 10, IE11, Edge版本的浏览器,对于Safari更高版本的浏览器是不提供支持的,且不能再ios上播放,而且对于实时性要求更高的需求,flv延迟还是显得高了些,所以flv的作者xqq在后续推出了mpegts.js,是在flv的基础上进行了优化,最佳情况下能达到 1 秒的极低延迟,且支持 Chrome、FireFox、Safari、Edge(旧版或 Chromium)或任何基于 Chromium 的浏览器,api也可以沿用flv.js的
<script src="mpegts.js"></script><video id="videoElement"></video><script>if(mpegts.getFeatureList().mseLivePlayback){var videoElement = document.getElementById('videoElement');var player = mpegts.createPlayer({type:'mse',// could also be mpegts, m2ts, flvisLive:true,url:'http://example.com/live/livestream.ts'});
player.attachMediaElement(videoElement);
player.load();
player.play();}</script>
4.异常处理
// 监听错误事件
flvPlayer.on(flvjs.Events.ERROR,(err, errdet)=>{// 参数 err 是一级异常,errdet 是二级异常if(err == flvjs.ErrorTypes.MEDIA_ERROR){
console.log('媒体错误')if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED){
console.log('媒体格式不支持')}}if(err == flvjs.ErrorTypes.NETWORK_ERROR){
console.log('网络错误')if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID){
console.log('http状态码异常')}}if(err == flvjs.ErrorTypes.OTHER_ERROR){
console.log('其他异常:', errdet)}})
版权归原作者 欣欣向荣q77 所有, 如有侵权,请联系我们删除。