vue-jsmpeg-player v1.2.2

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.0] jsmpeg.js已迁移到独立仓库中，以git子模块的形式引入

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

支持的格式

• 视频：mpeg1

• 音频：mp2

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

组件仓库/npm地址

• giee
• github
• 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+语法，要求如下：

• js > 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/dist/index.css';

Vue.use(JSMpegPlayer)

// 或者

import { JSMpegPlayer, JSMpegMultipathPlayer } from 'vue-jsmpeg-player';

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

局部组件

import { JSMpegPlayer, JSMpegMultipathPlayer } from 'vue-jsmpeg-player';

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

原生属性：

事件 & Emits

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

插槽 & Slot

方法 & Method

JSMpegMultipathPlayer - 多路播放器

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

属性 & Props

事件 & Emits

插槽 & 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: '',
   })
  )
}

功能 & 计划

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

效果演示

• 无信号时：

• 正常播放：

• 旋转画面：

• 接流中断：

• 截图测试：

• 录制测试：

服务端

参考JSMpegServer文档

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

开发/运行DEMO

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

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request