最近项目需要实时播放摄像头rtsp视频流,H5支持rtmp,不支持rtsp,只有通过插件或者转码来实现这个需求。网上有很多中解决方案,记录两种上手比较快的方案做个简单记录。

下载 vlc http://www.videolan.org/vlc/

(一)使用vlc播放器播放rtsp视频

1、下载安装完成之后打开vlc(安装过程省略)

媒体 ——>流

html5 播放flv 直播 html5播放rtmp_前端


选择网络——>输入rtsp url

html5 播放flv 直播 html5播放rtmp_前端_02


下面按钮默认是串流,选择播放,即可在vlc播放rtsp流

html5 播放flv 直播 html5播放rtmp_ide_03

如果要在Html播放 选择串流

html5 播放flv 直播 html5播放rtmp_应用程序_04


html5 播放flv 直播 html5播放rtmp_前端_05


选择端口 ——> 输入访问路径

html5 播放flv 直播 html5播放rtmp_应用程序_06


html5 播放flv 直播 html5播放rtmp_html_07


html5 播放flv 直播 html5播放rtmp_ide_08


显示路径说明配置成功

html5 播放flv 直播 html5播放rtmp_应用程序_09

网页显示

  • 注意资源地址,同一局域网下的要访问就需要把localhost改为转换软件运行电脑的ip地址:
<!DOCTYPE html>
<html lang="en">
<head>
	<title>rtspTest</title>
</head>
<body>
	<video src="http://localhost:8080/rtsp" width="350px" height="250px" controls="controls">
		
	</video>
</body>
</html>

html5 播放flv 直播 html5播放rtmp_应用程序_10

下载 Appemit和案例

(二)使用Appemit播放rtsp视频

概述

AppEmit是应用程序(尤其是浏览器)与本地程序之间相互通信的易扩展的轻量级中间件。主要采用了HTML5标准的Web套接字进行通话,只能为异步,JSON格式传递参数。

主要功能:

  • 在几乎所有浏览器中播放包含Flash的网页或Flash文件,包括swf互动动画,flv影视等
  • 在浏览器打开,操作本地文件,添加阅读PDF;创建,阅读,编辑Office文件,并支持JavaScript代码操作
  • 在浏览器中调用第三方DLL,OCX组件以及系统winApi函数,tcc,python,lua等
  • 开发本地硬件DLL驱动模块的封装插件,实现在网页中操作控制本地的读卡器,打印机,扫描仪,高拍仪,U盾等各种硬件设备
  • 各个应用程序之间通信,某些聊天
  • 在Chrome里嵌入IE内核网页,保护源码,可以不修改初始化的ActiveX读取html,同时支持开源内核wke和blink

程序名称

官方网址

Github

下载完成之后里边的Demo示例:

html5 播放flv 直播 html5播放rtmp_html5 播放flv 直播_11

文章仅用作分享记录,如有不当之处,还望指正。