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


相关推荐

  • 简单图文解释冯诺依曼体系结构(通俗易懂版)

    简单图文解释冯诺依曼体系结构(通俗易懂版)冯诺依曼式计算机主要由输入设备,输出设备,控制器,运算器,存储器该五个组成部分构成。我们可以将该体系结构的运作通过人类接收信息,处理信息,并输出信息这个过程来加以类比理解。人类:当眼睛看到某些信息,这些信息被存储到记忆装置,大脑从记忆装置取出信息,并加以思考运算,再放回记忆装置,大脑控制记忆装置将信息传输给嘴巴,将信息表达出来。(这个过程大脑的指令占领导地位)冯诺依曼计算机:当输入设备接收到数据,数据将被存储到存储器,控制器发出取数据和运算的指令,数据被取出方去放入运算器中加以运算,运算结束后,控制器

    2025年6月11日
    0
  • poweroff 命令_powercfg -h off 函数出了问题

    poweroff 命令_powercfg -h off 函数出了问题2019-02-17基础命令学习目录首页原文链接:https://www.cnblogs.com/Baron-Lu/p/6951297.html基础命令学习目录首页原文链接:https://w

    2022年8月1日
    4
  • 106. Construct Binary Tree from Inorder and Postorder Traversal「建议收藏」

    106. Construct Binary Tree from Inorder and Postorder Traversal「建议收藏」106. Construct Binary Tree from Inorder and Postorder Traversal

    2022年4月21日
    35
  • linux 入门学习 退出vi编辑器「建议收藏」

    linux 入门学习 退出vi编辑器「建议收藏」转载自:http://blog.csdn.net/u010648555/article/details/50676647初学Linux的时候,在使用vi操作时候,有时候可能进入的是一个文件夹,这样子在退出的时候很不好操作!下面总结一些vi退出命令,学习!进入编辑模式,按o进行编辑编辑结束,按ESC键跳到命令模式,然后输入退出命令::w保存文件但不退出vi编辑:…

    2022年9月1日
    2
  • WebView运行崩溃 Binary XML file line #8: Error inflating class android.webkit.WebView

    WebView运行崩溃 Binary XML file line #8: Error inflating class android.webkit.WebView

    2021年10月2日
    48
  • 2018阿里笔试题一道

    2018阿里笔试题一道八卦阵相传是由诸葛亮创设的一种战斗队形和兵力部署,由八种阵势组成。为了方便,采用矩阵来描述一个八卦阵,它由八个单阵组成,每个单阵由多个兵力区域组成形成一种阵势,如下图所示,其中数字为一个兵力区域的士兵个数。假设单阵与单阵之间兵力区域不会相邻,且单阵中每个兵力区域至少存在一个相邻兵力区域(注:相邻是指在其左上,正上,右上,右方,右下,正下,左下,左方与其相邻),请用最快的速度计算出八个单阵中的兵力(…

    2022年5月23日
    39

发表回复

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

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