從零開始實如今線直播

時間  2019-11-06
標籤 開始 如今 直播 简体版
原文   原文鏈接

送走了共享經濟，迎來了直播浪潮。做爲一個開發者，總想去探索本身的未知領域。我今天將手把手教你搭建一個SRS直播流服務和一個Node.js服務。Node.js服務向SRS直播流服務請求視頻數據，而後解析請求後的數據，最後將解析後的數據推送給html頁面video標籤。html

本文將圍繞如下幾方面展開：node

  • 購買雲服務，以及在雲主機上安裝必要的開發環境
  • 搭建SRS視頻流服務
  • 搭建node.js服務，實現解析SRS視頻流數據
  • 解決node.js服務中跨域請求的問題

購買雲服務

雲市場上的服務有不少選擇，諸如國內某某雲、國外某某雲。這裏爲了避嫌，這裏就不作推薦。注意本篇文章講述的示例都是在ubuntu系統環境中，所以推薦雲主機安裝ubuntu系統。python

下面是不一樣的終端鏈接雲服務的工具：linux

  • 使用 Windows 系統的電腦 一、下載安裝 Windows SSH 和 Telnet 客戶端工具 Putty。下載Putty 二、用戶名：root，Host：193.112.195.120 三、按照 Putty 使用幫助進行登陸。Putty 密碼方式使用幫助nginx

  • 使用 Linux/Mac OS X 系統的電腦（使用密碼登陸） 一、打開 SSH 客戶端（Mac可以使用系統自帶的終端） 二、輸入ssh -q -l root -p 22 193.112.195.120 三、輸入 CVM 實例密碼進行登陸。git

  • 使用 Linux/Mac OS X 系統的電腦（使用密鑰登陸） 一、打開 SSH 客戶端（Mac可以使用系統自帶的終端）。 二、查找您雲服務器關聯的 SSH 密鑰文件本地存放地址。 三、您的密鑰必須不公開可見，SSH 才能工做。請使用此命令：chmod 400 [密鑰文件路徑]。 四、輸入命令：ssh [-i 密鑰文件路徑] root@193.112.195.120。github

配置ubuntu系統開發環境

安裝wget

wget命令用來從指定的URL下載文件，命令可參照wget命令大全。chrome

安裝wget工具命令：express

sudo apt-get update  
sudo apt-get install wget  
複製代碼

install-wget.png

檢查wget是否安裝成功： npm

check-wget.png

安裝Node.js環境

在Ubuntu系統下安裝Node.js環境的方式有不少，可參照在Ubuntu下安裝Node.JS的不一樣方式。本文將採用源碼的方式：

  • 升級系統，並安裝一些Node.js必須包
sudo apt-get update
sudo apt-get install python gcc make g++
複製代碼

install-gcc.png

  • 獲取Node.JS的源代碼(版本是v8.11.1)
sudo wget http://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.gz
sudo tar zxvf node-v8.11.1.tar.gz
複製代碼

install-node.png

  • 開始安裝
cd node-v8.11.1
sudo ./configure
sudo make install
複製代碼

檢查Node.js的安裝版本: node -v

check-node.png

安裝nginx前須要安裝pcre

安裝pcre

  • 下載pcre源碼
sudo wget https://ftp.pcre.org/pub/pcre/pcre2-10.31.tar.gz
sudo tar zxvf pcre2-10.31.tar.gz
複製代碼

download-pcre.png

  • 安裝pcre

配置

cd pcre2-10.31
sudo ./configure
複製代碼

configure-pcre.png

編譯

sudo make
複製代碼

make-pcre.png

安裝

sudo make install
複製代碼

install-pcre.png

安裝nginx前須要安裝zlib

安裝zlib

sudo apt-get install zlib1g-dev
複製代碼

install-zlib.png

安裝nginx

安裝nginx的方法有不少，能夠參照Ubuntu中Nginx的安裝與配置。

這裏我將採用源碼安裝方式，安裝nginx。

下載nginx源碼並解壓 sudo wget http://nginx.org/download/nginx-1.12.2.tar.gz sudo tar zxvf nginx-1.12.2.tar.gz

download-nginx.png

配置

sudo ./comfigure
複製代碼

configure-nginx.png

編譯 sudo make

make-nginx.png

安裝

sudo make install

install-nginx.png

**注意：**有時還須要安裝一些nginx包

nginx-package.png

執行以下命令安裝nginx包

sudo apt-get install nginx-core
sudo apt-get install nginx-extras
sudo apt-get install nginx-full
sudo apt-get install nginx-light
複製代碼

配置nginx nginx.conf文件一般在文件夾/etc/nginx/nginx.conf中,經過vi命令編輯。vi常見命令

這裏介紹下幾個最多見的vi命令：

  • 打開文件 sudo vi xxxx

  • 鍵入文件編輯模式 打開文件後，按i鍵（文件底部出現insert）

  • 切換文件模式 在上一步的基礎上按esc鍵（文件底部的insert消失）

  • 退出文件 在上一步的基礎上按「：」＋「 q 」 ＋「！」組合鍵後不保存並退出 在上一步的基礎上按「：」＋「 w 」 ＋「q」組合鍵後保存並退出

