楔子
ffmpeg錄製屏幕並推流 ffmpeg+nginx-http-flv-module+flv.js
學習筆記
三個位置 注意
1 nginx
window 需要編譯 ，可以直接用這個編譯好的 https://download.csdn.net/download/u012848709/12391725
rtmp application myapp
2 推流
rtmp://127.0.0.1:1985/myapp/mystream
3 頁面播放 url
Z http://127.0.0.1:8080/live?port=1985&app=myapp&stream=mystream
nginx 配置
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#error_log logs/error.log debug;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
# HTTP服務
http {
include mime.types;
default_type application/octet-stream;
#access_log logs/access.log main;
server {
listen 8080; # 監聽端口
location /stat.xsl {
root html;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location / {
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頭
expires -1;
}
}
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir logs;
# 添加RTMP服務
rtmp {
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 15s;
drop_idle_publisher 15s;
log_interval 5s; #log模塊在access.log中記錄日誌的間隔時間，對調試非常有用
log_size 1m; #log模塊用來記錄日誌的緩衝區大小
server {
listen 1985; # 監聽端口、
application myapp {
live on ;
gop_cache on ; #打開GOP緩存，減少首屏等待時間
### 保存視頻/start
record video; #記錄直播視頻
#record_path html/rec/; #視頻保存路徑
#record_path F:/ps/nginx-rtmp/html ; #視頻保存路徑
#record_suffix -%d-%b-%y-%T.flv; #視頻保存名：日期+.flv# windows下測試時間作爲文件名是吧
#record_suffix -%d-%b-%y-%T.flv; #視頻保存名：日期+.flv
### 保存視頻/end
}
}
}
ffmpeg 下載地址
ffmpeg -f gdigrab -i desktop -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -f flv rtmp://127.0.0.1:1985/myapp/mystream
網頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 10px;
}
.logcatBox {
border-color: #CCCCCC;
font-size: 11px;
font-family: Menlo, Consolas, monospace;
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div><input type="text" id='urlId' value="" /> <button type="button" id="butPlay">播放</button></div>
<div class="mainContainer">
<video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay='true'>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
</body>
<script>
console.log('start')
// alert(flvjs.isSupported())
if (flvjs.isSupported()) {
play();
}
$("#butPlay").click(function(event){
play();
})
function play(){
var us = $("#urlId").val();
console.info(new Date(), us)
if (!us) {
us = 'mystream'
}
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
enableWorker: true, //瀏覽器端開啓flv.js的worker,多進程運行flv.js
isLive: true, //直播模式
hasAudio: false, //關閉音頻
hasVideo: true,
stashInitialSize: 128,
enableStashBuffer: true, //播放flv時，設置是否啓用播放緩存，只在直播起作用。
url: ' http://127.0.0.1:8080/live?port=1985&app=myapp&stream=mystream'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</html>