vue中使用JSMpeg的使用总结及踩坑

原创 已于 2022-03-14 11:12:27 修改 · 1.5w 阅读 · 26 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #javascript #vue.js #html5 #canvas

于 2020-12-16 14:18:36 首次发布

一、JSMpeg简介

JSMpeg是用JavaScript编写的视频播放器。它由MPEG-TS Demuxer，WebAssembly MPEG1视频和MP2音频解码器，WebGL和Canvas2D渲染器以及WebAudio声音输出组成。JSMpeg可以通过Ajax加载静态文件，并可以通过WebSockets进行低延迟的流传输（〜50ms）。

JSMpeg可以在iPhone 5S上以30fps的速度解码720p视频，可以在任何现代浏览器（Chrome，Firefox，Safari和Edge）中使用，并且压缩后的速度为42kb。

二、vue中使用JSMpeg

1、下载jsmpeg.min.js

将jsmpeg.min.js放入项目中

2、在main.js中引入
import JSMpeg from '@/util/jsmpeg.min'
3、在组件中使用
<template
最低0.47元/天 解锁文章
【前端】jsmpeg 介绍及使用
zhenshu_guo的博客
08-27 984
JSMpeg是一个基于JavaScript的视频播放器，支持MPEG1视频和MP2音频解码，可通过Ajax加载静态视频或WebSockets实现低延迟流媒体（约50毫秒）。
浏览器播放rtsp视频流：4、jsmpeg+go实现局域网下的rtsp视频流web端播放
逍遥游的博客
10-31 3641
之前的rtsp转webrtc的方案存在如下缺陷：1.只支持h264；2.受限于webrtc的理解难度以及搭建turn/stun的p2p服务等问题，对于局域网下的业务需求来说有些杀猪用牛刀的意思；3.ios不支持webrtc。基于以上原因，我又找到了一些其它的方案进行了测试，目前看jsmpeg的方案更加适合我们的需求，而且普通压缩大小为135kb，gzip方式压缩后仅仅42kb，在嵌入式场景下也可以使用。
使用jsmpeg低延时播放rtsp视频流（注：该方式在websocket服务器搭建好的情况下使用）
qq_55011019的博客
06-06 2585
ffmpeg -rtsp_transport tcp -i rtsp流地址 -q 0 -f mpegts -codec:v mpeg1video -s 1280x720 -b:v 1500k -codec:a mp2 -ar 44100 -ac 1 -b:a 128k http://127.0.0.1:8890/test。若运行成功后（注:如果报错ws模块找不到，就运行npm install ws 下载ws模块依赖）使用npm方式安装（注：此方式安装无法进行二次开发）（1）引入方式（npm方式安装）
如何快速上手MPEGTS.js：轻量级HTML5视频流播放神器完全指南
最新发布
gitblog_00111的博客
10-23 526
MPEGTS.js是一款强大的开源JavaScript库，专为在Web环境中解析和播放MPEG-2 Transport Stream（MPEG-TS）和FLV视频流设计。通过纯JavaScript实现，无需后端依赖，让开发者轻松构建高性能的HTML5视频播放应用，无论是直播还是点播场景都能完美适配。 ## ???? 核心功能一览：为什么选择MPEGTS.js？ ### 高效实时的流处理能力 ⚡ M...
视频播放jsmpeg.js
佳人与北的博客
11-22 6686
jsmpeg.js <canvas style="width: 100%" id="video-canvas"></canvas> <script src="js/lib/jsmpeg.min.js"></script> app.videoPlay = new JSMpeg.Player(app.params.ts, { c...
vue中使用jsmpeg播放视频
weixin_44264445的博客
03-05 3861
1.下载jsmpeg.min jsmpeg.min下载地址 提取码：lzal 2.在main.js中引用 import './views/video/jsmpeg.min' 3.使用 <canvas id="vueMiniPlayer" style="width: 100%;" @click="play"></canvas> mounted() { this.player = new JSMpeg.Player("video/video1.ts", {canvas: do
Vue使用jsmpeg拉流做视频直播
m0_46627730的博客
05-15 8379
前端做视频直播有很多方法实现，可以通过video，video-player等等，接下来我就说说vue如何使用jsmpeg吧（前面介绍的都是我遇到的错误，可看可不看，切记看到最后的使用方法） 最近用jsmpeg来接收数据做视频直播，一开始是一脸懵逼的，上网搜了一天多，全是直接上html的方法， 例如这种： <!DOCTYPE html> <html> <head> <title>JSMpeg Stream Client</title> <s
在vue3中实用JSMpeg的踩坑记录
Linux_dow的博客
03-21 1865
在vue中通过jsmpeg播放WebSocket推流
JSMPEG-Player:这是一个使用JSMPEG库进行直播的播放器
06-13
总结来说，JSMPEG-Player 是一个基于 JSMPEG 的 JavaScript 直播播放器解决方案，适合对实时性和低延迟有要求的应用。通过简单的 API 和有效的视频解码，它能在各种浏览器上提供稳定的直播体验。通过研究 `demo....
vue踩坑记-在项目中安装依赖模块npm install报错
01-19
在维护别人的项目的时候，在项目文件夹中安装npm install模块的时候，报错如下： npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! ...
在vue中使用echarts
热门推荐
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
03-04 6万+
1、安装
开源项目jsmpeg
04-12
GitHub上的一个开源项目
jsmpeg-ffmpeg.zip
03-03
ffmpeg+websocket+jsmpeg实现html播放rtsp实时视频流，它主要是通过webSocket发送MPEG，前端通过js解析MPEG不断绘制canvas，包括音频。最终测试的结果就是一个1920*1080分辨率的画面延时大概的0.5s左右
jsmpeg-master
05-22
要观看直播，需要从前文提到的 jsmpeg 项目中下载 stream-example.html 和 jsmpg.js 文件，更改 stream-example.html 中的 WebSocket URL 为你的服务器地址，并使用你喜欢的浏览器打开
jsmpeg-player:基于JSMpeg的MPEG1视频播放器
05-02
JSMpeg Player（TS播放器） 已经更名为@ cycjimmy / jsmpeg玩家的范围的NPM包。 JSMpeg播放器基于 。 视频必须压缩为MPEG1 / MP2的TS格式。 Apple设备会自动播放无声音的声音，您需要引导用户单击视频图标右下角的视频以解锁声音。 （在非自动播放模式下没有类似问题） 如何使用 安装 $ npm install @cycjimmy/jsmpeg-player --save # or $ yarn add @cycjimmy/jsmpeg-player 用法 import JSMpeg from '@cycjimmy/jsmpeg-player' ; # OR const JSMpeg = require ( '@cycjimmy/jsmpeg-player' ) ; new JSMpeg . VideoElement (
浅谈vue的踩坑路
08-29
在本篇文章中，我们将探索 Vue.js 中的一些踩坑路径，包括 axios 模拟 GET 请求、图片加载问题、数据绑定问题等。 首先，让我们来看一下 axios 模拟 GET 请求的问题。在开发服务器中，我们可以使用 express.static...
如何在vue项目中引入JSMpeg插件
bjl008的博客
05-15 3275
在vue项目中引入插件有两种方式 将对象挂载到window，全局引用 在jsmpeg.js中，将变量JSMpeg直接挂载到window 在main文件中引入就可以全局使用JSMpeg对象import './plugins/jsmpeg.min' 使用export将插件暴露到特定组件使用 在jsmpeg.js最后添加export default JSMpeg 在组件中引入import JSMpeg from './plugins/jsmpeg.min' ...
【亲测免费】 让视频流处理更简单：vue-jsmpeg 项目推荐
gitblog_00844的博客
09-14 443
让视频流处理更简单：vue-jsmpeg 项目推荐 项目介绍 vue-jsmpeg 是一个将 JSMpeg 库封装成 Vue.js 组件的开源项目。JSMpeg 是一个基于 JavaScript 的 MPEG1 视频解码器，支持通过 WebSocket 或 HTTP 流式传输视频。通过 vue-jsmpeg，开发者可以轻松地将 JSMpeg 集成到 Vue.js 项目中，实现高效的视频流处理。 项...
vue2使用JSMpeg
05-24
JSMpeg是一个使用JavaScript编写的流媒体播放器，Vue2可以与JSMpeg集成，实现流媒体视频的播放。 首先，在Vue2的项目中，使用npm安装jsmpeg：`npm install jsmpeg --save` 然后，在Vue2的组件中，可以使用以下代码来实现JSMpeg的播放功能（假设视频流的地址为`streamUrl`）： ```html <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import JSMpeg from 'jsmpeg'; export default { mounted() { const canvas = this.$refs.canvas; const player = new JSMpeg.Player(this.streamUrl, {canvas}); }, data() { return { streamUrl: 'your-stream-url-here' }; } }; </script> ``` 以上代码通过在组件的`mounted`钩子中创建一个JSMpeg的播放器实例，并将视频流的地址和画布元素传入来实现视频的播放。在模板中，只需要渲染一个画布元素即可。 需要注意的是，JSMpeg目前主要支持MPEG1格式的视频流，如果视频流的格式不是MPEG1，则需要进行转码。
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值