草庐IT

在自己网页浏览器端通过websocket接入海康摄像头实时视频-方案二

itxiaoxd2020 2023-06-17 原文

背景

物联网时代，作为开发，基本上都需要在系统中调取摄像头的实时视频，不懂的时候觉得挺复杂了，但是弄的久之后发现有很多比较好的方法，可以实现在系统中打开摄像头实时视频更加快速和流畅。在此之前我经历了几个阶段：
1.第一个阶段是使用rtmp转rtsp的方式，通过nginx的一个模块加上ffmpeg去进行视频的播放，其中存在一个问题rtsp在浏览器中播放时需要flash插件的支持，不然播放不了（且打开比较慢），虽然有时会出现问题，但是一直这样也用了很久，在给客户部署的时候也发现比较麻烦，所以有了第二个阶段。
2.第二阶段我发现客户的摄像头版本比较新，可以支持websocket的播放，这种方式基本不用部署nginx的模块和ffmpeg,直接使用海康摄像头的api就可以在浏览器播放实时视频了，这个阶段的方案如下【方案一】所示。
3.接下来到了阶段三，为什么有阶段三呢，是因为websocket播放摄像头实时视频虽好，但是客户还是有大部分摄像头不支持websocket的方式，于是又发现了一种新的技术，旧的的摄像头也可以通过自己写websocket服务端的方式实现，技术是ffmpeg+websocket+jsmpeg+java的方式实现，这个方式主要是参考：
https://blog.csdn.net/qq_36304149/article/details/114983991?utm_source=app&app_version=5.5.0&code=app_1562916241&uLinkId=usr1mkqgl919blen
这个方法实现容易，经过多次测试，没有发现大的问题，视频可以连续播放超过一晚上，可以任意根据websocket客户端连接进行视频流的推送，可以多个电脑同时打开多个不同的视频，基本都没什么问题。

其中jsmpeg可以直接在官网进行下载。
websocket客户端连接地址：

var player = new JSMpeg.Player('ws://192.166.11.136:9102/aa/rtsp?param=10ebce7e-52f6-4c36-8ac4-31fc22bbb850_7', {
    canvas: document.getElementById('video'),
    decodeFirstFrame: true,
    disableWebAssembly: false,
    throttled: false, //这里设置为false，不然不触发onSourceCompleted事件
    chunkSize: 4 * 1024 * 1024,
    disableGl: false,
    audio: true,
    autoplay:true,
    loop:false,
    onSourceCompleted:()=>{
        
        
    }

10ebce7e-52f6-4c36-8ac4-31fc22bbb850_7是UUID加摄像头ID
该参数可以在打开视频的时候调用后台接口生成这样一个会话ID.

ffmepg推流地址：

ffmpeg -rtsp_transport tcp  -i "rtsp://admin:password@ip:554/Streaming/Channels/101?transportmode=unicast"  -q 0 -f mpegts -codec:v mpeg1video -s 700x400 http://192.166.11.136:9120/aa/rtsp?query=7

其中query=7表示这是摄像头id为7的视频流，通过ffmpeg进行推送的，服务端只需要写一个接口地址进行取流推送即可。

坑1

ffmpeg推送几分钟就中断了（不要取怀疑ffmpeg的问题还是接口超时等问题，其实就是取流的问题），参考：
https://blog.csdn.net/qq_40351360/article/details/125284210

注意，最好不要用这个方案！！！！！！！！！！，发现存在问题，浏览器容易内存异常，这个错误不好解决！！2022-11-30

方案一

https://blog.csdn.net/qq_40351360/article/details/124894387?spm=1001.2014.3001.5502

海康网页浏览spanxffxff0cwebsocket音视频网络协议

有关在自己网页浏览器端通过websocket接入海康摄像头实时视频-方案二的更多相关文章

  1. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  2. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  3. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  4. RUBY - 网页抓取 - (OpenURI::HTTPError) - 2

    我正在尝试用ruby​​编写一个简单的网络抓取代码。它一直工作到第29个url，然后我收到此错误消息:C:/Ruby193/lib/ruby/1.9.1/open-uri.rb:346:in`open_http':500InternalServerError(OpenURI::HTTPError)fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:775:in`buffer_open'fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:203:in`blockinopen_loop'fromC:/Ruby193/lib/r

  5. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  6. ruby-on-rails - 如何测试自己对 Ruby/ROR 的了解？ - 2

    是否有self验证的问题列表。看着那个，我可以确定我知道。我应该复习一下。在学习的过程中，我列了一个这样的list，但它只包含我在某处听说过的项目。我需要一段时间才能找到新的东西。 最佳答案 以下是针对ruby​​和Rails的一些测试列表。证书名称:RubyonRails谁提供:oDeskIncorporation认证费用:免费网站:https://www.odesk.com/tests/985?pos=0证书名称:RubyonRails提供者:Techgig.com(TimesBusinessSolutionsLimited(T

  7. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  8. C/C++好用的websocket库 - 2

    IntrductionLibwebsocketsisasimple-to-use,MIT-license,pureClibraryprovidingclientandserverforhttp/1,http/2,websockets,MQTTandotherprotocolsinasecurity-minded,lightweight,configurable,scalableandflexibleway.It’seasytobuildandcross-buildviacmakeandissuitablefortasksfromembeddedRTOSthroughmasscloudservi

  9. ruby-on-rails - Websocket-rails 不适用于 Nginx 和 Unicorn 的生产环境 - 2

    我有带有gemwebsocket-rails0.7的Rails3.2应用程序。在开发机上，一切正常在生产环境中，我使用Nginx/1.6作为代理服务器，Unicorn作为http服务器。Thin用于独立模式(在https://github.com/websocket-rails/websocket-rails/wiki/Standalone-Server-Mode之后)。nginx配置:location/websocket{proxy_passhttp://localhost:3001/websocket;proxy_http_version1.1;proxy_set_headerUp

  10. ruby - 如何构建自己的自定义 session 存储类？ - 2

    默认情况下，session存储在浏览器cookie(:cookie_store)中，但您也可以指定其他包含的存储之一(:active_record_store、:mem_cache_store或您自己的自定义类。请提供我构建自定义类的方式config.action_controller.session_store=:your_customer_class 最佳答案 MaurícioLinhares是正确的，但是，我想添加一些细节，因为我认为您需要实现哪些方法并不明显。你可以继承自ActionDispatch::Session::Ab

随机推荐