vue-jsmpeg-player

v1.3.0

Published

2 months ago

基于jsmpeg.js二次开发的流媒体播放器

Downloads

0High
0Medium
0Low

cloudsail

rtsp rtmp m3u8 jsmpeg ffmpeg html5 player video websocket mpeg1 mp2 vue

jsmpeg-player

介绍

本组件是基于jsmpeg.js二次开发的 vue2 组件（未来会支持 vue3）

web 播放实时视频流的几种方案对比，详见此处
本方案详细介绍：在 Web 中低时延播放 RTSP 视频流（海康、大华）方案 - JSMpeg.js
jsmpeg.js 相关链接：gitee、github、官网
关于延迟问题：仅在局域网\本机下实测 1s 左右，在公网下未知，公网要考虑的东西太多(带宽、丢包、流量)，公网下的流媒体服务框架这里推荐ZLMediaKit、SRS
关于性能问题
- 注意：本方案存在性能瓶颈，可能不适用于大型项目，对性能有追求的请使用开源流媒体框架 ZLMediaKit、SRS
- 由于是客户端软解码，所以性能不会太好，在目前的 i5 10 代+8g 这种配置机器上单个页面六路同屏应该是没问题的，再多就不行了，对性能有追求的只能用 webrtc 了，具体性能对比可见jsmpeg 官网性能对比
- 在使用 vue 开发环境时，可能会产生内存溢出的错误，应该是由于频繁热更新导致的，刷新页面即可
交流 QQ 群：56370082（请备注来源）

Note

[v1.2.1] 使用了 vite-plugin-libcss 插件打包，esm 方式引入（即 import）不需要再手动引入样式文件

[v1.2.0] jsmpeg.js 已迁移到独立仓库中，以 git 子模块的形式引入

初次拉取仓库时请使用 git clone --recursive
如果已经克隆了主仓库但没有克隆子模块，则使用 git submodule update --init --recursive

支持的格式

视频：mpeg1
音频：mp2
仅支持 mpeg1 格式视频、mp2 格式音频！！！仅支持 mpeg1 格式视频、mp2 格式音频！！！仅支持 mpeg1 格式视频、mp2 格式音频！！！不要随便拿个 websocket 流去给 jsmpeg 使用，播放不了的！！！也无法直接播放 rtmp 流！！！

组件仓库/npm 地址

方案架构

rtsp 流 => ffmpeg 转码 => ~~http server 接收~~(已废弃，直接通过命令行获取转码数据) => websocket server 转发 => websocket client => 客户端软解码渲染

在这里插入图片描述

ffmpeg 推流命令示例：

ffmpeg ^
-rtsp_transport tcp -i rtsp://[用户名]:[密码]@[ip]:554/h264/ch1/main/av_stream -q 0 ^
-f mpegts ^
-codec:v mpeg1video -s 1920x1080 -b:v 1500k ^
-codec:a mp2 -ar 44100 -ac 1 -b:a 128k ^
http://127.0.0.1:8890/jsmpeg

PS:

如果是公网，需要自行解决拉取摄像头 rtsp 流
本组件仅实现了前端（客户端）部分的功能，后端部分的功能可参考 server 目录下的代码

安装教程

本组件使用了ES6+语法，要求如下：

vue > 2.6.0
core-js > 3 (如果不安装，编译会报错)

npm i core-js@3 vue@2 -S

npm i vue-jsmpeg-player -S

全局组件

// main.js
import Vue from 'vue'

import JSMpegPlayer from 'vue-jsmpeg-player'
import 'vue-jsmpeg-player/style.css'

Vue.use(JSMpegPlayer)

// 或者

import { JSMpegPlayer, JSMpegMultipathPlayer } from 'vue-jsmpeg-player'
import 'vue-jsmpeg-player/style.css'

Vue.component(JSMpegPlayer.name, JSMpegPlayer)
Vue.component(JSMpegMultipathPlayer.name, JSMpegMultipathPlayer)

局部组件

import { JSMpegPlayer, JSMpegMultipathPlayer } from 'vue-jsmpeg-player';
import 'vue-jsmpeg-player/style.css';

export default {
  ...

  components: {
    [JSMpegPlayer.name]: JSMpegPlayer,
    [JSMpegMultipathPlayer.name]: JSMpegMultipathPlayer
  },

  ...
}

使用

单路播放

<template>
  <div>
    <jsmpeg-player :url="url" />
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      url: 'ws://localhost:8089/xxx'
    }
  },
  computed: {},

  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>

<style lang="scss"></style>

多路播放

<template>
  <div>
    <jsmpeg-player.multipath v-model="players" />
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      players: [
        {
          title: '桌面',
          url: 'ws://127.0.0.1:18081/desktop'
        }
      ]
    }
  },
  computed: {},

  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>

