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