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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 交通灯控制逻辑电路设计实验报告_交通灯控制电路的设计报告

    交通灯控制逻辑电路设计实验报告_交通灯控制电路的设计报告交通灯控制逻辑电路设计这是一个数电实验,交通灯,如果使用FPGA或者单片机来完成的话,会简单很多,这里采用的是使用常规的计数器,触发器,门电路等基本器件搭建,扩展部分可以完成总通行时间在100s内任意设置,红、黄、绿灯亮的时间长短之和在100s内任意设置,其实想要超过100s只需要扩展相应的计数器,以及门电路即可,限制功能的往往是资源;一、选题背景1.1、应用背景为了确保十字路口的车辆顺利、畅通地通过,往往都采用自动控制的交通信号灯来进行指挥。其中红灯(R)亮表示该条道路禁止通行;黄灯(Y)亮表示停

    2025年11月26日
    5
  • 通用 PE 工具箱1.9.6(XP内核)by Uepon(李培聪)[通俗易懂]

    通用 PE 工具箱1.9.6(XP内核)by Uepon(李培聪)[通俗易懂]通用PE工具箱1.9.6(XP内核)byUepon(李培聪)官网:http://hi.baidu.com/uepon?page=21.8版论坛帖子:http://bbs.wuyou.net/forum.php?mod=viewthread&tid=119749通用PE1.9.6介绍:http://hi.baidu.com/uepon/item/ceafeb322ba148b9633a…

    2022年7月14日
    28
  • MongoDB 索引详解

    MongoDB 索引详解索引能够提高数据库的查询效率,没有索引的话,查询会进行全表扫描(scan every document in a collection),严重降低了查询效率,故学会使用索引将是一项重要技能。

    2022年6月17日
    28
  • 编码 ansi_ansi编码和utf-8

    编码 ansi_ansi编码和utf-81、ANSI编码不是一个具体的字符集,而是对一些多字节字符集类型的字符集的一个总体的称呼,总称。(Windows)ANSI编码中的每一个代码页值就是对一个具体的多字节字符集类型的字符集的别名。例如,代码页936就是Windows系统对简体中文GBK这个字符集的别名。如果ANSI编码是一个具体的字符集,由于汉字和韩文字符都是它能表示的字符,那么里面写有韩文字符的以(Windo

    2025年11月12日
    4
  • opencv在电脑屏幕上画_opencv平滑处理?opencv 画实心圆?OpenCV繪圖的實作-cvCircle,cvEllipse,cvElli…

    opencv在电脑屏幕上画_opencv平滑处理?opencv 画实心圆?OpenCV繪圖的實作-cvCircle,cvEllipse,cvElli…你是否正在寻找关于cvcircle的内容?让我把最吸引人的东西奉献给你:转自:OpenCV繪圖的實作-cvcircle,cvEllipse,cvEllipseBox圓的製作,要給他目標圖片,圓心座標,半徑,其他參數等.cvcircle()函式的實作#include#includeIplImage*Image1;CvPointCircleCenter;intRadius;CvScalar…

    2022年7月24日
    13
  • mac如何卸载python_如何彻底卸载pycharm

    mac如何卸载python_如何彻底卸载pycharm小编的系统是MacOS10.15.4,之前是去官网下载安装了PyCharm2020.1.2,现在想把它完全卸载了,方法如下:1、打开访达-应用程序,找到PyCharm应用图标,右键移到废纸篓;2、清理缓存、参数以及日志相关配置文件:cd~/Library/Preferences/rm-rfJetBrains/PyCharm2020.1/cd~/Library/Logsrm-rfJetBrains/PyCharm2020.1/cd~/L…

    2022年8月29日
    3

发表回复

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

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