前言
再有几个月就毕业了,在这里记录自己大学四年最后的日子----很是伤感啊!
直播简介
正文
注:本文涉及到很多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/** 则是拉流地址
五、最后就可以看到自己的成果了
鉴于本人害羞腼腆,遂将此处图片删除,望体谅!