[干货]在线直播技术8分钟入门

文件名称	版本号	联系人	qq	备注
[干货]在线直播技术8分钟入门	v0.0.2	飞豺	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 ffmpeg
sh configure --enable-shared --prefix=/usr/local/ffmpeg --disable-yasm
make && make install
# 漫长的等待
cd /usr/local/ffmpeg
sh 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://192.168.4.152: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://192.168.4.152:1935/rtmp/hktv # 推送实时流2 OK
# ————————————————————————分界线————————————————————————
ffmpeg -i "rtmp://live.chosun.gscdn.com/live/tvchosun1.stream live=1" -acodec copy -vcodec copy -f flv rtmp://192.168.4.152:1935/rtmp/cstv # 推送实时流3 OK
# ffmpeg亦可推送摄像头流和内网平台提供的视频流
# 参数解释↓
# -r 以本地帧频读数据，主要用于模拟捕获设备。表示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.gz
cd nethogs-0.8.3
make && make install
nethogs # 执行该命令看流量

播放

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 - start
import 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

<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>

• 播放效果↓
  
  至此，一个从无到有的在线直播功能完成。

桌面播放器播放

下载VLC media player
下载地址 http://www.onlinedown.net/soft/16216.htm
测试播放地址：网上找一个地址，如rtmp://media3.sinovision.net:1935/live/livestream
播放效果：

进阶内容待续