• 原创内容，转载请注明出处^_^
• 服务器搭建-Linux安装包版
• rtmp服务器
• 简介
• nginx里的配置
• ffmpeg推流工具
• 摆设
• 牛刀小试↓
• 推流下令
• 外网播放
• 监控
• 带宽
• nethogs下令监控带宽
• 播放
• rtmp流的播放
• flash player - npm版

文件名称|版本号|接洽人|qq|备注

[干货]在线直播技术8分钟入门|v0.0.1|飞豺|8416837|直播技术

原创内容，转载请注明出处^_^

服务器搭建-Linux安装包版

Docker版类似

rtmp服务器

简介

rtmp是Adobe的私有协议，传输速度快，画质好，好用。

nginx里的配置

搭建nginx不是本文重点，如果安装包安装，简要说一下：下载安装包，解压，在服务器安装条件软件，编译，安装nginx即可.

vim conf/nginx.conf

# 极简配置，成功吸收推流。可以搭配on_connect等回调接口.rtmp { server{ listen 1935; # rtmp专用端口必须是1935，便于映射到外网 access_log logs/rtmp_access.log; application rtmp { live on; } } }

重启后，吸收推流的地址即为：ip:1935/rtmp/自界说的文件名称，之后使用ffmpeg推流。

ffmpeg推流工具

摆设

# 安装推流工具git clone https://git.ffmpeg.org/ffmpeg.git ffmpegsh configure --enable-shared --prefix=/usr/local/ffmpeg --disable-yasmmake && make install# 漫长的等待cd /usr/local/ffmpegsh bin/ffmpeg -version

实行sh configure时可能报错↓

nasm/yasm not found or too old. Use --disable-x86asm for a crippled build => 因为没有装汇编编译器

下载汇编编译器：http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz，解压tar.gz包后实行configure make && make install，然后重新配置编译ffmpeg即可.

ffmpeg安装完毕，查看版本会报错↓

在这里插入图片形貌

下述第一个方法于我的服务器无效。

方法一，vim /etc/ld.so.conf.d/ffmpeg.conf# 添加内容：/usr/loacl/ffmpeg/lib 保存退出# 实行下令：ldconfig

换一种方法

方法二，

ldd bin/ffmpeg # 查看依赖库export LD_LIBRARY_PATH=/usr/local/ffmpeg/lib/ # 变量# 查看少不少包↓ldd ffmpeg

OK，不缺少包.

在这里插入图片形貌

牛刀小试↓

 ./bin/ffmpeg -version # 查看版本 # 添加软毗连 ln -s /usr/local/ffmpeg/bin/ffmpeg /usr/bin/ffmpeg # 配置环境变量 vim /etc/profile # 进入后添加ffmpeg的path路径 # 尝试，将rtmp视频流保存成文件 ffmpeg -i rtmp://58.200.131.2:1935/livetv/hunantv -acodec copy -vcodec copy -f flv -y testHunantv.flv # 实行后，该测试视频流即可存储到当前目录.

网络rtmp流保存实行中↓

在这里插入图片形貌

看到了保存的文件，说明ffmpeg下令没题目.

在这里插入图片形貌

发送文件到Windows播放试一下：sz testHunantv.flv <= 发送死令

播放成功！

推流下令

# 静态源ffmpeg -re -i avatar1.rmvb -f flv rtmp://192.168.4.152:1935/rtmp/avatar1 # 推送静态视频流-1# ————————————————————————分界线————————————————————————ffmpeg -i "rtmp://58.200.131.2:1935/livetv/hunantv live=1" -acodec copy -vcodec copy -f flv rtmp://内网ip:1935/rtmp/hunantv # 推送实时流1 OK# ————————————————————————分界线————————————————————————ffmpeg -i "rtmp://202.69.69.180:443/webcast/bshdlive-pc live=1" -acodec copy -vcodec copy -f flv rtmp://内网ip:1935/rtmp/hktv # 推送实时流2 OK# ————————————————————————分界线————————————————————————ffmpeg -i "rtmp://live.chosun.gscdn.com/live/tvchosun1.stream live=1" -acodec copy -vcodec copy -f flv rtmp://内网ip:1935/rtmp/cstv # 推送实时流3 OK# ffmpeg亦可推送摄像头流和内网平台提供的视频流

外网播放

将内网的ip:1935端口映射到外网某个端口，然后使用外网ip:外网端口/rtmp/文件路径/密钥访问即可。

监控

带宽

nethogs下令监控带宽

• CENTOS7 nethogs

yum install gcc-c++ libpcap-devel.x86_64 libpcap.x86_64 ncurses* # 安装预备组件wget https://github.com/raboof/nethogs/archive/v0.8.3.tar.gz # 下载安装包tar -zxvf v0.8.3.tar.gzcd nethogs-0.8.3make && make installnethogs # 实行该下令看流量

播放

• rtmp流的播放
• flash player - npm版
• 普通js版的配置类似，引入js文件到html即可。
• 夸大：笔者撰文之时，vue-video-player 必须以npm安装！！！(201909161813记载)
• 代码
• npm安装依赖

npm install --save vue-video-player@版本号npm install --save videojs-flash@版本号

• package.json里查看版本号：

"videojs-flash": "^2.1.0-3","vue-video-player": "^4.0.6",

• main.js里新增

// flash player - startimport VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')require('videojs-flash')Vue.use(VideoPlayer)// flash player - end

• 播放代码video\index.vue
• ```html
• <template>
• <video-player class="vjs-custom-skin" :options="playerOptions">
• </video-player>
• </template>
• <script>
• import ‘videojs-flash’
• export default {
• data() {
• return {
• playerOptions: {
• height: ‘360’,
• sources: [{
• type: ‘rtmp/flv’,
• src: ‘rtmp://media3.sinovision.net:1935/live/livestream’ // 测试播放地址 - flv
• }],
• techOrder: [‘flash’],
• autoplay: true,
• controls: true,
• poster: ‘https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg‘ // 封面图片
• }
• }
• }
• }
• </script>

```

• 播放结果↓

在线直播

• 
  
• *
• 至此，一个从无到有的在线直播功能完成。
• 进阶内容待续