草庐IT

websocket-fmp4播放器wsPlayer

托卡马克2022 2023-06-07 原文

一、web视频播放器的现状与问题

1、流媒体协议选型：

主流流媒体协议归纳总结：

协议名称网络传输协议延时编码类型HTML5支持情况
RTSPTCP/UDP/组播0~3sH264/H265不支持，（RTSP over HTTP除外）
RTMPTCP0~3sH264/H265(CodecID =12)不支持
HLSHTTP短连接1~10sH264/H265video标签支持
HTTP-FLVHTTP长连接0~3sH264/H265(CodecID =12)flv → fmp4 → video标签
HTTP-fmp4HTTP长连接0~3sH264/H265video标签原生支持
WebSocket-FLVWebSocket0~3sH264/H265(CodecID =12)flv → fmp4 → video标签
WebSocket-fmp4WebSocket0~3sH264/H265使用MSE，vidoe标签播放

在直播场景，目前主流的方案是http-flv，这个协议的优劣分析：

优点：

  • 生态比较完善：

    大多数后端流媒体服务器都支持rtmp/http-flv协议，比如srs，zlmediakit。

    大多数web播放器也支持http-flv协议，比如flv.js，DPlayer，ckplayer。

    很多CDN都支持http-flv分发。

  • 视频实时性比较好，可以做到0~3s；

缺点：

  • flv不支持H.265；

  • flv数据解析过程比较复杂，web播放器需要将flv转为fmp4数据，然后用MediaSource播放；

HLS协议也是一个选择，HLS支持H.265，但是hls播放延迟较大；

由于chrome浏览器对同源http长连接的并发数限制为6个，所以http-flv最多只能播放6个画面，此时可以考虑使用websocket代替http，即
websocket-flv协议；

2、解码和渲染方案的选型：

H.264：浏览器的video标签支持H.264编码格式，所以解码和渲染由浏览器内部完成；

H.265：主流方案是webassembly+webGL；

二、适用直播场景的新方案：wsPlayer

github地址：https://github.com/v354412101/wsPlayer

​ wsPlayer是一款专注于WebSocket-fmp4协议的web视频播放器，HTTP/WebSocket-fmp4协议与RTMP、HLS、HTTP-FLV相比，具有播放延时短，HTML5兼容性好等优点；

WebSocket-fmp4协议支持H.264/H.265，视频实时性比较好，协议解复用简单，并发路数没有限制。

1、播放器原理

​ 将WebSocket收到的fmp4 Segment片段appendBuffer到MediaSource中，此时video.buffered会记录当前已经appendBuffer的视频时间段，然后将video.buffered的起始时间设置给video.currentTime，然后浏览器就会从video.buffered缓存的视频开始播放

2、最佳实践

推荐使用ZLMediaKit作为WebSocket-fmp4协议的后端流媒体服务器

1）部署后端流媒体服务器

docker pull panjjo/zlmediakit
docker run -id -p 8080:80 -p 554:554 panjjo/zlmediakit

2）使用ffmpeg命令，向ZLMediaKit添加一路RTSP推流

ffmpeg -re -stream_loop -1 -i test.mp4 -an -vcodec copy -f rtsp -rtsp_transport tcp rtsp://192.168.1.3/live/test

3）根据ZLMediaKit的播放url规则得知，WebSocket-fmp4协议的URL格式为：

ws://192.168.1.3:8080/live/test.live.mp4

4）然后调用播放器代码：

<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://192.168.1.3:8080/live/test.live.mp4");
            player.open();
        });
    </script>
</body>
</html>

依赖库：https://github.com/gpac/mp4box.js

3、项目计划

  • 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回调

4、联系方式

  • QQ交流群：710185138
websocket-fmpwebsocketspanclasstokenfmp4web视频播放器video标签H265播放器

