obs+node-media-server+flv.js實現錄播和直播

實現思路

下載obs軟件，進行視頻的錄製
經過node-media-server開啓一個服務，在obs中推流到該服務器
經過flv.js配合html5的video標籤實現node-media-server中視頻源的播放

開始實現

obs的使用

obs的下載請移步官網，有windows, mac, linux 三個平臺的版本可供下載我這裏使用的是mac版，其餘版本的使用應該也差很少css

首先須要新建一個場景

這裏有不少種場景可使用，我用顯示捕獲來示範一下吧...

能夠對場景進行命名，我直接使用默認的名字，點擊肯定

再次點擊肯定，這個時候場景就建立成功了，拖動場景能夠將場景進行縮放，縮放到遮住黑色的背景就行了 html

推流視頻的本質實際上是一張張截下來的圖片，咱們須要將這一張張圖片放到一個地方，而後前端就能夠從這個地方讀取，從而展現出來，所以在這以前咱們須要開啓一個服務，做爲前端獲取視頻的源地址

node-media-server開啓服務

新建一個空白的文件夾，執行npm init, 根據提示輸入相關信息後，下載node-media-server

npm install node-media-server --save
複製代碼

新建一個入口文件index.js

const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};

var nms = new NodeMediaServer(config)
nms.run();
複製代碼

而後在命令行中執行

node index.js
複製代碼

若是看到下面的提示，表示咱們已經成功開啓node-media-server服務了前端

flv.js

flv.js是來自Bilibli的開源項目。它解析FLV文件餵給原生HTML5 Video標籤播放音視頻數據，使瀏覽器在不借助Flash的狀況下播放FLV成爲可能。具體的介紹請自行google哈，繼續剛纔的項目html5

新建一個index.html文件

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>直播</title>
</head>
<body>
   <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
   <video id="videoElement" width="100%" controls></video>
   <script>
       if (flvjs.isSupported()) {
           var videoElement = document.getElementById('videoElement');
           var flvPlayer = flvjs.createPlayer({
               type: 'flv',
               url: 'http://localhost:8000/live/hello.flv'
           });
           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
   </script>
</body>
</html>

複製代碼

這裏遇到了一個坑，多是mac的緣由，默認視頻是沒有自動播放的，並且一開始video標籤我也沒有加上controls，因此網頁上一直顯示的是一張靜態的圖片，偶然才發現原來是視頻處於暫停狀態 =_=!!node

能夠進行錄播啦~

點擊obs中的設置，進入設置頁面，點擊流，若是是在本地直播的話，流類型選擇自定義流媒體服務器，url填寫如圖所示，流名稱填寫index.html設置的名字，本項目是hello

咱們也能夠經過bilibili等直播平臺進行播放，這裏就填寫你bilibili上的直播連接和名稱linux

點擊obs的開始推流按鈕

這時雙擊在瀏覽器打開index.html就能夠看到直播啦，記得點擊視頻下方的開始按鈕~npm