admin管理员组文章数量:1659757
简单的直播
技术选型:
- 手机端:
EasyRTMP
EasyRTMP项目 Github地址 RTMP
服务器:nginx-http-flv
window版(编译好)- 网页端:
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秒.
- 码率设置越大,延迟越大,视频越清晰.
- 手机耗电很快,使用一会发热严重.
版权声明:本文标题:实现一个网页直播功能超级简单(EasyRTMP.apk + nginx-http-flv + vue + flv.js) 不使用 Flash 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729836783a1214419.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论