Web网页无插件播放 海康摄像头

1. web直接播放摄像头的难点现代浏览器Chrome, Edge, Firefox, Safari已彻底淘汰 NPAPI/ActiveX 插件。而相机的输出主要是RTSP或SDK原生不支持页面播放需要安装厂商插件基于插件开发视频应用通用性差要完美解决视频Web无插件访问需要使用流媒体进行转码通过支持h5的Web播放器实现访问。实现摄像头到web页面上无插件播放我们先选择一款流媒体中转服务软件负责转码和直播流的发布可以选择MediaMTX、SRS、ZLMediaKit、RTMS等流媒体服务器流媒体服务器的安装和部署这里详细叙述由于RTMS部署和访问比较很简单所以我选择RTMS流媒体服务器下载地址xxx/file下载后进行安装安装后通过浏览器可进入流媒体管理页面进行配置管理页面默认用户名admin密码admin在页面的系统管理处登记摄像头然后就可以进行访问了。2. web直接播放摄像头的方法当前web播放主要使用浏览器内置的mse或webrtc等技术进行播放MSEMedia Source Extensions是HTML5的一个强大API它允许JavaScript动态构建媒体流通过MSE我们可以将视频内容分割成小片段根据网络状况动态调整视频质量实现自适应比特率流媒体让直播视频几乎实时播放MSE需要实现流的传输然后将流输入MSE播放而webrtc则包含了视频传输和播放但进行SDP信令的交互目前多摄像头或监控设备的视频访问主流使用MSE实现视频的web无插件访问大多数流媒体使用http或websocket输出flv流,web端则使用flv播放器播放视频比较知名的flv播放器有flv.js,video.js等rtms在支持flv流的输出同时支持http和websocket取流同时还输出了rtm流rtm流传输效率更高更安全但rtm流需要使用rtms-player进行播放rtms-player播放器主文件hancplayer.js实测播放效率远高与flv.js与video.js下面以代码为例介绍flv.js与hancplayer.js的用法flv.js播放flv流的代码示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleRTMS FLV 直播播放器/title style video { width: 100%; max-width: 800px; background: #000; } body { font-family: sans-serif; padding: 20px; } /style /head body h2 HTTP-FLV 播放 (仅支持 H.264)/h2 video idvideoElement controls muted playsinline/video div idstatus stylemargin-top:10px; color:#666;初始化中.../div !-- 引入 flv.js -- script src./flv.min.js/script script const video document.getElementById(videoElement); const status document.getElementById(status); // 关键构建 RTMS HTTP-FLV 协议地址 const flvUrl http://192.168.0.14:5555/play.flv?cmdliveip192.168.0.228port80useradminpassadmin12345ftype0stream0; if (flvjs.isSupported()) { const flvPlayer flvjs.createPlayer({ type: flv, url: flvUrl, isLive: true, hasAudio: true, hasVideo: true }, { enableWorker: true, enableStashBuffer: false, // 关闭缓冲以降低延迟 stashInitialSize: 128 }); flvPlayer.attachMediaElement(video); flvPlayer.load(); flvPlayer.play() .then(() status.textContent ✅ 播放中... (延迟约 1-2s)) .catch(err { status.textContent ❌ 自动播放失败请点击播放按钮。; console.error(err); }); flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) { status.textContent ❌ 错误: ${errType}; console.error(播放错误:, errType, errDetail); }); } else { status.textContent ❌ 当前浏览器不支持 flv.js (MSE)。; } /script /body /htmlhancplayer.js播放rtm流的代码示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleRTMS HancPlayer 无插件演示/title style body { font-family: sans-serif; padding: 20px; background: #f5f5f5; } .container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } canvas { border: 1px solid #ddd; background: #000; width: 100%; max-width: 800px; } .controls { margin-top: 15px; } button { padding: 10px 20px; cursor: pointer; background: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px; } button.stop { background: #ff4d4f; } button:hover { opacity: 0.9; } /style /head body div classcontainer h2 H.265/H.264 Web 无插件播放 (WASM)/h2 div canvas idcanvas width800 height450/canvas /div div classcontrols button idbtn-live▶ 开始播放/button button idbtn-stop classstop⏹ 停止播放/button /div p stylecolor: #666; font-size: 12px; margin-top: 10px; 提示需确保 hancplayer.js 和 hancmedia.wasm 文件可通过 HTTP 访问。 /p /div !-- 引入播放器核心 JS (请根据实际路径修改) -- script src./hancplayer.js/script script let playerIndex -1; const canvas document.getElementById(canvas); // 启动播放 document.getElementById(btn-live).addEventListener(click, function () { if (playerIndex ! -1) { alert(正在播放中请先停止); return; } // 关键构建 RTMS WSPRO 协议地址 // 格式: ws://RTMS_IP:5555/play.pro?ip相机IPport相机端口user...pass...ftype...chan...stream... // ftype: 0海康, 1大华, 7通用ONVIF (根据实际情况调整) const url ws://192.168.0.14:5555/play.pro?ip192.168.0.228port80useradminpassadmin12345ftype7chan0stream1; console.log(正在连接:, url); // 调用 openplayer(url, 类型, canvas对象, 宽, 高) // 类型: 0实时直播, 1回放 playerIndex openplayer(url, 0, canvas, 800, 450); if (playerIndex -1) { alert(播放启动失败请检查控制台日志或 WASM 文件路径); } else { console.log(播放成功ID:, playerIndex); } }); // 停止播放 document.getElementById(btn-stop).addEventListener(click, function () { if (playerIndex -1) return; closeplayer(playerIndex); playerIndex -1; console.log(播放已停止); }); /script /body /html注意事项rtms-player基于 WebAssembly开发所以rtms-player播放器需要部署在web后台且web服务器需要开放wasm组件访问权限由于浏览器的安全限制WebAssembly组件不能直接在本地文件上加载这点和纯JS代码有本质区别浏览器访问web服务器实现视频无插件播放。3. 附件RTMS服务端部署3.1 下载与安装最新安装包RTMS.tgz。通过网盘分享的文件RTMS链接: https://pan.baidu.com/s/15niRyrdlYOKNWU6nLkhn7w?pwdhr6r 提取码: hr6r# 1. 解压安装包 tar zxvf RTMS.tgz cd RTMS # 2. 赋予执行权限 chmod x deploy_rtms.sh # 3. 一键自动部署 (配置环境、Systemd 自启、网络优化) sudo ./deploy_rtms.sh3.2 设备接入配置部署完成后服务自动运行。访问后台浏览器打开http://服务器IP默认账号admin/ 密码admin添加设备点击“添加设备”输入摄像头的IP、端口、用户名、密码。系统会自动测试连接。状态确认确保设备状态显示为“在线”。