代码拉取完成,页面将自动刷新
同步操作将从 云帆/jsmpeg-player 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
本组件是基于jsmpeg.js二次开发的vue组件
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:
本组件使用了element-ui部分组件(后续有空了考虑剔除)以及ES6+语法,要求如下:
npm i core-js@3 element-ui@2 vue@2 -S
npm i vue-jsmpeg-player -S
全局组件
// main.js
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JSMpegPlayer from 'vue-jsmpeg-player';
import 'vue-jsmpeg-player/dist/jsmpeg-player.css';
Vue.use(ElementUI)
Vue.use(JSMpegPlayer)
// 或者
import { JsmpegPlayer } from 'vue-jsmpeg-player';
import 'vue-jsmpeg-player/dist/jsmpeg-player.css';
Vue.component(JsmpegPlayer.name, JsmpegPlayer)
局部组件
import { JsmpegPlayer } from 'vue-jsmpeg-player';
import 'vue-jsmpeg-player/dist/jsmpeg-player.css';
export default {
...
components: { JsmpegPlayer },
...
}
使用
<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>
名称 | 类型 | 说明 |
---|---|---|
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-mute | 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 | 流媒体时,视频解码缓冲区的字节大小。默认的512 * 1024 (512 kb)。对于非常高的比特率,您可能需要增加此值。 |
audioBufferSize | number | 流媒体时,音频解码缓冲区的字节大小。默认的128 * 1024 (128 kb)。对于非常高的比特率,您可能需要增加此值。 |
支持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} | 分辨率解码事件,当获取到视频分辨率时触发发 |
名称 | 参数 | 说明 |
---|---|---|
title | 无 | 标题插槽,使用此插槽后title属性失效 |
loading | 无 | loading插槽,可自定义加载效果 |
no-signal | 无 | 无信号时的插槽,使用此插槽后noSignalText属性失效 |
无信号时:
正常播放:
旋转画面:
接流中断:
截图测试:
录制测试:
ffmpeg拉取桌面流见此文章:https://waitwut.info/blog/2013/06/09/desktop-streaming-with-ffmpeg-for-lower-latency/
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。