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串流的功能
这里是把文件转到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
右侧在转流,左侧在播放。转流结束了,播放就结束了。
右下角转码,左侧播放,可以把摄像头转换到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设置为0
myPlayer.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没有生效一样。
没研究出来怎样减少延迟。