文章目錄
| 文件名稱 | 版本號 | 聯繫人 | 備註 | |
|---|---|---|---|---|
| [乾貨]在線直播技術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
播放效果：
進階內容待續