求助:无需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
相关产品推荐
相关产品推荐

