三种主流流协议的浏览器播放解决方案

三种主流流协议的浏览器播放解决方案

流协议介绍

主流的流协议（streaming protocol）包括HLS、RTMP、RTSP，下面依次介绍下三种视频流。

HLS

HLS（Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中， 可以将不同速率的版本切成相应的片；播放器可以直接使用http协议请求流数据。

优势：

  • 可以在不同速率的版本间自由切换，实现无缝播放
  • 省去使用其他协议的烦恼

劣势:

  • 延迟大小受切片大小影响，不适合直播，适合视频点播。
  • 实时性差，延迟高。HLS 的延迟基本在 10s+ 以上
  • 文件碎片。特性的双刃剑，ts 切片较小，会造成海量小文件，对存储和缓存都有一定的挑战

RTMP

RTMP（Real Time Message Protocol）由 Adobe 公司提出流媒体协议，并且是私有协议，未完全公开，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题，RTMP协议一般传输的是 flv，f4v 格式流。一般在 TCP 1个通道上传输命令和数据。

优势：

  • 在于低延迟，稳定性高，支持所有摄像头格式
  • 专为流媒体开发的协议，对底层的优化比其它协议更加优秀

劣势：

  • 浏览器需要加载 flash插件才能播放。
  • RTMP 为 Adobe 私有协议，很多设备无法播放，特别是在 iOS 端，需要使用第三方解码器才能播放
  • 基于 TCP 传输，非公共端口，可能会被防火墙阻拦

RTSP

RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的流媒体协议，RTSP协议是共有协议，并有专门机构做维护。是TCP/IP协议体系中的一个应用层协议. RTSP协议一般传输的是 ts、mp4 格式的流，RTSP传输一般需要 2-3 个通道，命令和数据通道分离。基于文本的多媒体播放控制协议. RTSP定义流格式，流数据经由RTP传输；

优势:

  1. RTSP实时效果非常好，适合视频聊天，视频监控等方向。

劣势：

  1. 浏览器不能直接播放，只能通过插件或者转码

播放解决方案

HLS与RTMP的播放解决方案

一、使用原生video

如果仅需要在移动设备的WebView上播放，我们可以选择使用html中嵌入hls播放。如下html能够在所有Safari或者安卓3.0以上的WebView上播放。这样就不需要使用第三方的播放器。

<html lang="en"><head><meta charset=utf-8/></head><body><div id='player'><video width="640" height="320" controls><source src="http://10.10.5.119/live/livestream.m3u8" type="application/x-mpegURL"></video></div></body>
</html>

缺点：

  1. 原生H5支持的媒体格式主要有MP4、OGG、WebM、M3U8
  2. M3U8格式播放在pc端浏览器上支持兼容性差
  3. 无法播放rtmp流的视频，因为原生不支持flv

优点：

  1. 使用原生video，不用安装第三方插件

二、使用flv.js

flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据，使浏览器在不借助Flash的情况下播放FLV成为可能.

import React, { PureComponent } from 'react';
import Reflv from 'reflv';export class HttpFlv extends PureComponent {render() {return (<Reflvurl={`http://localhost:7001/live/test.flv`}type="flv"isLivecors/>)}
}

缺点：

  1. 录播，依赖 原生HTML5 Video标签 和 Media Source Extensions API
  2. 直播，依赖录播所需要的播放技术，同时依赖 HTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中HTTP FLV需通过流式IO去拉取数据，支持流式IO的有fetch或者stream
  3. 由于依赖Media Source Extensions，目前所有iOS和Android4.4.4以下里的浏览器都不支持，也就是说目前对于移动端flv.js基本是不能用的。

优点：

  1. 由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清
  2. 同时支持录播和直播
  3. 去掉对Flash的依赖

三、video.js

video.js可以支持网页在所有的浏览器播放，免费的使用很多高级功能。这两种视频流的播放可以使用video.js，由于前端使用react开发，因此需要安装_video.js。_在进行两种不同流播放时需要注意的是设置不同的type,播放rtmp时type是 rtmp/flv，播放hls时type是 application/x-mpegURL。两种视频流都是基于flash的，因此需要flash的支持。

