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

linliqzh發表於2018-06-04
ServerJS

實現思路

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

開始實現

obs的使用

obs的下載請移步官網，有windows, mac, linux 三個平臺的版本可供下載 我這裡使用的是mac版，其他版本的使用應該也差不多

  • 首先需要新建一個場景
    新建場景.png
    這裡有很多種場景可以使用，我用顯示捕獲來示範一下吧...
    新建場景.png
    可以對場景進行命名，我直接使用預設的名字，點選確定
    新建場景.png

再次點選確定，這個時候場景就建立成功了，拖動場景可以將場景進行縮放，縮放到遮住黑色的背景就好了

縮放場景.png

  • 推流 視訊的本質其實是一張張截下來的圖片，我們需要將這一張張圖片放到一個地方，然後前端就可以從這個地方讀取，從而展示出來，因此在這之前我們需要開啟一個服務，作為前端獲取視訊的源地址

node-media-server開啟服務

  1. 新建一個空白的資料夾，執行npm init, 根據提示輸入相關資訊後，下載node-media-server
npm install node-media-server --save
複製程式碼
  1. 新建一個入口檔案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();
複製程式碼
  1. 然後在命令列中執行
node index.js
複製程式碼

如果看到下面的提示，表示我們已經成功開啟node-media-server服務了

開啟服務.png

flv.js

flv.js是來自Bilibli的開源專案。它解析FLV檔案餵給原生HTML5 Video標籤播放音視訊資料，使瀏覽器在不借助Flash的情況下播放FLV成為可能。具體的介紹請自行google哈，繼續剛才的專案

  • 新建一個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，所以網頁上一直顯示的是一張靜態的圖片，偶然才發現原來是視訊處於暫停狀態 =_=!!

可以進行錄播啦~

  • 點選obs中的設定，進入設定頁面，點選流，如果是在本地直播的話，流型別選擇自定義流媒體伺服器，url填寫如圖所示，流名稱填寫index.html設定的名字，本專案是hello

我們也可以通過bilibili等直播平臺進行播放，這裡就填寫你bilibili上的直播連結和名稱

image.png

  • 點選obs的開始推流按鈕
    image.png

這時雙擊在瀏覽器開啟index.html就可以看到直播啦，記得點選視訊下方的開始按鈕~

相關文章