网页中播放RTSP(1)

1.在网页中播放

参考：网页播放rtsp视频流

里面的前两种方法就是装插件,vlc player和quicktime ，第三者方法说是不需要装插件，实际上是装的服务端，关键是我注册时邮箱没发我，无法继续测试下去。

参考：七种转化RTSP屏显示到web页面的方法(csdn) 或者http://blog.sina.cn/dpool/blog/s/blog_145f07e7b0102xe0z.html

都不是直接在网页播放的，而是转换成RTMP，webRTC，HLS，WebSocket，再通过网页播放的。

这样看来，网页是无法直接播放rtsp的了。

2.通过VLC转HTTP播放

使用VLC串流的功能

参考：用VLC搭建简单的流媒体服务器

这里是把文件转到rtsp播放。

结果：

:sout=#transcode{vcodec=h264,acodec=mpga,ab=128,channels=2,samplerate=44100,scodec=none}:duplicate{dst=rtp{sdp=rtsp://:8554/test},dst=display} :sout-all :sout-keep

右侧在转流，左侧在播放。转流结束了，播放就结束了。

参考：vlc rtsp流转 http播放视频

右下角转码，左侧播放，可以把摄像头转换到http播放。不过打开慢，播放也延迟严重，5-10s的延迟。

http://localhost:8080/test和http://192.168.1.16:8080/test和http://127.0.0.1:8080/test都是可以播放的，在vlc里面。

但是在网页中还是无法播放，碰到cors问题。

3.通过ffmpeg转hls

参考：https://blog.csdn.net/supercrsky/article/details/81333430

ffmpeg -f rtsp -rtsp_transport tcp -i "rtsp://admin:admin12345@192.168.1.56/h264/ch1/main/av_stream" -strict -2 -c:v libx264 -vsync 2 -c:a aac -f hls -hls_time 4 -hls_list_size 5 -hls_wrap 10 D:/SoftwareProjects/GitHub/LocationSystem/Server/WCFServer/LocationWCF/bin/Debug/nginx-1.7.11.3-Gryphon/temp/hls_temp/test.m3u8

用http://127.0.0.1:9099/live/test.m3u8播放，html代码是