啓動nginx服務 nginx啓動端口默認是80

啓動前能夠先肯定下端口的佔用狀況： sudo lsof -i:80 若是端口被佔用，可使用kill命令殺死進程。

nginx的啓動文件通常在/usr/local/nginx/sbin文件夾中，常見nginx服務命令有：

sudo nginx  //啓動服務
sudo nginx -s stop //關閉服務
sudo nginx -s reload  //重啓服務
sudo nginx -t -c /usr/local/nginx/conf/nginx.conf //檢查nginx配置是否正確
複製代碼

在ubuntu中啓動SRS的flv服務

SRS定位是運營級的互聯網直播服務器集羣，追求更好的概念完整性和最簡單實現的代碼。SRS提供不少種視頻流服務，詳細可見SRS的github文檔。

常見直播協議：

  • RTMP: 底層基於TCP，在瀏覽器端依賴Flash。
  • HTTP-FLV: 基於HTTP流式IO傳輸FLV，依賴瀏覽器支持播放FLV。
  • WebSocket-FLV: 基於WebSocket傳輸FLV，依賴瀏覽器支持播放FLV。WebSocket創建在HTTP之上，創建WebSocket鏈接前還要先創建HTTP鏈接。
  • HLS: Http Live Streaming，蘋果提出基於HTTP的流媒體傳輸協議。HTML5能夠直接打開播放。
  • RTP: 基於UDP，延遲1秒，瀏覽器不支持。

我這裏選擇的是http-flv協議，由於我解析SRS視頻流的框架選擇的是Bibili的flv框架，詳見下一節。http-flv流服務部署流程參見SRS-HTTP-FLV部署實例：

  • 獲取srs git clone https://github.com/ossrs/srs && cd srs/trunk
  • 配置srs sudo ./configure && make
  • 編譯srs sudo make
  • 啓動服務 sudo ./objs/srs -c conf/http.flv.live.conf

install-srs-flv.png

OBS直播軟件

OBS軟件免費，開源軟件，用於實時流媒體直播和錄製。 至於OBS的使用詳細參見鬥魚OBS使用教程。

須要在OBS配置流的路徑：rtmp://你的ip地址/live，以及流的名稱。

configure-obs.png

驗證flv流是否推送成功 在瀏覽器中輸入：http://118.89.247.129:8080/live/live.flv，若是出現下載的視頻，則說明OBS成功的向SRS服務推送流服務。

verification-flv.png

解析直播流的框架－flv.js

flv.js是來自Bilibli的開源項目。它解析FLV文件餵給原生HTML5 Video標籤播放音視頻數據，使瀏覽器在不借助Flash的狀況下播放FLV成爲可能。詳細參見使用flv.js作直播。

我在github上開源了本身使用flv.js庫實現直播的代碼。代碼是使用node.js的express框架搭建的服務，若是想要將代碼在ubuntu服務器上運行，須要開發者具有一點node.js的知識。

git clone https://github.com/spursy/live.git   // 克隆node.js代碼

cd live   // 進入項目

npm install   //  安裝項目必須的包

npm run dev // 啓動項目
複製代碼

注意在啓動項目前須要修改live/view/index.html中的視頻源路徑

if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,//<====加個這個 
                url: "http://bianchenggou.wang:8080/live/live.flv',//<==自行修改 //url:"demo.flv" }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); //加載 flv_start(); } 複製代碼

實現flv視頻流直播

修改異常

當程序啓動node.js服務後訪問http://193.112.195.120:9000/，並不能接收到視屏流，經過chrome瀏覽器的F12快捷鍵查看異常：

exception.png

控制檯的異常顯示是不能容許跨域請求，解決不容許跨域請求的方式有不少，參見一篇文章能夠解決跨域。

我這裏使用的是在服務器的nginx配置裏設置容許跨域訪問，詳見nginx跨域配置。

在安裝nginx時，nginx.conf文件放在文件夾**/usr/local/nginx/conf**中。nginx的配置文件的使用能夠參見Nginx教程。

修改以下：

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # Logging Settings
        ##
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##
        gzip on;
        gzip_disable "msie6";

        ##
        # Access-Control
        ##
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Headers X-Requested-With;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;

        server {
                listen      80;
                server_name  bianchenggou.wang;

                location  /srs/ {
                        proxy_pass   http://127.0.0.1:8080/;
                }
                location / {
                        proxy_pass  http://127.0.0.1:9000/;
                }
        }
}
複製代碼

因爲nginx對全部的請求都作了代理服務，所以live/view/index.html中的視頻源路徑應修改成：

if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,//<====加個這個 
                url: "http://bianchenggou.wang/srs/live/live.flv',//<==自行修改 //url:"demo.flv" }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); //加載 flv_start(); } 複製代碼

當再次訪問node服務時，就不會再出現異常。

node-server.png

真正實現視頻直播

OBS直播軟件的配置不變，按照教程推送直播流後，啓動node.js服務，進去直播頁面：

living.png
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程