You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:无需Flash,通过Nginx将摄像头经FFmpeg推流至VideoJS的方案

纯HTML5实现树莓派摄像头流采集+Nginx推流+VideoJS播放方案

当然可以实现无Flash的纯HTML5方案!你之前卡壳大概率是因为现代浏览器早已不再支持RTMP协议(它依赖Flash),得换成HLS或DASH这两种HTML5原生兼容的流媒体协议。我之前在树莓派3上折腾过完全一样的流程,给你一步步捋清楚正确的实现路径:

1. 调整Nginx配置(支持HLS转码)

首先修改你的Nginx配置,让RTMP模块接收流后自动转成HLS格式(HLS的兼容性最好,适配绝大多数浏览器和VideoJS)。打开Nginx配置文件(通常是/etc/nginx/nginx.conf),添加或更新以下内容:

rtmp {
    server {
        listen 1935;
        chunk_size 4096;

        application live {
            live on;
            # 开启HLS转码,指定分片文件存储路径
            hls on;
            hls_path /var/www/html/hls;
            hls_fragment 5s; # 每个视频分片5秒
            hls_playlist_length 20s; # 播放列表保留最近20秒的内容
        }
    }
}

http {
    # 保留原有HTTP配置,新增HLS文件的HTTP访问规则
    server {
        listen 80;
        location /hls {
            root /var/www/html;
            add_header Access-Control-Allow-Origin *; # 解决跨域播放问题
        }
    }
}

注意:要先创建HLS文件存储目录,并给Nginx赋予写入权限:

sudo mkdir -p /var/www/html/hls
sudo chown www-data:www-data /var/www/html/hls

修改完成后重启Nginx生效:sudo systemctl restart nginx

2. FFmpeg硬件编码推流命令

树莓派3的硬件编码器是h264_omx,用它推流能大幅节省CPU资源。执行以下命令从摄像头采集并推送到Nginx的RTMP端点:

ffmpeg -f v4l2 -input_format h264 -i /dev/video0 -c:v h264_omx -b:v 500k -f flv rtmp://localhost/live/stream

参数解释:

  • -f v4l2:指定摄像头输入格式为树莓派兼容的V4L2标准
  • -input_format h264:让摄像头直接输出H.264格式,避免额外软编码消耗
  • -i /dev/video0:摄像头设备路径(如果是USB摄像头可能需要调整)
  • -c:v h264_omx:调用树莓派硬件编码器
  • -b:v 500k:视频比特率,可根据网络带宽调整(比如1000k对应1Mbps)
  • -f flv:推流格式为FLV(RTMP协议的标准格式)
  • rtmp://localhost/live/stream:Nginx的RTMP接收地址,stream是自定义的流名称

推流成功后,FFmpeg会输出实时的编码统计信息,没有报错就说明流已经正常推送到Nginx了。

3. VideoJS网页播放配置

现在用纯HTML5的VideoJS播放HLS流,完全不需要Flash。网页代码示例:

<!DOCTYPE html>
<html>
<head>
    <title>树莓派摄像头直播</title>
    <!-- 引入VideoJS的CSS和JS(建议本地部署,或使用官方稳定版本) -->
    <link href="video-js.css" rel="stylesheet">
    <script src="video.min.js"></script>
</head>
<body>
    <video id="camera-player" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="360" data-setup='{}'>
        <!-- 替换成你的树莓派IP地址 -->
        <source src="http://你的树莓派IP/hls/stream.m3u8" type="application/x-mpegURL">
        你的浏览器不支持HTML5视频播放
    </video>
</body>
</html>

关键注意点:

  • 流地址的type必须设为application/x-mpegURL,这是HLS的标准MIME类型
  • 如果网页和树莓派不在同一局域网,要确保树莓派的80端口能被外部访问
  • 新版VideoJS已经内置HLS支持,无需额外安装插件

4. 常见问题排查

如果还是无法播放,可以按以下步骤排查:

  • 查看Nginx错误日志(/var/log/nginx/error.log),检查是否有HLS文件写入失败的权限问题
  • 用浏览器直接访问http://你的树莓派IP/hls/stream.m3u8,如果能下载文件,说明Nginx的HLS服务正常
  • 检查FFmpeg推流是否有报错,比如摄像头设备权限问题(可临时用sudo chmod 666 /dev/video0解决)
  • 确认树莓派防火墙没有拦截1935(RTMP端口)和80(HTTP端口)

内容的提问来源于stack exchange,提问作者James

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 08:27:04