websocket前端卡顿vue

作者：值友7049437559

现在越来越多的摄像头开始支持H.265，因为H.265相比H.264压缩更高，网络传输消耗的资源更少，并且画质更清晰，但是H.265在浏览器中却并不普及，虽然2022年 9 月份，Chrome 发布 M106 版本，开始支持硬件解码，但是WebRTC 并不支持直接传输 h265 视频流。

关于网页播放摄像头RTSP视频流，网上有很多免费开源方案，大多数是通过把RTSP转码成HLS或者RTMP视频流，然后通过Flash插件播放，但是大多数延迟非常高（比如：HLS延迟达到十几秒），并且播放多路或者播放高清视频也非常容易卡顿（服务器转码，资源消耗非常大）。

下面介绍两种用的比较多的方案：

1.ffmpeg +flvjs + websocket + node

原理：利用ffmpeg（开源）把RTSP转码成FLV，用 websocket 传输FLV流，最后用 flvjs（bilibili 开源）在浏览器播放。具体的技术细节可以自行搜索。

效果：延迟2秒以上，播放多路的时候比较占用CPU资源，并且存在卡顿和花屏的情况，要求不高的非商业可以使用。

2.猿大师播放器，官网：http://www.yuanplayer.com/

原理：通过猿大师提供的内嵌网页专利技术，底层调用VLC控件可实现在Chrome、Firefox、Edge等高版本浏览器中低延迟、多路同时播放RTSP实时视频流。

效果：因为调用的是VLC控件播放,和用VLC桌面播放器直接播放效果是一样的，VLC默认缓存是1000，所以延迟是1S左右，如果要降低延迟可以通过修改降低缓存来实现，最低可以到300毫秒左右，同时可以播放20路以上视频不卡顿，适合对延迟要求高的场景，如交通、公安、消防等。

多路播放视频效果：

低延迟效果视频效果：

查看文章精彩评论，请前往什么值得买进行阅读互动

逯胁适1020MQTT和Websocket的区别是什么 -
叔念聪19590212473 ______ MQTT 跟 Websocket 可以认为是不同层面的协议.MQTT 做原生设备的通信,MQTT over WebSocket 主要用于 MQTT 设备跟 Web 端通信.

逯胁适1020如何搭建 websocket服务器 -
叔念聪19590212473 ______ 其实,在服务器的选择上很广,基本上,主流语言都有WebSocket的服务器端实现,而我们作为前端开发工程师,当然要选择现在比较火热的NodeJS作为我们的服务器端环境了. NodeJS本身并没有原生的WebSocket支持,但是有第三方的实...

逯胁适1020Web前端开发的六大误区 -
叔念聪19590212473 ______ 随着互联网+提出以及移动互联网技术的快速发展,web前端开发越来越重要,在这两年迅速走红,越来越多的开发者加入前端开发队伍.不过目前大学中还没有对前端系统的课程体系,再加上web前端技术的更新迭代,大家对它的认识也各不相...

逯胁适1020怎么使用 Socket.io 连接 WebSocket 服务 -
叔念聪19590212473 ______ socket.io封装了websocket,同时包含了其它的连接方式,比如Ajax.原因在于不是所有的浏览器都支持websocket,通过socket.io的封装,你不用关心里面用了什么连接方式.你在任何浏览器里都可以使用socket.io来建立异步的连接.socket.io包含了服...

逯胁适1020WebSocket 和 Socket 的区别 -
叔念聪19590212473 ______ 通俗地讲,Socket就好比是高速公路.高速公路上可以跑的车有多种多样(卡车、大巴,轿车,SUV等等),HTTP只是其中的一种.严格地将,HTTP必须通过Socket进行传输,HTTP是基于Socket的应用层协议,也称为高层协议.除了HTTP之外,基于Socket的应用协议还有很多,如FTP、Telnet等等.

逯胁适1020WebSocket究竟是什么东西 -
叔念聪19590212473 ______ WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个...

逯胁适1020Socket和WebSocket哪个大并发性能高 -
叔念聪19590212473 ______ WebSocket除了连接时用http开始,后来都是标准通信,吞吐量也差不多,建议用WebSocket,大趋势方便后续兼容啊

逯胁适1020Node.js 怎么连接一个客户端的 websocket -
叔念聪19590212473 ______ 可以通过npm安装socket.io-client,var io = require('socket.io-client'); var socketClient = io.connect(config.notifyConfig.host + “:” + config.notifyConfig.port); socketClient.emit(); socketClient.on('',function(){});

逯胁适1020如何使用 MessageWebSocket 进行连接 -
叔念聪19590212473 ______ 先决条件:以下示例使用 JavaScript,且基于 WebSocket 示例. 有关创建使用 JavaScript 的 Windows 运行时应用的常规帮助,请参阅创建你的第一个使用 JavaScript 的 Windows 运行时应用.此外,在本主题中使用 JavaScript Promise 来完成...

逯胁适1020如何通过WebSocket连接服务器进行数据传输 -
叔念聪19590212473 ______ WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. ...