websocket-fmp4、websocket-flv视频播放器web端wsplayer_java前后端交互websocket进行视频播放大华资源-CSDN文库

共5个文件

js：2个

md：1个

svg：1个

需积分: 6 118 浏览量 2022-12-07 14:29:04 上传评论收藏 28KB RAR 举报

WebSocket-FMP4与WebSocket-FLV视频播放器在Web端的应用是现代互联网实时通信技术的重要实践，其中wsplayer是一款常见的实现此类功能的播放器。本文将深入探讨WebSocket协议、FMP4与FLV格式以及wsplayer播放器的相关知识点。 WebSocket协议是一种在客户端和服务器之间建立长连接的网络通信协议，它解决了HTTP协议不适合频繁交互和实时性要求高的问题。WebSocket协议允许双向通信，即服务器和客户端都可以主动发送数据，极大地提高了数据传输效率，尤其适合在线视频流的实时传输。 FMP4（Fragmented MP4）是ISO基础媒体文件格式（ISO BMFF）的一个变种，常用于流式传输和实时视频。FMP4将大视频文件分成多个小片段（称为“Box”或“atoms”），每个片段可以独立传输和解码，这使得视频流能更灵活地适应网络条件的变化。此外，FMP4支持即时更新和时间戳，确保了视频流的实时性和连续性。 FLV（Flash Video）是Adobe Systems开发的一种流式视频格式，主要用于Flash Player和基于Flash的网页视频播放。与FMP4相比，FLV格式较为老旧，但在低带宽环境下的兼容性较好。WebSocket-FLV则是通过WebSocket协议传输FLV格式的视频流，为那些无法使用FMP4但又需要实时流服务的场景提供了解决方案。 wsplayer是一款基于WebSocket协议的Web端视频播放器，它能够处理WebSocket-FMP4和WebSocket-FLV两种类型的视频流。wsplayer的优势在于其轻量级、高性能和良好的跨平台兼容性。它能够实现在浏览器中无缝接收并播放来自服务器的实时视频流，无需借助额外的插件或者第三方库，大大提升了用户体验。在使用wsplayer时，开发者需要注意以下几点： 1. **服务器端配置**：服务器需要支持WebSocket协议，并能够处理FMP4或FLV视频流的分发。这通常需要自定义服务器程序或者使用支持WebSocket的流媒体服务器。 2. **前端集成**：将wsplayer集成到网页中，需要正确设置WebSocket连接地址以及视频流类型，确保与服务器端的通信正常。 3. **错误处理与回退机制**：考虑到网络状况的不稳定性，应设计合理的错误处理和回退机制，例如在网络中断时尝试重新连接，或者提供HTTP渐进式下载作为备选方案。 4. **性能优化**：为了提供流畅的播放体验，需要关注播放器的内存管理、缓冲策略以及CPU利用率，确保在各种设备上都能有良好的表现。 5. **兼容性测试**：由于不同的浏览器对WebSocket和视频格式的支持程度不同，因此在发布前需进行广泛的兼容性测试，确保wsplayer能在主流浏览器及移动设备上正常工作。 WebSocket-FMP4和WebSocket-FLV视频播放器，如wsplayer，为Web端实时视频流提供了高效、灵活的解决方案。开发者在应用这些技术时，需要理解WebSocket协议、FMP4与FLV格式的特点，同时考虑服务器端的实现、前端的集成以及用户体验等因素，以实现高质量的实时视频服务。

资源推荐

资源详情

资源评论

收起资源包目录

wsPlayer.rar （5个子文件）

wsPlayer

wsPlayerlogo.svg 8KB

mp4box.all.min.js 114KB

index.html 868B

README.md 4KB

wsPlayer.js 4KB

# ![Logo](wsPlayerlogo.svg) wsPlayer wsPlayer是一款专注于WebSocket-fmp4协议的web视频播放器，HTTP/WebSocket-fmp4协议与RTMP、HLS、HTTP-FLV相比，具有播放延时短，HTML5兼容性好等优点；见各流媒体协议对比： | 协议名称 | 网络传输协议 | 延时 | 编码类型 | HTML5支持情况 | | :------------: | :----------: | :---: | :--------------------: | :----------------------------: | | RTSP | TCP/UDP/组播 | 0~3s | H264/H265 | 不支持，（RTSP over HTTP除外） | | RTMP | TCP | 0~3s | H264/H265(CodecID =12) | 不支持 | | HLS | HTTP短连接 | 1~10s | H264/H265 | video标签支持 | | HTTP-FLV | HTTP长连接 | 0~3s | H264/H265(CodecID =12) | flv → fmp4 → video标签 | | HTTP-fmp4 | HTTP长连接 | 0~3s | H264/H265 | video标签原生支持 | | WebSocket-FLV | WebSocket | 0~3s | H264/H265(CodecID =12) | flv → fmp4 → video标签 | | WebSocket-fmp4 | WebSocket | 0~3s | H264/H265 | 使用MSE，vidoe标签播放 | 备注：浏览器对单个页面的HTTP长连接的并发数限制为6个，这意味着HTTP-FLV、HTTP-fmp4只能同时播放6个视频画面；但浏览器对WebSocket的连接数没有限制； ## 项目依赖需要使用[mp4box.js](https://github.com/gpac/mp4box.js)来解析fmp4 moov中的codecs； ## 快速开始推荐使用[ZLMediaKit](https://github.com/ZLMediaKit/ZLMediaKit)作为WebSocket-fmp4协议的后端流媒体服务器 1. 部署后端流媒体服务器 ```shell docker pull panjjo/zlmediakit docker run -id -p 8080:80 -p 554:554 panjjo/zlmediakit ``` 2. 使用ffmpeg命令，向ZLMediaKit添加一路RTSP推流 ```shell ffmpeg -re -stream_loop -1 -i test.mp4 -an -vcodec copy -f rtsp -rtsp_transport tcp rtsp://100.100.154.29/live/test ``` 3. 根据ZLMediaKit的[播放url规则](https://github.com/zlmediakit/ZLMediaKit/wiki/%E6%92%AD%E6%94%BEurl%E8%A7%84%E5%88%99)得知，WebSocket-fmp4协议的URL格式为： ```shell ws://100.100.154.29:8080/live/test.live.mp4 ``` 4. 然后调用播放器代码： ```html <html> <head> </head> <body> <script type="text/javascript" src="mp4box.all.min.js"></script> <script type="text/javascript" src="wsPlayer.js"></script> <video muted autoplay id="video"></video> <script> document.addEventListener('DOMContentLoaded', function () { var player = new wsPlayer("video", "ws://100.100.154.29:8083/live/test.live.mp4"); player.open(); }); </script> </body> </html> ``` ## 播放器原理将WebSocket收到的fmp4 Segment片段`appendBuffer`到`MediaSource`中，此时`video.buffered`会记录当前已经`appendBuffer`的视频时间段，然后将`video.buffered`的起始时间设置给`video.currentTime`，然后浏览器就会从`video.buffered`缓存的视频开始播放 ## 项目计划 * v1.0 实现用video标签，调用MSE播放WebSocket-fmp4（H.264）直播流，并把播放器封装为标准的npm组件； * v2.0 实现用WebAssembly FFmpeg解码H.265，然后用canvas标签WebGL渲染YUV，从而实现播放WebSocket-fmp4（H.265）直播流，并实现动态切换H.264、H.265这两种播放机制； * v3.0 实现视频流SEI信息的callback回调 ## 联系方式 - QQ交流群：群名称：wsPlayer 群号：710185138

评论收藏

内容反馈