class VideoPlayer extend Component {constructor(props) {super(props);this.VideoOptions = {autoplay: true,controls: false,sources: [{src: url,type: "application/x-mpegURL"}],fluid: 'true',playbackRates: [0.75, 1, 1.5, 2]}}componentDidMount() {this.player = videojs(this.videoNode, this.VideoOptions, function onPlayerReady() { })}componentWillUnmount() {if (this.player) {this.player.dispose()}}render(){return (<videoref={node => this.videoNode = node}className='video-js vjs-16-9'/>)}
}

缺点：

  1. 依赖flash
  2. 不支持rtsp流的播放

优点：

  1. 它是开源免费的，你可以在github很容易的获取它的最新代码。
  2. 使用它非常的容易，只要花几秒钟就可以架起一个视频播放页面。
  3. 它几乎兼容所有的浏览器，并且优先使用html5，在不支持的浏览器中，会自动使用flash进行播放。
  4. 界面可以定制，纯javascript和css打造。说明文档也非常的详细

RTSP流播放解决方案

一、利用VLC插件转流

浏览器安装VLC插件进行服务器映射转码，得到video标签能够正常打开的ogg格式视频然后播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410"><param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' /><param name='volume' value='50' /><param name='autoplay' value='true' /><param name='loop' value='false' /><param name='fullscreen' value='false' /><param name='controls' value='false' />
</object>

优缺点

  • 优点： 可以直接播放RTSP，无需任何中介服务器的帮助
  • 缺点： 需要手动安装插件； 基于NPAPI，不被最新的 Chrome 和 Firefox 支持
  • 如果你项目的其他功能都能兼容客户电脑上的 IE 浏览器，这个方案就是首选。

二、html5_rtsp_player+ websocket_rtsp_proxy 实现视频流直播

实现步骤

  1. 服务器安装streamedian服务器

  2. 客户端通过video标签播放

