簡單的直播
技術選型:
- 手機端:
EasyRTMPEasyRTMP專案 Github地址 RTMP服務器:nginx-http-flvwindow版(編譯好)- 網頁端:
vue + flv.js
作業流程(參考EasyRTMP作業流程圖)
實作步驟
啟動nginx-httpflv服務
- 啟動命令
//解壓目錄下使用cmd命令
nginx.exe -c conf\nginx.conf
nginx.conf內容,主要配置為rtmp 和 http服務部分- 手機端推流地址為:
rtmp:\\服務器IP: 1935\live\XXXX - 網頁訪問視頻流地址為:
http:\\服務器IP: 80\live?app=live&stream=XXXX XXXX與XXXX對應
worker_processes 1;
events {
worker_connections 1024;
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir temp;
# 添加RTMP服務
rtmp {
server {
listen 1935; # 監聽埠,手機端推流時使用的埠
chunk_size 4000;
application live {
live on;
gop_cache on; # GOP快取，on時延遲高，但第一幀畫面加載快，off時正好相反，延遲低，第一幀加載略慢，
}
}
}
# HTTP服務
http {
include mime.types;
default_type application/octet-stream;
server {
listen 80; # 監聽埠
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
root html;
}
location /live {
flv_live on; #打開HTTP播放FLV直播流功能
chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回復
add_header 'Access-Control-Allow-Origin' '*'; #添加額外的HTTP頭
add_header 'Access-Control-Allow-Credentials' 'true'; #添加額外的HTTP頭
}
location /stat.xsl {
root html;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /control {
rtmp_control all; #rtmp控制模塊的配置
}
}
}
手機安裝 EasyRTMP.apk
- 掃碼下載安裝: 安卓+ios版掃碼下載地址
- 打開
EasyRTMP應用 ==> 設定界面 ==> 設定推流地址 - 此時推送的
flv地址為:http://192.168.1.73/live?app=live&stream=heh
- 回傳主頁面 ==> 推送或推送螢屏 ==> 推流中
網頁端
vue專案中使用flv.js- 簡單實作代碼(僅供參考,自行調優)
<template>
<div style="padding: 20px">
<p
style="font-size: 20px;color: #0a7491;font-weight: bold;font-family: 楷體;text-align: center"
>rtmp拉取視頻顯示</p>
<div style="text-align:center">
<div class="search">
直播地址：
<input id="video_path" type="text" style="width: 300px" v-model="url" />
<button type="button" @click="changePath()">確定</button>
</div>
<div class="mainContainer">
<video
id="videoElement"
class="centeredVideo"
controls
autoplay
width="360"
height="640"
preload
>
Your browser is
too old which doesn't support HTML5 video.
</video>
</div>
<div class="controls">
<button @click="flv_start()">開始</button>
<button @click="flv_pause()">暫停</button>
<button @click="flv_destroy()">停止</button>
</div>
</div>
</div>
</template>
<script>
import flvjs from "flv.js";
export default {
data() {
return {
url: "",
flvPlayer: null,
};
},
mounted() {
this.flvPlayer = document.getElementById("videoElement");
},
methods: {
resetUrl(url) {
if (flvjs.isSupported()) {
try {
this.flvPlayer = flvjs.createPlayer(
{
type: "flv",
isLive: true, //<====加個這個
url: url, //<==自行修改
},
{
enableWorker: false, //不啟用分離執行緒
enableStashBuffer: false, //關閉IO隱藏緩沖區
isLive: true,
lazyLoad: false,
}
);
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load(); //加載
this.flvPlayer.play();
this.flv_start();
} catch (error) {
console.log("flvj error =====>>> " + error);
}
}
},
flv_start() {
this.flvPlayer.play();
},
flv_pause() {
this.flvPlayer.pause();
},
flv_destroy() {
this.flvPlayer.pause();
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer = null;
},
changePath() {
let path = this.url;
if (path === null || path === "") {
alert("請輸入地址");
return;
}
this.resetUrl(path);
},
},
};
</script>
<style lang="scss" scoped>
.search {
display: block;
margin-bottom: 30px;
}
.mainContainer {
display: block;
width: 360px;
margin-left: auto;
margin-right: auto;
}
.centeredVideo {
display: block;
width: 100%;
height: 640px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
</style>
- 填入直播地址:
http://192.168.1.73/live?app=live&stream=heh - 直播效果
總結
nginx啟動時可能會報錯,需要自行查詢資料解決.- 直播流訪問出現跨域問題,需要自行查詢資料解決.
- 直播延遲有2~3秒.
- 碼率設定越大,延遲越大,視頻越清晰.
- 手機耗電很快,使用一會發熱嚴重.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317868.html
標籤：其他