HTML实现海康摄像头实时监控功能
发布时间:2017-11-03 15:51:21 作者:佚名 我要评论
最近公司安排我做一个ccfa的小东东,其中有一项需求就是做一个网页播放摄像头的实时监控功能,对于我这个小菜鸟来说真是难到了,下面小编给大家带来了HTML实现海康摄像头实时监控功能,感兴趣的朋友一起看看吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
最近公司安排做CCFA的一些东西,有一项就是做一个网页播放摄像头的实时监控。网上百度了很久,很多都是直接用vlc插件实现,但是目前主流浏览器都已经不支持vlc插件了,搞了很久也没成功。
网上大多是这么实现的:
1 2 3 4 5 6 7 8 | < object type = 'application/x-vlc-plugin' id = 'vlc' events = 'True' width = "720" height = "540" pluginspage = "http://www.videolan.org" codebase = "http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz" > < param name = 'mrl' value = rtsp ://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream' /> < param name = 'volume' value = '50' /> < param name = 'autoplay' value = 'true' /> < param name = 'loop' value = 'false' /> < param name = 'fullscreen' value = 'false' /> </ object > |
偶然发现一篇文章,可以使用工具进行推流,然后在网页上使用<video>播放。
最后实现的效果图:
最后经过测试,正常会有2秒左右的延迟,还在能接受范围内。
总结
以上所述是小编给大家介绍的HTML实现海康摄像头实时监控功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了HTML5 图片预加载的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习2020-03-25
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
这篇文章主要介绍了HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值2020-04-27- 这篇文章主要介绍了Html5调用手机摄像头并实现人脸识别的实现,混合App开发,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2018-12-21
- 这篇文章主要介绍了html5调用摄像头功能的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-05-07
- 今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的2017-12-27
- 这篇文章主要介绍了如何在HTML里加载摄像头,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-29
最新评论