vue+nginx+obs搭建直播平台

前言

再有几个月就毕业了，在这里记录自己大学四年最后的日子----很是伤感啊！

直播简介

正文

注：本文涉及到很多linux命令，是笔者在XShell工具内操作实现的，有些命令可能会从在错误，大家遇到了可以百度也可以下面留言，笔者会第一时间解决

一、购买阿里云服务器，有个学生云计划，很是经济实惠。这里推荐CentOS或Ubuntu

注：关于阿里云服务器购买之后XSell的安装，以及连接服务器，戳这里，也可以百度

二、在你的服务器上安装Nginx具体如下：

1、首先创建环境

yum install -y gcc gcc-c++ autoconf wget
yum -y install wget gcc-c++ ncurses ncurses-devel cmake make perl bison openssl openssl-devel gcc* libxml2 libxml2-devel curl-devel libjpeg* libpng* freetype* 

2、安装openssl

安装命令：

wget https://www.openssl.org/source/openssl-1.0.1i.tar.gz
tar -zxvf openssl-1.0.1i.tar.gz
cd openssl-1.0.1i
sudo ./config --prefix=/usr/local/openssl-1.0.1i    
sudo make
sudo make install

3、安装pcre

安装命令：

wget https://ftp.pcre.org/pub/pcre/pcre-8.35.tar.gz
tar -zxvf pcre-8.35.tar.gz
cd pcre-8.35
sudo ./configure --prefix=/usr/local/pcre-8.35  
sudo make
sudo make install

4、安装zlib

安装命令：

wge http://www.zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
sudo ./configure --prefix=/usr/local/zlib-1.2.8 
sudo make
sudo make install

5、安装nginx-rtmp-module（之前没有找到下载地址，只能在github上下载，所以还安装了github）

wget http://nginx.org/download/nginx-1.9.3.tar.gz  
tar -zxvf nginx-1.9.3.tar.gz  
cd nginx-1.9.3  
./configure --prefix=/usr/local/nginx  --add-module=../nginx-rtmp-module  --with-http_ssl_module    
sudo make
sudo make install

6、nginx配置（配置rtmp、nginx端口、跨域）

配置命令如下：

#首先打开nginx.conf配置文件（如果命令错误则会出现空白文件）
vi /usr/local/nginx/conf/nginx.conf
#rtmp配置-加入以下代码（与http同级）
rtmp {
    server {
        listen 1935;  #rtmp端口
        chunk_size 4096;   
        application live {  #rtmp推流请求路径  
            live on;    
            hls on;    
            hls_path /usr/share/nginx/html/hls;  #推流后，流媒体存放地址  
            hls_fragment 5s;    
        }    
    }    
}  

#server配置，找到server加入一下配置
server {  
    listen       81;  #配置端口号
    server_name  localhost;  
  
    #charset koi8-r;  
  
    #access_log  logs/host.access.log  main;  
  
    location / {  
        add_header Access-Control-Allow-Origin *;   #跨域配置
        root   /usr/share/nginx/html;  
        index  index.html index.htm;  
    }  
  
    #error_page  404              /404.html;  
  
    # redirect server error pages to the static page /50x.html  
    #  
    error_page   500 502 503 504  /50x.html;  
    location = /50x.html {  
        root   html;  
    }  

注：上面所示代码中出现了“/usr/share/nginx/html/hls路径”，因此我们要在此路径下新建文件夹hls，命令如下

#在/usr/中新建文件夹share
mkdir /usr/share
#在/share/中新建nginx
mkdir /usr/share/nginx
#在/nginx/中新建html
mkdir /usr/share/nginx/html
#在/html/中新建hls
mkdir /usr/share/nginx/html/hls

7、为rtmp和nginx开放防火墙

命令如下：

#启动防火墙
systemctl  start   firewalld.service
#开放端口号，即1935跟81端口
firewall-cmd --zone=public --add-port=1935/tcp --permanent
firewall-cmd --zone=public --add-port=81/tcp --permanent
#查看所有放行的端口号列表（若放行成功，则会看到1935跟81）
firewall-cmd --zone=public --list-ports

8、启动nginx

启动命令如下：

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf  

注：若安装错误则会报错

查看是否启动成功命令：

ps -C nginx -o pid
#若安装成功，且启动成功则会看到几组数

注：启动完成之后最好在阿里云控制台重启系统（重启系统后要重新启动nginx）

三、利用OBS推流软件像服务器推流

1、首先去官网下载OBS推流软件，这里就不详细说明了，大家自行百度即可

2、打开OBS，打开设置，填写流地址跟流名称

注：上图中的URL的格式是 rtmp://+'你的流媒体服务器外网ip地址'+:1935/live，流名称可有可无，但如果有的话，在拉流的时候必须将流名称加在流地址后面，也就是 rtmp://+'你的流媒体服务器外网ip地址'+:1935/live/+'你的流名称'

2、填写好之后，点击开始录制，然后点击开始推流，如果以上操作都无误，则开始推流按钮会变成‘停止推流’，这里给大家推荐一个拉流测试的官网，戳这里，在这里可以检验自己搭建的服务器是否成功，是否可以接受流。

四、创建vue项目，进行拉流

1、关于vue，大家自行百度，笔者这里只给出关于的拉流部分的内容

2、首先，使用npm installvue-video-player 命令安装，然后在安装flash，npm install videojs-flash

3、然后在main.js中加入以下代码

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' // 引入样式
import 'vue-video-player/src/custom-theme.css' // 引入样式
import 'videojs-flash'



Vue.use(VueVideoPlayer)

4、最后在index.vue中加入以下代码

<template>
   <div>
       <videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions">    
       </videoPlayer>
   </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
export default {
  name: 'alllive',
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
			sources: [{
				type: 'rtmp/mp4',
                src: 'rtmp://***.**.***.***:1935/live/**',
                withCredentials: false
			}],
			height: '487',
			techOrder: ['flash'],
			autoplay: true,
            controls: true,
            language: 'zh-CN',
            live: true
	   }
	}
  }
}
</script>

注：上图中的 rtmp://***.**.***.***:1935/live/** 则是拉流地址

五、最后就可以看到自己的成果了