关于RTSP在HTML5前端播放问题解决办法
最近半个月,我一直在想办法将RTSP摄像头流放在HTML5中播放,期间研究过两种解决方式,在这里我就不说了,看到这篇文章的时候你们应该也多少了解了两种解决方案,不过都是收费的,L和E方法。
在文章最后我会提供我自己编写的一键启动RTSP摄像头到HTTP,只需在前端使用video标签即可播放
现在,我是利用vlc软件,将RTSP转成HTTP直接在前端利用 video 标签进行播放,前端代码可谓只需要一句即可
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video src="http://localhost:8111/live" style="width: 100%; height: 100%;">
</video>
</body>
</html>
在这之前,我们需要在打开VLC
选中媒体中的流
找到网络,输入RTSP地址点击串流
弹框点击下一步
第二个框中选择HTTP,然后点击右侧添加
输入一个想映射到的端口号,随便写一个路径(不写也可以,这里我习惯用live),点击下一个
配置文件选择OGG,点击下一个
最后一步不用管,点击流即可
在浏览器中打开刚才写的前端即可播放
video中src格式:http://{地址}:{映射到的端口号}/{路径(即我使用的live,没有可不写)}
就可以正常播放了
如果想加入暂停等功能,请查看html5-video文档
vlc播放器地址:
https://www.videolan.org/
前端文件及RTSP一键转流工具:https://download.csdn.net/download/qq_43231901/10862074
只需把摄像头.exe文件放在vlc目录中,管理员启动即可
联系方式:binoculus@vip.qq.com