一薯嗤、服務(wù)器
這里使用egg做例子,Express,Koa大小異同
1.安裝node-media-server
npm install node-media-server --save
GitHub地址：https://github.com/illuspas/Node-Media-Server
2.node-media-server配置的參數(shù)
const NodeMediaServerConfig = {
rtmp: {
port: 1935,
chunk_size: 60000,
gop_cache: true,
ping: 30,
ping_timeout: 60,
},
http: {
port: 8000,
allow_origin: '*',
},
};
3.運(yùn)行服務(wù)
const NodeMediaServer = require('node-media-server');
const nms = new NodeMediaServer(app.config.NodeMediaServerConfig);
nms.run();
此時(shí)兩個(gè)端口的服務(wù)已經(jīng)跑起來了，根據(jù)配置文件曾雕，推流使用的是默認(rèn)的1935端口，當(dāng)使用rtmp協(xié)議時(shí)是不需要加端口號(hào)的。
無后端框架經(jīng)驗(yàn)的可以根據(jù)GitHub上文檔跑一個(gè)Node js文件就可以了
二艾栋、推流
node-media-server在文檔給出的推流工具是FFmpeg，可以下載該工具后進(jìn)行推流測試
http://ffmpeg.org/
ffmpeg -re -i INPUT_FILE_NAME -c copy -f flv rtmp://localhost/live/STREAM_NAME
這個(gè)工具是一個(gè)視頻處理的工具蛉顽，也有無需安裝而且功能強(qiáng)大的有點(diǎn)蝗砾，有興趣的可以了解，這個(gè)命令主要是把視頻文件當(dāng)流推到指定地址携冤，要實(shí)現(xiàn)直播效果繼續(xù)往下走吧
1.推流sdk
我這里推薦一個(gè)國內(nèi)比較齊全的推流sdk悼粮，可以在網(wǎng)站上找到android，window噪叙，mac矮锈，flutter等的Demo
大牛直播sdk
這里也是建議大家使用sdk，方便快捷功能齊全睁蕾，只要使用應(yīng)用Demo輸入服務(wù)器地址就可以內(nèi)網(wǎng)調(diào)試了苞笨，也完整的提供了sdk
2.Web端推流
這個(gè)真心不怎么推薦了，如果需要玩耍的可以實(shí)現(xiàn)一下
先了解下rtmp-streamer
另外子眶，F(xiàn)lashPlayer即將不再被各大瀏覽器支持了瀑凝，所以酌情玩耍就好
文檔提到
`rtmp-streamer` 遵循[AMD](http://requirejs.org/docs/whyamd.html)規(guī)范，可通過[`require.js`](http://requirejs.org/)等方式加載, 另外, 請(qǐng)確保在頁面中引入了`RtmpStreamer.swf`, 否則`rtmp-streamer`將無法正確載入
如果你使用webpack可以通過npm安裝并require
npm install rtmp-streamer --save
值得注意的是一個(gè)swf文件需要引入臭杰，并且載入后才可以調(diào)用推流的方法
在body加入<object>粤咪，引入swf文件
<object>
<embed id="rtmp-streamer" src="../RtmpStreamer.swf" bgcolor="#999999" quality="high"
width="320" height="240" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed>
</object>
然后調(diào)用publish方法向服務(wù)器推視頻流
require(["rtmp-streamer"], function (RtmpStreamer) {
var streamer = new RtmpStreamer(document.getElementById('rtmp-streamer'));
streamer.publish(url, name);
});
在一般的html頁面里面引入需要引入requireJs
然后使用require引入rtmp-streamer
注意必須要swf插件引入完成后才可以使用推流方法，利用全局isReady變量可以判斷此狀態(tài)
這里先直接上我的代碼
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件渴杆。務(wù)必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>RTMP Web 推流Demo</title>
</head>
<body style="text-align: center;">
<nav class="navbar navbar-light fixed-top rtc-primary-bg">
<h5>基礎(chǔ)推流拉流</h5>
</nav>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
推流
</h3>
</div>
<br>
<object>
<embed id="rtmp-streamer" src="../public/rtmp-streamer/RtmpStreamer.swf" bgcolor="#999999" quality="low"
width="320" height="240" allowScriptAccess="localhost" type="application/x-shockwave-flash"></embed>
</object>
<br>
<div>
<label for="url" class="col-sm-1 control-label">服務(wù)器地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="url"
value="localhost">
</div>
<br>
<br>
<label for="room" class="col-sm-1 control-label">房間號(hào)</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="room"
value="test">
</div>
<br>
<br>
<label for="width" class="col-sm-1 control-label">分辨率</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="width"
value="320">
*<input type="text" class="form-control" id="height"
value="240">
</div>
</div>
<br><br><br>
<br><br>
<button type="button" class="btn btn-info" onclick="startPush()">開始推流</button>
<button type="button" class="btn btn-warning" onclick="disconnectPush()">停止推流</button>
<br><br>
</div>
<br>
<hr>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
拉流
</h3>
</div>
<br>
<video id="videoElement" style="background:#eeeef3;"></video>
<br>
<div>
<label for="playUrl" class="col-sm-1 control-label">服務(wù)器地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="playUrl"
value="localhost:8000">
</div>
<br>
<br>
</div>
<button type="button" class="btn btn-info" onclick="videoPlay()">開始播放</button>
<br><br>
</div>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<script type="text/javascript" src="../public/require.js"></script>
<script type="text/javascript">
let streamer = {};
const RtmpStreamerObj = document.getElementById('rtmp-streamer');
require.config({
paths:{
"rtmp-streamer":'../public/rtmp-streamer/rtmp-streamer'
}
});
require(["rtmp-streamer"], RtmpStreamer=> {
streamer = new RtmpStreamer(RtmpStreamerObj);
console.log(streamer);
});
function disconnectPush() {
streamer.disconnect();
}
function startPush(){
if(isReady){
let url = document.getElementById('url').value;
let room = document.getElementById('room').value;
let width = document.getElementById('width').value;
let height = document.getElementById('height').value;
if(url.length==0 || room.length==0 || width.length==0 || height.length==0){
alert("請(qǐng)輸入配置信息");
return false;
}
RtmpStreamerObj.width = width;
RtmpStreamerObj.height = height;
streamer.publish(`rtmp://${url}/live`,room);
alert("已開始推流");
}else{
setTimeout(_=>{
console.log('retry');
startPush();
},1000)
}
}
function videoPlay() {
if (flvjs.isSupported()) {
const url = document.getElementById('playUrl').value;
const videoElement = document.getElementById('videoElement');
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
alert("已開始播放");
}else{
setTimeout(_=>{
videoPlay();
},1000)
}
}
</script>
</body>
</html>
三寥枝、拉流
拉流相對(duì)來說支持的比較多，調(diào)試可以使用VLC播放器磁奖，十分強(qiáng)大囊拜，有興趣自行了解。
另外一般的都可以使用flv.js進(jìn)行播放
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
if (flvjs.isSupported()) {
const url = document.getElementById('playUrl').value;
const videoElement = document.getElementById('videoElement');
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
alert("已開始播放");
}
另外在過程中了解到一個(gè)比較強(qiáng)大的js的video播放器比搭，集成了片頭廣告冠跷，片尾廣告，各種廣告位的國產(chǎn)播放，有興趣可以了解
ckplayer
