我通過 RTMP 將相機實時流式傳輸到 Nginx RTMP 服務器，如下所示：
ffmpeg -rtsp_transport tcp -i rtsp://user:[email protected]/ -f image2 -stream_loop -1 -re -i /tmp/overlay.png -filter_complex "overlay" -vcodec libx264 -preset ultrafast -profile baseline -pix_fmt yuv420p -an -f flv -rtmp_live live -s 1280x720 rtmp://remote.server.com:1935/show/stream
我的 Nginx 服務器配置：
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
# sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/myccam-access.log;
error_log /var/log/nginx/myccam-error.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
# include /etc/nginx/sites-enabled/*;
server {
listen 8080;
location ~ \.(mp4|m4a|m4v|mov)$ {
add_header content_disposition filename=$request_uri;
add_header accept_ranges bytes;
}
location /hls {
# Disable cache
add_header Cache-Control no-cache;
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length';
add_header Cache-Control no-cache;
add_header Last-Modified "";
# allow CORS preflight requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp/;
}
}
}
rtmp {
server {
listen 1935; # Listen on standard RTMP port
chunk_size 4000;
application show {
live on;
hls on;
hls_fragment_naming system;
hls_fragment 1s;
hls_path /tmp/hls;
hls_continuous on;
hls_variant _720p2628kbs BANDWIDTH=2628000;
}
}
}
我通過已經具有有效 SSL 證書的正在運行的 Apache 服務器代理此設定。我可以毫無問題地通過 VLC 訪問這樣的流。https://myserver.com/CameraName/hls/stream.m3u8
要在瀏覽器中查看，我使用的這個 HTML 是從別人那里借來的：
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera</title>
<style>
html, body {
background: none !important;
overflow: hidden;
margin: 0;
padding: 0;
}
video {
margin: 0 auto;
width: 100%;
height: 100vh;
}
.video-container {
width: 100%;
height: 100vh
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>
<script>
function waitForPublishedStream(showMsg) {
if (typeof showMsg === 'undefined') showMsg = true;
$.get('https://myserver.com/CameraName/hls/stream.m3u8', function (response) {
if (showMsg) {
$('.container-loader .alert-warning').html('Pieslēdzamies kamerai..')
}
if (response.state == 'success') {
if (response.published) {
document.location.reload(true)
} else {
setTimeout(function () {
waitForPublishedStream();
}, 2000)
}
}
})
}
</script>
</head>
<body>
<div class="video-container">
<video id="video" autoplay="autoplay" muted="muted" controls="controls" playsinline="" src="https://myserver.com/CameraName/hls/stream.m3u8">
<source src="https://myserver.com/CameraName/hls/stream.m3u8" type="application/vnd.apple.mpegurl">
</video>
</div>
<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script>
$(document).ready(function () {
const video = document.getElementById('video');
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource('https://myserver.com/CameraName/hls/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
})
</script>
</body></html>
這適用于我在 iPhone 上測驗過的所有設備。這是它作業的最重要平臺。在 iPhone 上，流只會永遠加載而不會顯示任何內容。除錯器顯示設備正在正確下載 .ts 檔案。有趣的是，如果我全屏彈出并快進流，流將加載大約 10% 的時間。發生這種情況時，播放器上的時間戳會顯示一些偏差。類似于-11:21:42。我懷疑這個問題可能與 ffmpeg 提供的 PTS 有關。
Apples mediastreamvalidatorCLI 工具顯示一些 .ts 檔案被踢回為 404。但我無法在任何瀏覽器除錯器上重現這一點。任何幫助是極大的贊賞 ：）
參考：
https://developer.apple.com/forums/thread/690298
https://github.com/arut/nginx-rtmp-module/issues/1656
uj5u.com熱心網友回復：
我通過完全擺脫 Nginx 并改用 node-media-server 解決了這個問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/508518.html
標籤：IOS 苹果手机 nginx http直播 nginx-rtmp
下一篇：在iOS中獲取特定網路的網路速度