- 创建/usr/local/soft文件夹并下载nginx
mkdir /usr/local/soft
wget https://nginx.org/download/nginx-1.14.2.tar.gz- 下载nginx-http-flv-module 模块
wget https://github.com/winshining/nginx-http-flv-module-1.2.6.zip- 创建/usr/local/nginx文件夹
mkdir /usr/local/nginx- 将下载的nginx压缩文件解压到/usr/local/soft下
tar -zxvf nginx-1.14.2.tar.gz /usr/local/soft- 进入刚解压的nginx
cd /usr/local/soft/nginx-1.14.2- 将nginx-http-flv-module解压到/usr/local/soft下
unzip nginx-http-flv-module-1.2.6.zip- 安装依赖
yum -y install unzip
yum -y install gcc-c++
yum -y install pcre pcre-devel
yum -y install zlib zlib-devel
yum -y install openssl openssl-devel- 生成make文件并且安装nginx
./configure --prefix=/usr/local/nginx --add-module=/usr/local/soft/nginx-http-flv-module
make && make install- 修改nginx配置文件，配置中根据自己的实际情况修改
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
# 支持跨域的配置
#add_header 'Access-Control-Allow-Origin' '*';
# 请求允许发送cookie
#add_header 'Access-Control-Allow-Credentials' 'true';
server {
listen 8080;
server_name 192.168.234.132;
location /live {
flv_live on;
chunked_transfer_encoding on;
add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /usr/local/nginx-flv/nginx-http-flv-module;
}
location /control {
rtmp_control all;
}
location /rtmp-publisher {
root /usr/local/nginx-flv/nginx-http-flv-module;
}
location / {
root /usr/local/nginx-flv/nginx-http-flv-module;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
rtmp {
server {
listen 1935;
application myapp {
live on;
gop_cache on;#打开GOP缓存，减少首屏等待时间
#allow publish 192.168.145.1;#
#allow play all;
#notify_method get;
#on_play http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_play;
#on_publish http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_publish;
#on_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_done;
#on_play_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_play_done;
#on_publish_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_publish_done;
#on_record_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_record_done;
#on_update http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_update;
#notify_update_timeout 10s;
}
#on_connect http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_connect;
}- 推流
推流过程省略可以用obs推流等软件OBS下载地址
- 播放rtmp直播流（使用flv.js）
- html播放代码
<div class="mainContainer">
<div>
<div id="streamURL">
<div class="url-input">
<label for="sURL">Stream URL:</label>
<input id="sURL" type="text" value="http://192.168.42.28:8002/record/cwj001-2019-06-28-05_04_28.flv" />
<button onclick="switch_mds()">Switch to MediaDataSource</button>
</div>
<div class="options">
<input type="checkbox" id="isLive" onchange="saveSettings()" />
<label for="isLive">isLive</label>
<input type="checkbox" id="withCredentials" onchange="saveSettings()" />
<label for="withCredentials">withCredentials</label>
<input type="checkbox" id="hasAudio" onchange="saveSettings()" checked />
<label for="hasAudio">hasAudio</label>
<input type="checkbox" id="hasVideo" onchange="saveSettings()" checked />
<label for="hasVideo">hasVideo</label>
</div>
</div>
<div id="mediaSourceURL" class="hidden">
<div class="url-input">
<label for="msURL">MediaDataSource JsonURL:</label>
<input id="msURL" type="text" value="http://192.168.42.34:8002/live?port=9000&app=myapp&stream=cwj001" />
<button onclick="switch_url()">Switch to URL</button>
</div>
</div>
</div>
<div class="video-container">
<div>
<video name="videoElement" class="centeredVideo" controls autoplay>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
</div>
<div class="controls">
<button onclick="flv_load()">Load</button>
<button onclick="flv_start()">Start</button>
<button onclick="flv_pause()">Pause</button>
<button onclick="flv_destroy()">Destroy</button>
<input style="width:100px" type="text" name="seekpoint"/>
<button onclick="flv_seekto()">SeekTo</button>
</div>
<textarea name="logcatbox" class="logcatBox" rows="10" readonly></textarea>
</div>
<script src="flv.min.js"></script>
<script>
var checkBoxFields = ['isLive', 'withCredentials', 'hasAudio', 'hasVideo'];
var streamURL, mediaSourceURL;
function flv_load() {
console.log('isSupported: ' + flvjs.isSupported());
if (mediaSourceURL.className === '') {
var url = document.getElementById('msURL').value;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
var mediaDataSource = JSON.parse(xhr.response);
flv_load_mds(mediaDataSource);
}
xhr.send();
} else {
var i;
var mediaDataSource = {
type: 'flv'
};
for (i = 0; i < checkBoxFields.length; i++) {
var field = checkBoxFields[i];
/** @type {HTMLInputElement} */
var checkbox = document.getElementById(field);
mediaDataSource[field] = checkbox.checked;
}
mediaDataSource['url'] = document.getElementById('sURL').value;
console.log('MediaDataSource', mediaDataSource);
flv_load_mds(mediaDataSource);
}
}
function flv_load_mds(mediaDataSource) {
var element = document.getElementsByName('videoElement')[0];
if (typeof player !== "undefined") {
if (player != null) {
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
}
player = flvjs.createPlayer(mediaDataSource, {
enableWorker: false,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range',
});
player.attachMediaElement(element);
player.load();
}
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() {
var input = document.getElementsByName('seekpoint')[0];
player.currentTime = parseFloat(input.value);
}
function switch_url() {
streamURL.className = '';
mediaSourceURL.className = 'hidden';
saveSettings();
}
function switch_mds() {
streamURL.className = 'hidden';
mediaSourceURL.className = '';
saveSettings();
}
function ls_get(key, def) {
try {
var ret = localStorage.getItem('flvjs_demo.' + key);
if (ret === null) {
ret = def;
}
return ret;
} catch (e) {}
return def;
}
function ls_set(key, value) {
try {
localStorage.setItem('flvjs_demo.' + key, value);
} catch (e) {}
}
function saveSettings() {
if (mediaSourceURL.className === '') {
ls_set('inputMode', 'MediaDataSource');
} else {
ls_set('inputMode', 'StreamURL');
}
var i;
for (i = 0; i < checkBoxFields.length; i++) {
var field = checkBoxFields[i];
/** @type {HTMLInputElement} */
var checkbox = document.getElementById(field);
ls_set(field, checkbox.checked ? '1' : '0');
}
var msURL = document.getElementById('msURL');
var sURL = document.getElementById('sURL');
ls_set('msURL', msURL.value);
ls_set('sURL', sURL.value);
console.log('save');
}
function loadSettings() {
var i;
for (i = 0; i < checkBoxFields.length; i++) {
var field = checkBoxFields[i];
/** @type {HTMLInputElement} */
var checkbox = document.getElementById(field);
var c = ls_get(field, checkbox.checked ? '1' : '0');
checkbox.checked = c === '1' ? true : false;
}
var msURL = document.getElementById('msURL');
var sURL = document.getElementById('sURL');
msURL.value = ls_get('msURL', msURL.value);
sURL.value = ls_get('sURL', sURL.value);
if (ls_get('inputMode', 'StreamURL') === 'StreamURL') {
switch_url();
} else {
switch_mds();
}
}
function showVersion() {
var version = flvjs.version;
document.title = document.title + " (v" + version + ")";
}
var logcatbox = document.getElementsByName('logcatbox')[0];
flvjs.LoggingControl.addLogListener(function(type, str) {
logcatbox.value = logcatbox.value + str + '\n';
logcatbox.scrollTop = logcatbox.scrollHeight;
});
document.addEventListener('DOMContentLoaded', function () {
streamURL = document.getElementById('streamURL');
mediaSourceURL = document.getElementById('mediaSourceURL');
loadSettings();
showVersion();
flv_load();
});
</script>
