html播放rtsp流,浏览器播放rtsp视频流解决方案

html播放rtsp流,浏览器播放rtsp视频流解决方案最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究。而浏览器不能直接播放,只有通过插件或者转码来实现这个需求。要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一些开源的方案。这里的方案都是我尝试过了的,有些成功,有些没成功。但是因为每个项目情况不同,这次没成的方法,换个项目也许就能成。方案一:html5+websocket_rtsp_proxy实现视频…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究。而浏览器不能直接播放,只有通过插件或者转码来实现这个需求。

要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一些开源的方案。这里的方案都是我尝试过了的,有些成功,有些没成功。但是因为每个项目情况不同,这次没成的方法,换个项目也许就能成。

方案一: html5 + websocket_rtsp_proxy 实现视频流直播

实现原理

51fc14174e542e52d34e52d3ba41e7e6.png

实现步骤

服务器安装streamedian服务器

客户端通过video标签播放

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;

}

}

复制代码

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

优缺点

优点:实现比较简单

缺点:收费的,免费版有很多限制

参考链接

方案二:ffmpeg + nginx + video,rtsp转rtmp播放

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

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

实现步骤

注意: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;

}

}

}

复制代码

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”

复制代码

video 播放

video

var player = videojs(‘test_video’, {“autoplay”:true});

player.play();

复制代码

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

参考链接

方案三:ffmpeg + video,rtsp转hls播放

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

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

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

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

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

实现步骤

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”

复制代码

ffmpeg 关于hls方面的指令说明

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

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

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

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

video 播放

video

var player = videojs(‘my_video_1’, {“autoplay”:true});

player.play();

复制代码

参考链接

方案四:VLC插件播放

播放步骤

下载安装vlc

浏览器播放

复制代码

优缺点

优点: 可以直接播放RTSP,无需任何中介服务器的帮助

缺点: 需要手动安装插件; 基于NPAPI,不被最新的 Chrome 和 Firefox 支持

如果你项目的其他功能都能兼容客户电脑上的 IE 浏览器,这个方案就是首选。

参考链接

其他方案

WebRTC

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

h5stream

参考地址:

GB28181

参考地址:

写的不清楚的地方,请自行百度,网上案例很多,有什么建议可以随时提出来交流!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180960.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Celer Network月报 202107

    Celer Network月报 202107Celer技术研发更新 cBridgev1开发完成,主网上线,运行良好 cBridgev2开始研发,新增智能费率与流动性调节功能 Layer2.finance测试网成功运行,完成所有相关问题修复与功能改进 正在进行多项Layer2.finance的策略开发工作 SGN主网技术支持,现已有10个验证节点上线 Celer社区建设及市场活动社区动态更新本月重点事件Layer2.financev1.0版本测…

    2022年5月17日
    62
  • SqlTransaction 数据库编程事务使用示例

    SqlTransaction 数据库编程事务使用示例在提交或回滚SqlTransaction时,应始终使用Try/Catch进行异常处理。如果连接终止或事务已在服务器上回滚,则Commit和Rollback都会生成InvalidOperationException。 下面的示例创建一个SqlConnection和一个SqlTransaction。此示例还演示如何使用BeginTransaction、Commit和…

    2022年5月23日
    32
  • android开发之GPS定位详解

    一、LocationManagerLocationMangager,位置管理器。要想操作定位相关设备,必须先定义个LocationManager。我们可以通过如下代码创建LocationManger对象。LocationManger locationManager=(LocationManager)this.getSystemService(Context.LOCATION_SERVICE

    2022年3月10日
    44
  • 常见的基本汇编书籍有哪些_简单点的汇编书籍

    常见的基本汇编书籍有哪些_简单点的汇编书籍Windows.环境下32位汇编语言程序设计(第2版) http://www.happycampus.cn/docs/957100583237@hc10/275980/ 汇编语言编程艺术 Intel汇编语言程序设计(第四版) Intel汇编语言程序设计(第五版)范例 http://download.csdn.net/source/1523425 

    2022年10月13日
    4
  • AutoEventWireup解释

    AutoEventWireup解释这一事件聚合了当前页是否自动关联某些特殊事件。首先,从浏览器页面出发的事件不能立刻在本地得到处理,而是POST至服务器上,因此,asp.net建立了委托(代理)机制。在建立一个事件的同事,建立相应的委托。privatevoidInitializeComponent(){<spanstyle=”white-space:pre”> </span>t…

    2022年5月8日
    38
  • 不是单组分组函数「建议收藏」

    不是单组分组函数「建议收藏」问题:一:SELECT tablespace_name, SUM(bytes) freeFROM dba_free_space不是单组分组函数原因: 1、如果程序中使用了分组函数,则有两种情况可以使用:程序中存在group by,并指定了分组条件,这样可以将分组条件一起查询出来改为:  SELECT tablespace_name, SUM(bytes) freeFROM dba_free_spa…

    2022年6月30日
    31

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号