<style lang="scss"></style>

使用说明

JSMpegPlayer - 单路播放器

属性 & Props

| 名称 | 类型 | 说明 | | -------------- | ------- | --------------------------------------------------------------------------------- | | url | string | 视频流地址(推荐 websocket，实际上 jsmpeg.js 原生也支持 http 方式，但没有经过测试) | | title | string | 播放器标题 | | no-signal-text | string | 无信号时的显示文本 | | options | object | jsmpeg 原生选项，直接透传，详见下表 | | closeable | boolean | 是否可关闭（单击关闭按钮，仅抛出事件） | | in-background | boolean | 是否处于后台，如 el-tabs 的切换，路由的切换等，支持.sync 修饰符 | | show-duration | boolean | 是否显示持续播放时间 | | default-muted | boolean | 默认静音 | | with-toolbar | boolean | 是否需要工具栏 | | loading-text | boolean | 加载时的文本，默认为：拼命加载中 |

原生属性：

| 名称 | 类型 | 说明 | | --- | --- | --- | | canvas | HTMLCanvasElement | 用于视频渲染的 HTML Canvas 元素。如果没有给出，渲染器将创建自己的 Canvas 元素。 | | loop | boolean | 是否循环播放视频(仅静态文件)，默认=true | | autoplay | boolean | 是否立即开始播放（仅限静态文件），默认=false | | audio | boolean | 是否解码音频，默认=true | | video | boolean | 是否解码视频，默认=true | | poster | string | 预览图像的 URL，用来在视频播放之前作为海报显示。 | | pauseWhenHidden | boolean | 当页面处于非活动状态时是否暂停播放，默认=true（请注意，浏览器通常会在非活动选项卡中限制 JS） | | disableGl | boolean | 是否禁用 WebGL，始终使用 Canvas2D 渲染器，默认=false | | disableWebAssembly | boolean | 是否禁用 WebAssembly 并始终使用 JavaScript 解码器，默认=false(不建议设置为 true) | | preserveDrawingBuffer | boolean | WebGL 上下文是否创建必要的“截图” | | progressive | boolean | 是否以块的形式加载数据(仅静态文件)。当启用时，回放可以在完整加载源之前开始。 | | throttled | boolean | 当不需要回放时是否推迟加载块。默认=progressive | | chunkSize | number | 使用时，以字节为单位加载的块大小。默认(1 mb)1024*1024 | | decodeFirstFrame | boolean | 是否解码并显示视频的第一帧，一般用于设置画布大小以及使用初始帧作为"poster"图像。当使用自动播放或流媒体资源时，此参数不受影响。默认 true | | maxAudioLag | number | 流媒体时，以秒为单位的最大排队音频长度（可以理解为能接受的最大音画不同步时间）。 | | videoBufferSize | number | 流媒体时，视频解码缓冲区的字节大小。默认的 4 _ 1024 _ 1024 (4MB)。对于非常高的比特率，您可能需要增加此值。 | | audioBufferSize | number | 流媒体时，音频解码缓冲区的字节大小。默认的 128 * 1024 (128 kb)。对于非常高的比特率，您可能需要增加此值。 |

事件 & Emits

支持 jsmpeg.js 所有原生事件，并转换为短横线命名法，jsmpeg 官方文档 - 事件

| 名称 | 原生回调名称 | 参数 | 说明 | | --- | --- | --- | --- | | vue 组件事件 | - | - | - | | volume-change | - | number | 当音量变化时触发 | | muted | - | number | 当静音时触发 | | 原生事件 | | - | - | | video-decode | onVideoDecode | decoder, time | 视频帧解码事件，当成功解码视频帧时触发 | | audio-decode | onAudioDecode | decoder, time | 音频帧解码事件，当成功解码音频帧时触发 | | play | onPlay | player | 播放开始事件 | | pause | onPause | player | 播放暂停事件 | | ended | onEnded | player | 播放结束事件 | | stalled | onStalled | player | 播放停滞事件，当没有足够的数据播放一帧时触发 | | source-established | onSourceEstablished | source | 源通道建立事件，当 source 第一次收到数据包时触发 | | source-completed | onSourceCompleted | source | 源播放完成事件，当 source 收到所有数据时触发（即最后一个数据包） | | 扩展事件 | | - | - | | source-connected | - | - | 源连接事件（仅 websocket），当 source(websocket)连接上服务端时触发 | | source-interrupt | - | - | 源传输中断事件（仅 websocket），当 source(websocket)超过一定时间（5s）没有收到流时触发 | | source-continue | - | - | 源传输恢复/继续事件（仅 websocket），当 onSourceStreamInterrupt 触发后 websocket 第一次接收到流时触发 | | source-closed | - | - | 源关闭事件（仅 websocket），当 websocket 关闭后触发 | | resolution-decode | - | decoder, {width, height} | 分辨率解码事件，当获取到视频分辨率时触发发 |

