FFmpeg+rtmp+Nginx-http-flv-module+flvjs实现直播

运行环境：windows
Nginx-rtmp-module不支持flvjs
Nginx-http-flv-module支持flvjs
步骤：将nginx-http-flv-module编译到nginx，然后设置配置文件，开启服，进行推流拉流。
1.我已经将其编译好，并设置好nginx.conf配置文件，打包如下：

windows下编译好的nginx+nginx-http-flv
(提取码：w6mi)
2.FFmpeg推流
推摄像头，可以用命令ffmpeg -list_devices true -f dshow -i dummy查看本机相机设备名称，将下面的“HD Camera”更改一下就好

1
2
3
4

推流1
ffmpeg -f dshow -i video="HD Camera" -vcodec libx264 -acodec copy -preset:v ultrafast -tune:v zerolatency -f flv rtmp://127.0.0.1:1935/myapp/mystream
推流2
ffmpeg -re -i demo.flv -c copy -f flv rtmp://127.0.0.1:1935/myapp/mystream

3.flvjs拉流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!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: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>

<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">

<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div>

<script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
"isLive": true,
//url: 'http://127.0.0.1:7001/live/movie.flv', //根据需求自行修改
url:'http://127.0.0.1:8080/live?port=1935&app=myapp&stream=mystream'//根据nginx.conf配置文件填写对应url

});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
flv_start();
}

function flv_start() {
player.play();
}

function flv_pause() {
player.pause();
}

function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}

function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>

</html>

4.运行结果
在这里插入图片描述
推流1 摄像头

在这里插入图片描述
推流2 本地视频