Web端解码视频流：（Part1 纯Java Script 解码[不建议大家这样做，因为普适性不强]）

最新推荐文章于 2024-05-25 09:36:05 发布
最新推荐文章于 2024-05-25 09:36:05 发布
阅读量9.2k 收藏 8
点赞数 1
分类专栏： Web 前端 文章标签： 视频流 web Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20038925/article/details/78047951
版权

       最近在做Web端解码实时视频流的工作，由于一开始对视频直播技术一无所知，耗费了很大力气去调研，为了方便后来者入门，特写此博客。

       1.基础知识

        所谓的FLV、AVI、MP4等视频文件与H.264、H.263、MPEG1、MPEG2等’有什么区别？

        简单来说，后者是视频的压缩编码标准，前者是后者的容器，即会对在后者生成的文件头添加一些索引信息，以方便播放器播放。具体信息可查看链接https://www.zhihu.com/question/20997688

        2.调研

        调研到的几个用JavaScript 解码的工程如下：

         （1）Broadway.js  GitHub地址 

最低0.47元/天 解锁文章
Bupt_beyond
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
RTSP转WebRTC视频协议解决方案
irainsa的博客
04-25 1198
本文重点在于阐述工程实践部分，从整体勾勒视频流端到端数据流以及简要概述相关组件的功能，而理论描述方面则简略提及视频相关协议，如RTP/RCTP、SDP、RTSP、WebRTC等，还有相关技术概念，如NAT、P2P和ICE candidate等。在实现RTSP协议转换WebRTC协议模块方面则借鉴模仿开源组件mediamtx中WebRTC服务模块处理代码，并结合开源的gortsplib库糅合而成（有待改进RTSP转WebRTC视频协议解决方案 - 掘金。
web流视频插件
04-03
ckplayer(超酷网页视频播放器),支持http协议下的flv,f4v,mp4,支持rtmp视频流和rtmp视频回放,支持m3u8格式,是你做视频直播,视频点播的理想播放器
基于WebSocket前端开发H.264流实现视频实时播放
yimelancholy的博客
10-25 2万+
基于WebSocket前端开发H.264流实现视频实时播放
推荐开源项目：YUVCanvas - 高效的视频帧HTML5画布渲染库
最新发布
gitblog_00014的博客
05-25 288
推荐开源项目：YUVCanvas - 高效的视频帧HTML5画布渲染库 项目地址:https://gitcode.com/brion/yuv-canvas YUVCanvas 是一个强大的JavaScript库，用于将YUV格式的视频帧绘制到HTML5的canvas元素上。这个项目源于ogv.js媒体播放器，特别适合高频率帧更新和利用WebGL进行颜色空间转换的应用场景。 项目介绍 YUVCanv...
broadway_stream_example:将Broadway.js与ffmpeg的视频流一起使用的简单示例
05-25
broadway_stream_example 使用ffmpeg的视频流测试百老汇的简单示例 为什么 在与百老汇一起工作的h264视频流之前，我挣扎了很多天。 不必再花更多的时间做同样的事情，这就是为什么我决定分享自己的测试。 主要困难来自如何生成流并将其提供给Broadway.js。 如何 该示例的输入是PC的网络摄像头。 FFmpeg捕获网络摄像头的流，并将其作为H264流转发到HTTP服务器。 HTTP服务器将他流式传输到一个Web套接字中以馈送百老汇播放器。 它适用于Chrome和Firefox。 server <--http(8080)-- browser and ffmpeg --http(8081)--> relay <--websocket(8082)--> browser + broadway 还有一个没有websocket的版本。 它显然比websocket版本更
几种前端h264播放器记录
u013379032的博客
05-04 1万+
近期做了点工作记录一下。主要是将H264流在html5上进行播放。众所周知，大多数的 video组件都是支持FLV或者MP4以及m3u8格式的，而如果是WebRTC是直接集成好了。本次要求的环境主要是通过Websocket方式进行流传输，不是RMTP也不是RTSP，所以最好的方式是能够直接在前端页面上进行播放。其中应该要包含H264的软解码或者硬解码。 下面介绍几种可以直接播放H264的播放器： 1.Broadway.js 该项目的说明是将Android的H264解码器通过Emscripten编译成.
js实现视频播放器
玉案轩窗的博客
09-23 1万+
前言之前使用js实现过音乐播放控制条，最终存在几点不如人意的地方，具体的几点如下： 1、存在拖动按钮不流畅 2、时间处理的问题，时间点在播放过程中存在重复的问题 本篇文章，采用input range以及progress来实现进度，避免在js实现音乐播放中使用offsetX来确定具体的点击的位置，使用另一种方式来解决js实现音乐播放中产生的问题。 本次实践初衷有两个： 1、js实现音乐
推荐项目：Broadway
gitblog_00077的博客
03-14 410
推荐项目：Broadway 一、项目简介 Broadway是一个基于JavaScript的开源WebGL实现，用于在浏览器中播放H.264视频流。它提供了对H.264编码的逐帧解码，并将其转换为可以在WebGL上下文中渲染的纹理。 二、应用场景 在浏览器中直接播放H.264视频流，无需依赖Flash或任何其他插件。 结合WebGL进行实时视频处理和特效渲染，如实时美颜、动态滤镜等。 制作交互式3...
BroadwayStream:只需流式传输本地文件并使用Broadway.js进行渲染
05-12
百老汇流 简单流式传输本地文件并使用Broadway.js进行渲染 你需要： ffmpeg node.js 一个视频文件 git submodule init git submodule update npm install node index.js --help
vue.js前端框架使用学习方法概括整理（一）
总结前端开发中遇到的问题，分享前端知识
04-30 882
本文根据自己工作中总结的Vue2.0学习方法，帮助更多人更快的理解使用vue框架，大家都知道学习前端框架Vue，目前使用基数不断增加，有超React框架。Vue入门更简单，目前已更新Vue3.0语法，大家可以去项目中使用，并且相应的配套Vite下一代前端开发与构建工具，后期去代替一直使用的Webpack也是有可能。 目录 一、Vue相关文档 二、Vue介绍、原理、优缺点 三、Vue 指令 四、组件通讯props 五、组件通信emit 六：路由 一、Vue相关文档 Vue官方文档.
百老汇编码器（Broadway）
07-18
百老汇编码器 解压缩密码：www.xiying.com 百老汇（Broadway）是一种avi文件的解码驱动程序， 当模板中有用Broadway编码程序压缩的avi素材时，就 需要安装这个解码程序。 这个解码程序的安装非常简单，双击install.exe运行 安装，出现一个彩色安装画面，点击左下方的“安装” 按钮，马上就能看到下面的信息栏中出现“驱动程序 已经安装完成”。安装完毕，点击“退出”按钮。
Broadway一个事件源和CQRS库
08-08
Broadway - 一个事件源和CQRS库
前端项目-Broadway.zip
09-03
前端项目-Broadway,一个javascript H.264解码器。
jsmpeg.min.js进行rtsp视频解码
ArmadaDK的博客
09-01 567
首先引用jsmpeg的库，然后用它的player进行播放，它用的是canvas进行播放，代码如下。经测试局域网内延时在800ms左右。
从0到1实现Web端H.265播放器：视频解码篇
前端劝退师
04-12 6843
前言回顾什么是H.265？本文在这里就不对H.265做介绍了。感兴趣的朋友可以看下面的文章了解详情。（第一篇是我们在2019年3月发布的文章，距今已有2年，时间过得真快）《Web端H.26...
在Web中使用jsmpeg.js低时延播放RTSP视频流（海康、大华）方案 - vue-jsmpeg-player
热门推荐
云帆的博客
11-05 4万+
前言 web播放实时视频流的几种方案对比，详见此处 jsmpeg项目地址：gitee、github MIT开源协议 此方案架构大致如下： jsmpeg比较重要的两个技术点：webgl、wasm，只需大致了解即可，若不对这两个模块进行二次开发，则无需深究 1 安装与介绍 1.1 安装 npm 安装(这样无法二次开发) npm install jsmpeg -s 二次开发方法（本文章介绍）     把jsmpeg.min.js拖入项目目录下，建议将此js文件
【编解码：AVI格式解析】
weixin_47852035的博客
11-27 7608
编解码：AVI格式解析1 音视频及AVI知识2 最基本的数据单元3 AVI主要结构介绍4 AVI主要结构解析5 总结 1 音视频及AVI知识 一个完整的音视频文件格式有mp4、mov、flv、avi、rmvb、mkv、ts等，它们是封装数据的容器，包括音频、视频、字幕、基础元信息等，通过一些特定的编码算法，对各种信息进行编码压缩过后得到的。视频文件的封装格式并不影响视频的画质，影响视频画面质量的是视频的编码格式。 H264、HEVC、VP9、AV1等就是视频编码格式，MP3、AAC、AC-3等就是音频编码格
wasm 视频解码渲染实现
lidec的专栏
12-05 4446
实现一个wasm视频解码渲染的小demo，网页端集成emcc编译的ffmpeg库，实现视频解码，使用WebGL实现视频渲染。demo中包含了一个基于mongoose的微型Web服务器，用于网页的Web服务和视频流传输，基本无需额外搭建环境以及编译第三方库，可以简单地移植到嵌入式系统中用于网页视频播放视频。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值