<video id="test_video" controls autoplay></video>
<script src="free.player.1.8.4.js"></script>
<script>if (window.Streamedian) {var errHandler = function(err){console.log('err', err.message);};var infHandler = function(inf) {console.log('info', inf)};var playerOptions = {socket: "ws://localhost:8088/ws/",redirectNativeMediaErrors : true,bufferDuration: 30,errorHandler: errHandler,infoHandler: infHandler};var html5Player  = document.getElementById("test_video");html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";var player = Streamedian.player('test_video', playerOptions);window.onbeforeunload = function(){player && player.destroy();player = null;Request = null;}}
</script>

注意：测试时先从官网申请license key，否则socket 只能识别localhost和127.0.0.1

优缺点

  • 优点：实现比较简单
  • 缺点：收费的，免费版有很多限制

三：ffmpeg + nginx + video，rtsp转rtmp播放

网络摄像头采集端一般提供的是RTSP协议

rtmp是adobe开发的协议，一般使用adobe media server 可以方便的搭建起来；随着开源时代的到来，有大神开发了nginx的rtmp插件，也可以直接使用nginx实现rtmp

rtmp方式的最大的优点在于低延时，经过测试延时普遍在1-3秒，可以说很实时了；缺点在于它是adobe开发的，rtmp的播放严重依赖flash，而由于flash本身的安全，现代浏览器大多禁用flash

实现步骤

  1. 安装ffmpeg工具

  2. 安装nginx 注意：linux系统需要安装 nginx-rtmp-module 模块，Windows系统安装包含rtmp的(如nginx 1.7.11.3 Gryphon)

  3. 更改nginx配置

    rtmp{server{listen 1935;application live{live on;record off;}application hls{live on;hls on;hls_path nginx-rtmp-module/hls;hls_cleanup off;}}
}

  4. ffmpeg转码

    ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"

  5. video 播放

    <html>
<head>
<title>video</title>
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />
</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay><source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>
</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"var player = videojs('test_video', {"autoplay":true});player.play();
</script>

注意：使用谷歌浏览器播放时，需要开启flash允许

四：ffmpeg + video，rtsp转hls播放

HLS (HTTP Live Streaming) 直播 是有苹果提出的一个基于http的协议。其原理是把整个流切分成一个个的小视频文件，然后通过一个m3u8的文件列表来管理这些视频文件

HTTP Live Streaming 并不是一个真正实时的流媒体系统，这是因为对应于媒体分段的大小和持续时间有一定潜在的时间延时。在客户端，至少在一个分段媒体文件被完全下载后才能够开始播放，而通常要求下载完两个媒体文件之后才开始播放以保证不同分段音视频之间的无缝连接。

此外，在客户端开始下载之前，必须等待服务器端的编码器和流分割器至少生成一个TS文件，这也会带来潜在的时延。

服务器软件将接收到的流每缓存一定时间后包装为一个新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的几个片段的索引，以保证观众任何时候连接进来都会看到较新的内容，实现近似直播的效果。

这种方式的理论最小延时为一个ts文件的时长，一般为2-3个ts文件的时长。

实现步骤

  1. 安装ffmpeg工具

  2. ffmpeg转码

    ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"

    • -hls_time n: 设置每片的长度，默认值为2。单位为秒

    • -hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5

    • -hls_wrap n:设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量

    • -hls_start_number n:设置播放列表中sequence number的值为number，默认值为0

  3. video 播放

    <html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />
</head>
<body>
<div class="videoBox"><video id="my_video_1" class="video-js vjs-default-skin" controls><source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> </video>
</div>
</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"var player = videojs('my_video_1', {"autoplay":true});player.play();
</script>

五、jsmpeg + ffmpeg

JSMpeg是一个用JavaScript编写的视频播放器。它由MPEG-TS分路器，MPEG1视频和MP2音频解码器，WebGL和Canvas2D渲染器以及WebAudio声音输出组成。JSMpeg可以通过Ajax加载静态视频，并允许通过WebSockets发送MPEG，前端通过js解析MPEG不断绘制canvas，包括音频。JSMpeg可以在iPhone 5S上以30fps解码720p视频，适用于任何现代浏览器（Chrome，Firefox，Safari，Edge）。

简单示例：

<script src="jsmpeg.min.js"></script>
<div class="jsmpeg" data-url="video.ts"></div>

六、WebRTC

WebRTC 是支持网页浏览器进行实时音视频的一套API，例如：HTML5 通过 webRTC 直接调用摄像头，但是如果要实现远程视频流的显示，则需要将 RTSP 转换为 WebRTC 流，供 web 端显示。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/328922.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【前端设计】文字聚光灯

【前端设计】文字聚光灯

欢迎来到前端设计专栏&#xff0c;本专栏收藏了一些好看且实用的前端作品&#xff0c;使用简单的html、css语法打造创意有趣的作品&#xff0c;为网站加入更多高级创意的元素。 案例 文字聚光灯效果可以用于网站标题 html <!DOCTYPE html> <html lang"en&quo…
阅读更多...
【霹雳吧啦】手把手带你入门语义分割の番外12：U2-Net 源码讲解（PyTorch）—— 网络的搭建

【霹雳吧啦】手把手带你入门语义分割の番外12：U2-Net 源码讲解（PyTorch）—— 网络的搭建

目录 前言 Preparation 一、U2-Net 网络结构图 二、U2-Net 网络源代码 1、model.py &#xff08;1&#xff09;ConvBNReLU 类 &#xff08;2&#xff09;DownConvBNReLU 类 &#xff08;3&#xff09;UpConvBNReLU 类 &#xff08;4&#xff09;RSU 类 & RSU4F 类…
阅读更多...
并发（5）

并发（5）

目录 26.说说final类型的类如何扩展&#xff1f; 27.final方法可以被重载吗&#xff1f; 28.父类的final方法能不能被子类重写&#xff1f; 29.说说基本类型的final域重排序规则&#xff1f; 30.说说final的原理&#xff1f; 26.说说final类型的类如何扩展&#xff1f; 比…
阅读更多...
IDEA 每次新建工程都要重新配置 Maven的解决方案

IDEA 每次新建工程都要重新配置 Maven的解决方案

文章目录 IDEA 每次新建工程都要重新配置 Maven 解决方案一、选择 File -> New Projects Setup -> Settingsfor New Projects…二、选择 Build,Execution,Deployment -> Build Tools -> Maven IDEA 每次新建工程都要重新配置 Maven 解决方案 DEA 每次新建工程都要…
阅读更多...
STM32之模拟IIC总线控制SHT20温湿度芯片

STM32之模拟IIC总线控制SHT20温湿度芯片

一、IIC总线概述 1、IIC总线介绍 I2C (Inter&#xff0d;Integrated Circuit)总线产生于在80年代&#xff0c; 由PHILIPS公司开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备, 最初为音频和视频设备开发。I2C总线两线制包括&#xff1a;串行数据SDA&#xff08…
阅读更多...
基于JAVA的服装店库存管理系统 开源项目

基于JAVA的服装店库存管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 服装档案模块2.4 服装入库模块2.5 服装出库模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 角色表3.2.2 服装档案表3.2.3 服装入库表3.2.4 服装出库表 四、系统展示五、核心代码5.…
阅读更多...
大数据分析案例-基于LinearRegression回归算法构建房屋价格预测模型

大数据分析案例-基于LinearRegression回归算法构建房屋价格预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
JS事件循环

JS事件循环

目录 概述1. 堆栈&#xff08;Call Stack&#xff09;2. 堆&#xff08;Heap&#xff09;3. 事件队列&#xff08;Event Queue&#xff09;4. 宿主环境&#xff08;Host Environment&#xff09; 事件循环&#xff08;Event Loop&#xff09;微任务和宏任务&#xff08;Microta…
阅读更多...
王国维的人生三境界，这一生至少当一次傻瓜

王国维的人生三境界，这一生至少当一次傻瓜

一、人生三境界 古今之成大事业、大学问者&#xff0c;必经过三种之境界。“昨夜西风凋碧树&#xff0c;独上高楼&#xff0c;望尽天涯路。”此第一境也。“衣带渐宽终不悔&#xff0c;为伊消得人憔悴。”此第二境也。“众里寻他千百度&#xff0c;蓦然回首&#xff0c;那人却…
阅读更多...
阿里云服务器地域怎么选择？2024地域选择方法

阿里云服务器地域怎么选择？2024地域选择方法

阿里云服务器地域和可用区怎么选择&#xff1f;地域是指云服务器所在物理数据中心的位置&#xff0c;地域选择就近选择&#xff0c;访客距离地域所在城市越近网络延迟越低&#xff0c;速度就越快&#xff1b;可用区是指同一个地域下&#xff0c;网络和电力相互独立的区域&#…
阅读更多...
Windows11下载安装nacos(2.3.0)详解

Windows11下载安装nacos(2.3.0)详解

一、环境要求 windows7以上 jdk8及以上版本&#xff0c;并且配置了JAVA_HOME环境变量 二、nacos下载解压 release版本地址:Releases alibaba/nacos GitHub 下载后解压即可&#xff0c;上面的tar.gz是linux版本 解压后如下 nacos自己内置有数据库derby&#xff0c;我用的是…
阅读更多...
Java技术栈 —— Hadoop入门（一）

Java技术栈 —— Hadoop入门（一）

Java技术栈 —— Hadoop入门&#xff08;一&#xff09; 一、Hadoop第一印象二、安装Hadoop三、Hadoop解析3.1 Hadoop生态介绍3.1.1 MapReduce - 核心组件3.1.2 HDFS - 核心组件3.1.3 YARN - 核心组件3.1.4 其它组件3.1.4.1 HBase3.1.4.2 Hive3.1.4.3 Spark 一、Hadoop第一印象…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023