插槽 & Slot

| 名称 | 参数 | 说明 | | --------- | ---- | -------------------------------------------------- | | title | 无 | 标题插槽，使用此插槽后 title 属性失效 | | loading | 无 | loading 插槽，可自定义加载效果 | | no-signal | 无 | 无信号时的插槽，使用此插槽后 noSignalText 属性失效 |

方法 & Method

| 名称 | 参数 | 说明 | | -------------------------------------- | --------------------------------------------------------- | ------------ | | 原生方法 | | | | play() | - | 播放 | | pause() | - | 暂停播放 | | stop() | - | 停止播放 | | nextFrame() | - | 下一帧 | | 扩展方法 | | - | | rotate(angle: string, append: bollean) | angle:旋转角度，append:是否为追加角度（即当前角度+angle） | 旋转画面 | | toggleFullscreen() | | 切换全屏模式 | | snapshot() | | 截图 | | toggleMute() | | 切换禁音模式 | | toggleRecording() | | 切换录制模式 |

JSMpegMultipathPlayer - 多路播放器

[x] 多路播放
[x] 支持拖拽交换播放器位置
[x] 支持从外部拖入播放器
[x] 支持多种分屏模式

属性 & Props

| 名称 | 类型 | 说明 | | ------------- | -------- | --------------------------------------------------------------- | | value/v-model | string[] | 播放链接列表 | | tabindex | number | 起始的 tabindex，给每个播放器加上 tabindex，方便按下 tab 键切换 | | playerProps | object | 播放器选项，透传给单个播放器 |

事件 & Emits

| 名称 | 参数 | 说明 | | --- | --- | --- | | player-click | {data:object,intance:Vue,index:number} | 点击播放器时触发 | | player-noSignal | {data:object,intance:Vue,index:number} | loading 插槽，可自定义加载效果 | | player-swap | {sourcePlayer:object,sourceIndex:number,targetPlayer:object,targetIndex:number} | 当两个播放器拖拽交换时触发 |

插槽 & Slot

| 名称 | 参数 | 说明 | | ---- | ---- | ---- | | - | - | - |

从外部拖入一个播放器

要实现此功能，只需要在目标元素的 drag-out 事件中调用 dataTransfer.setData 方法即可

function handleDragOut(ev) {
  let dt = ev.dataTransfer
  ev.dataTransfer.effectAllowed = 'copy'
  dt.setData(
    'text/plain',
    JSON.stringify({
      id: '', // 非必传
      title: '',
      url: ''
    })
  )
}

功能 & 计划

[x] 自动重连
[x] 接流中断 loading
[x] 截图
[x] 录制
[x] 画面旋转
[x] 全屏切换
[x] 全屏切换
[x] 事件总线
[x] 多播放器同屏显示
[ ] 国际化
[ ] 移除 element-ui 的依赖
[ ] 画中画显示(原生只支持 video 元素画中画显示，目前还没想到方案)
[x] 已知的性能问题(在 data 中定义了 player，导致被双向绑定)
[x] 构建升级到 vite
[ ] 同时支持 vue2/vue3

效果演示

无信号时：

在这里插入图片描述

正常播放：

在这里插入图片描述

旋转画面：

在这里插入图片描述

接流中断：

在这里插入图片描述

截图测试：

在这里插入图片描述

录制测试：

在这里插入图片描述

服务端

参考JSMpegServer 文档

关于 ffmpeg 拉取桌面流见此文章：https://waitwut.info/blog/2013/06/09/desktop-streaming-with-ffmpeg-for-lower-latency/

开发/运行 DEMO

克隆仓库，git clone --recursive https://github.com/vCloudSail/jsmpeg-player
安装依赖包，运行 cmd: npm i
启动服务端，运行 cmd: npm run server (如果使用 vscode，建议通过 vscode 启动)
启动 DEMO 客户端，运行 cmd: npm run dev
查看 demo

在这里插入图片描述

参与贡献

Fork 本仓库
新建 Feat_xxx 分支
提交代码
新建 Pull Request

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

jsmpeg-player

介绍

Note

支持的格式

组件仓库/npm 地址

方案架构

安装教程

使用说明

JSMpegPlayer - 单路播放器

属性 & Props

事件 & Emits

插槽 & Slot

方法 & Method

JSMpegMultipathPlayer - 多路播放器

属性 & Props

事件 & Emits

插槽 & Slot

从外部拖入一个播放器

功能 & 计划

效果演示

服务端

开发/运行 DEMO

参与贡献