<html lang="en"><head><meta charset=utf-8/></head><body><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>if(Hls.isSupported()) {var video = document.getElementById('video');var hls = new Hls();//hls.loadSource('http://127.0.0.1:9099/live/a.m3u8');//可以hls.loadSource('http://192.168.1.16:9099/live/test.m3u8');//可以//hls.loadSource('http://127.0.0.1:9099/live/download/1.mp4');//不行，没反应//hls.loadSource('http://192.168.1.16:9099/live/download/1.mp4');//不行//hls.loadSource('rtsp://admin:admin12345@192.168.1.56:554/cam/realmonitor?channel=1&subtype=0');//不行，hls.js@latest:1 Access to XMLHttpRequest at 'rtsp://admin:admin12345@192.168.1.56:554/cam/realmonitor?channel=1&subtype=0' from origin 'http://192.168.1.16' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED,function() {video.play();});}
</script></body>
</html>

可以播放，但是视频的内容不知最新的。差了1分钟。

前面的hls.js在chrome里面播放时只有一个首页，无法正常播放，找到一个video.js。能够在chrome里面播放m3u8视频

参考：https://www.cnblogs.com/saysmy/p/6429835.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><meta name="wap-font-scale" content="no"><title>videojs支持hls直播实例</title><link href="./video.css?v=bcd2ce1385" rel="stylesheet"><style type="text/css">video{display: block;width: 100%;height: auto;border: 1px solid;}button{width: 150px;height: 50px;line-height: 50px;text-align: center;margin:30px auto;display: block;}</style>
</head>
<body><video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto"><source src="http://127.0.0.1:9099/live/test.m3u8"  type="application/x-mpegURL"></video><button id="btn">play</button><script src="./video.js?v=fc5104a2ab23"></script><script src="./videojs-contrib-hls.js?v=c726b94b9923"></script><script type="text/javascript">var myPlayer = videojs('roomVideo',{bigPlayButton : false,textTrackDisplay : false,posterImage: true,errorDisplay : false,controlBar : false},function(){console.log(this)this.on('loadedmetadata',function(){console.log('loadedmetadata');//加载到元数据后开始播放视频startVideo();})this.on('ended',function(){console.log('ended')})this.on('firstplay',function(){console.log('firstplay')})this.on('loadstart',function(){//开始加载console.log('loadstart')})this.on('loadeddata',function(){console.log('loadeddata')})this.on('seeking',function(){//正在去拿视频流的路上console.log('seeking')})this.on('seeked',function(){//已经拿到视频流,可以播放console.log('seeked')})this.on('waiting',function(){console.log('waiting')})this.on('pause',function(){console.log('pause')})this.on('play',function(){console.log('play')})});document.getElementById('btn').addEventListener('click', function(){myPlayer.play();})var isVideoBreak;function startVideo() {myPlayer.play();//微信内全屏支持document.getElementById('roomVideo').style.width = window.screen.width + "px";document.getElementById('roomVideo').style.height = window.screen.height + "px";//判断开始播放视频，移除高斯模糊等待层var isVideoPlaying = setInterval(function(){var currentTime = myPlayer.currentTime();if(currentTime > 0){$('.vjs-poster').remove();clearInterval(isVideoPlaying);}},200)//判断视频是否卡住，卡主3s重新load视频var lastTime = -1,tryTimes = 0;clearInterval(isVideoBreak);isVideoBreak = setInterval(function(){var currentTime = myPlayer.currentTime();console.log('currentTime'+currentTime+'lastTime'+lastTime);if(currentTime == lastTime){//此时视频已卡主3s//设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0myPlayer.currentTime(currentTime+10000);myPlayer.play();//尝试5次播放后，如仍未播放成功提示刷新if(++tryTimes > 5){alert('您的网速有点慢，刷新下试试');tryTimes = 0;}}else{lastTime = currentTime;tryTimes = 0;}},3000)}</script></body>
</html>

关于延迟问题，好像是HLS的硬伤，参考使用FFMPEG生成HLS

现在生成的文件是

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:432
#EXTINF:10.000000,
test2.ts
#EXTINF:10.000000,
test3.ts
#EXTINF:10.000000,
test4.ts
#EXTINF:10.000000,
test5.ts
#EXTINF:10.000000,
test6.ts

改成

ffmpeg -f rtsp -rtsp_transport tcp -i "rtsp://admin:admin12345@192.168.1.56/h264/ch1/main/av_stream" -strict -2 -c:v libx264 -vsync 2 -c:a aac -f hls -hls_time 2 -hls_list_size 2 -hls_wrap 3 D:/SoftwareProjects/GitHub/LocationSystem/Server/WCFServer/LocationWCF/bin/Debug/nginx-1.7.11.3-Gryphon/temp/hls_temp/test.m3u8

感觉-hls_time没有生效一样。

没研究出来怎样减少延迟。

网页中播放RTSP(1)相关推荐

如果摄像头不支持Web Socket，猿大师播放器还能在网页中播放RTSP流吗？
问: 我们的情况比较复杂,摄像头设备品牌和数量都比较多,分布在全国各地都有,地点分布比较广泛,有的甚至是比较老的型号,如果摄像头设备不支持Web Socket,猿大师播放器还可以在网页中播放RTSP流 ...
网页中播放RTSP(5) WebSocket播放视频
WebSocket播放视频是结合MediaSource的总结:通过WebSocket获取视频流,提供给MediaSource,MediaSource结合video标签,播放视频. 这一套完全就是基于 ...
网页中播放RTSP(6) WebRTC播放视频
1.还是基于h5stream的h5splayer.js学习,还是基于websocket. 与原来的不同,在onopen里面要发送一些open指令 ws.onopen = function () {in ...
如何在高版本Chrome中播放RTSP实时视频？
背景随着互联网基础设施的完善以及4G.5G等技术的大规模商用,在Chrome.Firefox.Edge等浏览器播放RTSP视频流也慢慢成为了信息化系统的行业标准. 早些年还可用VLC播放器在网页中播 ...
html调用rpst 源码_在web页面中播放rtsp直播数据流方法
WEB播放RTSP直播数据流方法附录一些RTSP测试地址: 1.rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov 一段动画片 2.rtsp: ...
使用VLC（ActiveX）在网页中播放MP4
问题: 从海康录像机下载下来的MP4文件的视频编码为MPEG4(DivX)类型,而不是浏览器能播放的AVC(H264)编码类型. 这样的话,就无法使用H5的Video标签进行播放,然而视频下载程序(自 ...
embed标签的使用(在网页中播放各种音频视频的插件的使用)
播放器插件使用说明: 代码:< EMBED src="music.mid"autostart="true"loop="2"width= ...
Media Player 嵌套网页中播放上传视频记录
首先我把Media Player播放器做一个用户控件代码如下前台: View Code <%@ Control Language="C#" AutoEventWireup ...
怎么解决网页中播放视频没有声音？
具体问题:电脑能正常播放硬盘中的音乐.电影,但是网页中的视频就只有图像没有声音,如:土豆网等等:并且浏览器的"选项"中多媒体的"在网页中播放声音"也处于被选状态 ...
网页中播放flash视频
使用flowplayer播发器,很轻松的实现在网页中播发flash格式的视频文件. 下载地址:http://flowplayer.org/download/index.html 主要有三个文件: fl ...

网页中播放RTSP(1)

网页中播放RTSP(1)相关推荐

最新文章

热门文章