上一篇文章末尾的推流拉流,沒有牽涉到web的工作,是用vlc顯示的。推流端是rtmp+flv,拉流端是rtmp+flv。
推流: ffmpeg -re -stream_loop -1 -i src_h264.mp4 -vcodec copy -f flv rtmp://localhost/test01
拉流: 用vlc打開 rtmp://x.x.x.x/test01第二種形式,推流端是rtmp+flv,拉流端是rtmp+flv。在pc上用chrome觀看,需要用到video.js,并且打開chrome的flash支持。
需要開發(fā)web,這里簡(jiǎn)單修改index.html。
參考 https://www.cnblogs.com/chen1994li/p/9496113.html
先下載如下內(nèi)容到index.html同級(jí)目錄下:
http://vjs.zencdn.net/5.19/video-js.min.css
http://vjs.zencdn.net/5.19/video.min.js
https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js
https://vjs.zencdn.net/v/oceans.png
https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf
再修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5 rtmp</title>
<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>
<script src="videojs-flash.min.js"></script>
</head>
<body>
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
poster="oceans.png" width="500" height="400" data-setup='{}'>
<source src='rtmp://x.x.x.x/test01/' type='rtmp/flv'/>
</video>
<script type="text/javascript">
videojs.options.flash.swf = 'video-js.swf';
var player = videojs('my-player');
player.play();
</script>
</body>
</html>
推流: ffmpeg -re -stream_loop -1 -i src_h264.mp4 -vcodec copy -f flv rtmp://localhost/test01
拉流: 用chrome打開 http://x.x.x.x/
(注意把web里的x.x.x.x和這里的x.x.x.x換成真實(shí)的服務(wù)器端ip地址,把width,height換成真實(shí)的寬高)
(另外還有注意不要遺漏src='rtmp://x.x.x.x/test01/'中最后那個(gè)'/',如果遺漏了,chrome會(huì)報(bào)FLASH: rtmpconnectfailure)
- 第三種形式,推流端是rtmp+flv,拉流端是hls+mpegts。沒有web的工作,只需要配置nginx.conf即可。
在之前對(duì)nginx.conf修改的基礎(chǔ)上,在rtmp/server節(jié)點(diǎn)里新增如下內(nèi)容:
application hls {
live on;
hls on;
hls_path /tmp/hls;
hls_fragment 5s;
}
在http/server節(jié)點(diǎn)里新增如下內(nèi)容:
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp;
add_header Cache-Control no-cache;
}
hls_path /tmp/hls;
location /hls
root /tmp;
三者指示了分片文件所在的物理路徑,以及與rtmp://x.x.x.x/hls/y.m3u8這種形式的對(duì)應(yīng)關(guān)系。
推流: ffmpeg -re -stream_loop -1 -i src_h264.mp4 -vcodec copy -f flv rtmp://localhost/hls/test02
拉流: 用vlc打開 http://x.x.x.x/hls/test02.m3u8
(pc端用chrome無(wú)法觀看,在手機(jī)上用瀏覽器可以直接打開觀看,應(yīng)該是ios,android原生支持hls)
- 第四種形式,不涉及rtmp,hls等協(xié)議,html5 video原生支持mp4播放,通過(guò)http下載文件播放。
需要開發(fā)web,這里簡(jiǎn)單修改index.html。
先把src_h264.mp4放到index.html同級(jí)目錄下。
再修改index.html
<!DOCTYPE html>
<html>
<body>
<video controls>
<source src='src_h264.mp4' type='video/mp4'/>
</video>
</body>
</html>
無(wú)需主動(dòng)推流
拉流: 用chrome打開 http://x.x.x.x/