网页中播放RTSP(1)

最新推荐文章于 2024-08-08 07:49:13 发布

llhswwha

最新推荐文章于 2024-08-08 07:49:13 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/llhswwha/article/details/102479645

版权

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设置为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没有生效一样。

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

llhswwha

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页中播放RTSP(1)

1.在网页中播放参考：网页播放rtsp视频流里面的前两种方法就是装插件,vlc player和quicktime ，第三者方法说是不需要装插件，实际上是装的服务端，关键是我注册时邮箱没发我，无法继续测试下去。参考：七种转化RTSP屏显示到web页面的方法(csdn)或者http://blog.sina.cn/dpool/blog/s/blog_145f07e7b0102xe0z.ht...
复制链接

扫一扫