1、HLS协议走 nginx + http_flv_module 方式：
http_flv_module 是nginx的一个模块， 需要重新编译nginx；稍微省事的方法是走docker的方式
docker镜像为： mycujoo/nginx-http-flv-module:latest
启动docker命令：docker run -p 8080:80 -p 1965:1965 -p 8181:8181 -p 1935:1935 mycujoo/nginx-http-flv-module:latest
前端支持flv的html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p class="mainContainer">
<VIDEO name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024" height="576">
Your browser is too old which doesn't support HTML5 video.
</VIDEO>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.3.2/flv.min.js"></script>
<script>
function start() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
// url: 'http://172.24.0.5:8088/live?port=1935&app=hls&stream=robot7-210'
url: 'http://localhost:8080/live?port=1935&app=hls&stream=tt'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
}
document.addEventListener('DOMContentLoaded', function () {
start();
});
</script>
</body>
</html>
最后使用 ffmpeg 推流
ffmpeg -re -i ~/Downloads/test.mp4 -c copy -f flv rtmp://localhost:1935/hls/tt
这种方式的延迟较高， 底层是缓存一段段视频帧，再传输给前端。
2、webrtc的方式
webrtc + srs 流媒体服务器方式
<video class="" controls autoplay style="" id="video">
<script src="/static/js/jswebrtc.min.js"></script>
<script>
var video = document.getElementById('video');
var url = 'webrtc://127.0.0.1/live/livestream';
var player = new JSWebrtc.Player(url, { video: video, autoplay: true, });
</script>
jswebrtc.min.js 从github中找
srs 流媒体也是直接走docker 获取
docker run --name srs -p 1935:1935 -p 8080:8080 -p 1985:1985 -p 8000:8000/udp --env CANDIDATE={LOCALIP} registry.cn-hangzhou.aliyuncs.com/ossrs/srs:v4.0.55 objs/srs -c conf/rtc.conf
注意：这儿CANDIDATE需要设置成本机的对外ip地址。
最后是 使用 ffmpeg 进行rtmp推流。
webrtc 这种方式延迟较低， 毫秒或1秒左右级别
网友评论