Node+OBS直播伺服器搭建總結

阿新 • • 發佈：2021-08-22

導語：最近研究了一下網頁直播流的原理以及實現，現在就目前的實現方法做一個總結。

直播流媒體協議

先來了解一下基本的直播流媒體協議。

http-flv,rtpm

協議/特點	開發者	原理	優點	缺點
http-flv	Abode	通過伺服器把flv下載到本地快取，然後通過NetConnection本地連線播放	節省伺服器消耗	保密性差
rtmp	Abode	通過NetConnection連線到伺服器，實時播放伺服器的flv	保密性好	消耗伺服器資源
rtsp	哥倫比亞大學、網景和RealNetworks	控制具有實時特性的資料的傳送，依賴傳輸協議	實時效果非常好	實現複雜
hls	蘋果公司	包括一個m3u(8)的索引檔案，TS媒體分片檔案和key加密串檔案，不將TS切片檔案存到磁碟，而是存在記憶體當中	極大減少了磁碟的I/O次數，延長了伺服器磁碟的使用壽命，極大提高了伺服器執行的穩定性	會生成大量的檔案，儲存或處理這些檔案會造成大量資源浪費

拉流與推流

推流，指的是把採集階段封包好的內容傳輸到伺服器的過程。

拉流, 指伺服器已有直播內容，用指定地址進行拉取的過程。

Node服務搭建

安裝依賴包

這次使用node-media-server包，來搭建，獲取更多請訪問。

mkdir live
cd live
npm init -y
npm i node-media-server

引入包，編寫配置檔案

// server.js
const nodeMediaServer = require('node-media-server');
const config = {
    rtmp: {
        port: 3001,
        chunk_size: 6000,
        gop_cache: true,
        ping: 30,
        ping_timeout: 60
    },
    http: {
        port: 3002,
        allow_origin: "*"
    }
}

const nms = new nodeMediaServer(config);

nms.run();

啟動以後會輸入一下內容

D:\live>node server.js
2021/8/22 14:52:19 9588 [INFO] Node Media Server v2.3.8
2021/8/22 14:52:19 9588 [INFO] Node Media Rtmp Server started on port: 3001
2021/8/22 14:52:19 9588 [INFO] Node Media Http Server started on port: 3002
2021/8/22 14:52:19 9588 [INFO] Node Media WebSocket Server started on port: 3002

如果打印出以上內容，說明一個rtmp的直播伺服器就已經搭建成功了。

拉推流地址

AppName就是App名稱;StreamName就是流名稱。

推流地址：

url: rtmp://localhost/live
key: STREAM_NAME

拉流地址:

rtmp: rtmp://localhost:port/live/STREAM_NAME
http-flv: http://localhost:3002/live/STREAM_NAME.flv
HLS: http://localhost:3002/live/STREAM_NAME/index.m3u8
DASH: http://localhost:3002/live/STREAM_NAME/index.mpd
websocket-flv: ws://localhost:3002/live/STREAM_NAME.flv

這裡主要使用的推流地址是：rtmp://localhost/xqlive/demo,拉流地址是http://localhost:3002/xqlive/demo.flv。

前端播放頁面

這裡主要是使用flv.js進行播放。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雲直播</title>
    <style>
        #live {
            margin: 0 auto;
            display: block;
            min-width: 300px;
            max-width: 600px;
            width: 100%;
        }
    </style>
</head>

<body>
    <video id="live" playsinline controls src="" poster="./img/poster.jpg"></video>
    <script src="js/flv.min.js"></script>
    <script>
        if (flvjs.isSupported()) {
            let ve = document.getElementById('live');
            let flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://localhost:3002/xqlive/demo.flv'
            });
            flvPlayer.attachMediaElement(ve);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>

</html>

看一下效果