有关websocket-fmp4播放器wsPlayer的更多相关文章

  1. 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

  2. ruby - 如何以编程方式将 mp3 转换为 itunes 可播放的 aac/m4a 文件？ - 2

    我一直在寻找一种以编程方式或通过命令行将mp3转换为aac的方法，但没有成功。理想情况下，我有一段代码可以从我的Rails应用程序中调用，将mp3转换为aac。我安装了ffmpeg和libfaac，并能够使用以下命令创建aac文件:ffmpeg-itest.mp3-acodeclibfaac-ab163840dest.aac当我将输出文件的名称更改为dest.m4a时，它无法在iTunes中播放。谢谢! 最佳答案 FFmpeg提供AAC编码功能(如果您已编译它们)。如果您使用的是Windows，则可以从here获取完整的二进制文件。

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

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

  4. ruby - 如何播放 mp3 文件？ - 2

    我如何用ruby​​编写一个脚本，当从命令行执行时播放mp3文件(背景音乐)？我试过了run="mplayer#{"/Users/bhushan/resume/m.mp3"}-aosdl-vox11-framedrop-cache16384-cache-min20/100"system(run)但它也不起作用，以上是播放器特定的。如果用户没有安装mplayer怎么办。有没有更好的办法？ 最佳答案 我一般都是这样pid=fork{exec'mpg123','-q',file} 关于ruby

  5. 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

  6. WebSocket的那些事（1-概念篇） - 2

    目录一、什么是Websocket二、WebSocket部分header介绍三、HTTPVSWebSocket四、什么时候使用WebSockets五、关于SockJS和STOMP一、什么是Websocket根据RFC6455标准，Websocket协议提供了一种标准化的方式在客户端和服务端之间通过TCP连接建立全双工、双向通信渠道。它是一种不同于HTTP的TCP协议，但是被设计为在HTTP基础上运行。Websocket交互始于HTTP请求，该请求会通过HTTPUpgrade请求头去升级请求，进而切换到Websocket协议。请求报文如下：GET/spring-websocket-portfoli

  7. ruby-on-rails - 如何使用 Rails/websocket-rails(独立)调试 'Invalid frame header' Websocket 问题 - 2

    我开始使用websocket-rails，试图将旧的通知轮询系统(在Ruby2.1/Rails4.0上)转换为更现代的WS系统。我在独立模式下使用WebsocketRails，这是我的配置，基本上是默认配置:WebsocketRails.setupdo|config|config.standalone=trueend我还设置了一个在默认端口上运行的新Redis-这里似乎没有通信问题。在客户端，我添加了websocket-rails的JS，并在尝试打开连接和订阅channel时使用:@dispatcher=newWebSocketRails"localhost:3001/websocke

  8. ruby 声音播放 - 2

    这是2009年，早在2001年左右，ruby中的声音播放就没有好的绑定(bind)。有变化吗？我正在寻找可以控制原始声音或mp3、ogg和flac播放的东西。我的谷歌搜索已经枯竭。编辑:Linux、OSX，如果可能的话还有Windows。 最佳答案 您没有提到平台。Thispage描述了win32-sound库，它似乎至少支持WAV播放。对于一个更加平台中立的方式，Ruby/SDL为广受欢迎的SDL提供绑定(bind)图书馆。 关于ruby声音播放，我们在StackOverflow上找到

  9. ruby-on-rails - ActionCable - 无法在生产环境中升级到 WebSocket - 2

    ActionCable在生产中不起作用。在开发中运行良好，但在生产中运行不佳。在Ubuntu14.04上使用Puma运行Nginx。我已经检查过redis-server已启动并正在运行。Rails-v5.0.0.1production.log:INFO--:StartedGET"/cable/"[non-WebSocket]for178.213.184.193at2016-11-2514:55:39+0100ERROR--:FailedtoupgradetoWebSocket(REQUEST_METHOD:GET,HTTP_CONNECTION:close,HTTP_UPGRADE:)

  10. ruby - Sinatra 与 EventMachine WebSockets 一起使用是否成功？ - 2

    我已经使用Sinatra一段时间了，我想通过websockets推送数据来为我的网络应用程序添加一些实时功能。我已经成功地单独使用了gem“em-websocket”，但无法编写一个具有sinatra网络服务器和网络套接字服务器的ruby​​文件。我试过旋转运行!或开始!方法在单独的线程中关闭但没有成功。有人用过这个吗？我想将它们放在同一个文件中，这样我就可以在两个服务器之间共享变量。 最佳答案 没试过，但应该不会太难:require'em-websocket'require'sinatra/base'require'thin'EM

随机推荐