wangxingyuan
5 months ago
5 changed files with 1634 additions and 18 deletions
Unified View
Diff Options
-
+1261 -0src/components/VideoPlayerPlatform/index.vue
-
+127 -0src/components/VideoPlayerPlatform/players/jessibucaPlayer.js
-
+69 -0src/components/VideoPlayerPlatform/players/livePlayer.vue
-
+132 -0src/components/VideoPlayerPlatform/players/zlmRtcPlayer.js
-
+45 -18src/views/point/site_management.vue
+ 1261
- 0
src/components/VideoPlayerPlatform/index.vue
File diff suppressed because it is too large
View File
+ 127
- 0
src/components/VideoPlayerPlatform/players/jessibucaPlayer.js
View File
| @ -0,0 +1,127 @@ | |||||
| /** | |||||
| * 播放器类 | |||||
| */ | |||||
| class JessibucaPlayer { | |||||
| //初始化 可以 await | |||||
| init () { | |||||
| const me = this | |||||
| return new Promise((resolve) => { | |||||
| me.jessibuca = new window.Jessibuca(this.config); | |||||
| me.jessibuca.on("load", function () { | |||||
| resolve() | |||||
| }); | |||||
| //网速信息 | |||||
| me.jessibuca.on('kBps', function (kBps) { | |||||
| if (me.config['onkBps']) { | |||||
| me.config['onkBps'](kBps); | |||||
| } | |||||
| }); | |||||
| //错误信息 | |||||
| me.jessibuca.on('error', function (error) { | |||||
| if (me.config['onError']) { | |||||
| me.config['onError'](error); | |||||
| } | |||||
| }); | |||||
| //码流信息 | |||||
| me.jessibuca.on("stats", function (stats) { | |||||
| if (me.config['onStats']) { | |||||
| me.config['onStats'](stats); | |||||
| } | |||||
| }) | |||||
| //性能 | |||||
| /** | |||||
| * 0: 表示卡顿 | |||||
| * 1: 表示流畅 | |||||
| * 2: 表示非常流畅 | |||||
| * 这个可以供ui来显示用 | |||||
| */ | |||||
| me.jessibuca.on("performance", function (performance) { | |||||
| if (me.config['onPerformance']) { | |||||
| me.config['onPerformance'](performance); | |||||
| } | |||||
| }) | |||||
| //超时事件 | |||||
| me.jessibuca.on("timeout", function () { | |||||
| if (me.config['onTimeout']) { | |||||
| me.config['onTimeout'](); | |||||
| } | |||||
| }) | |||||
| }) | |||||
| } | |||||
| // 播放 | |||||
| play (url, cb) { | |||||
| this.jessibuca.on("play", () => { | |||||
| cb && cb() | |||||
| }); | |||||
| if (this.jessibuca.hasLoaded()) { | |||||
| this.jessibuca.play(url); | |||||
| } else { | |||||
| this.jessibuca.on("load", () => { | |||||
| this.jessibuca.play(url); | |||||
| }); | |||||
| } | |||||
| } | |||||
| //取消静音 | |||||
| cancelMute () { | |||||
| this.jessibuca.cancelMute() | |||||
| } | |||||
| //销毁 | |||||
| destroy () { | |||||
| this.jessibuca.destroy() | |||||
| } | |||||
| //全屏 | |||||
| setFullscreen () { | |||||
| this.jessibuca.setFullscreen() | |||||
| } | |||||
| //截图 | |||||
| screenshot () { | |||||
| this.jessibuca.screenshot() | |||||
| } | |||||
| //重置画面 | |||||
| resize(){ | |||||
| this.jessibuca.resize(); | |||||
| } | |||||
| constructor(options) { | |||||
| this.config = Object.assign({ | |||||
| container: null,//播放容器element | |||||
| videoBuffer: 0.2,//设置最大缓冲时长，单位毫秒，播放器会自动消除延迟。 | |||||
| vod: false, | |||||
| isResize: true,//当为true的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。当为false的时候：视频画面完全填充canvas区域,画面会被拉伸。 | |||||
| isFullSize: false,// 当为true的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。 | |||||
| isFlv: false,//当为true的时候：ws协议不检验是否以.flv为依据，进行协议解析。 | |||||
| debug: false, | |||||
| timeout: 30,// 超时时间 | |||||
| supportDblclickFullscreen: true,//双击全屏 | |||||
| showBandwidth: false, //显示网速 | |||||
| keepScreenOn: false,//保持屏幕 | |||||
| isNotMute: false,//是否开启声音，默认是关闭声音播放的。 | |||||
| hasAudio: true,//是否包含音频 | |||||
| /** | |||||
| * fullscreen 是否显示全屏按钮 | |||||
| * screenshot 是否显示截图按钮 | |||||
| * play 是否显示播放暂停按钮 | |||||
| * audio 是否显示声音按钮 | |||||
| */ | |||||
| operateBtns: { | |||||
| fullscreen: false, | |||||
| screenshot: false, | |||||
| play: false, | |||||
| audio: false | |||||
| }, | |||||
| loadingText: '加载中...',//加载过程中文案。 | |||||
| background: '',//背景图片。 | |||||
| /* | |||||
| * worker地址 | |||||
| * 直接引用 index.js 的地址即可。项目会直接引用根目录的index.js，如果修改了index.js文件名称，改为xxx.js， | |||||
| * 请同步修改decoder参数，引用的是xxx.js文件目录 | |||||
| */ | |||||
| decoder: 'index.js', | |||||
| rotate: 0,//设置旋转角度，只支持，0(默认) ，180，270 三个值。 | |||||
| text: '', | |||||
| forceNoOffscreen: true,// 是否不使用离屏模式（提升渲染能力） | |||||
| hiddenAutoPause: false//是否开启当页面的'visibilitythis.变为'hidden'的时候，自动暂停播放。 | |||||
| }, options) | |||||
| } | |||||
| } | |||||
| export default JessibucaPlayer | |||||
+ 69
- 0
src/components/VideoPlayerPlatform/players/livePlayer.vue
View File
| @ -0,0 +1,69 @@ | |||||
| <template> | |||||
| <LivePlayer v-show="visible" :show-custom-button="false" ref="player" @snapOutside="onSnap" aspect='fullscreen' :videoUrl="videoUrl" :live="true" :alt="' '" :hide-fluent-button="true" :hide-big-play-button="true" @pause="onpause" @ended="onended" @timeupdate="ontimeupdate" /> | |||||
| </template> | |||||
| <script> | |||||
| import LivePlayer from '@liveqing/liveplayer' | |||||
| export default { | |||||
| data () { | |||||
| return { | |||||
| visible: false, | |||||
| videoUrl: '' | |||||
| } | |||||
| }, | |||||
| components: { | |||||
| LivePlayer | |||||
| }, | |||||
| methods: { | |||||
| onpause () { | |||||
| this.$emit('pause') | |||||
| }, | |||||
| ontimeupdate (t) { | |||||
| this.$emit('timeupdate', t) | |||||
| }, | |||||
| onended () { | |||||
| this.$emit('ended') | |||||
| }, | |||||
| onSnap (str) { | |||||
| this.$emit('snap', str) | |||||
| }, | |||||
| show () { | |||||
| this.visible = true | |||||
| }, | |||||
| hide () { | |||||
| this.visible = false; | |||||
| }, | |||||
| play (url, time) { | |||||
| if (url) { | |||||
| this.videoUrl = url | |||||
| } | |||||
| this.$refs.player.play() | |||||
| if (time) { | |||||
| this.$refs.player.setCurrentTime(time); | |||||
| } | |||||
| }, | |||||
| replay () { | |||||
| this.$refs.player.play() | |||||
| }, | |||||
| destroy () { | |||||
| this.videoUrl = '' | |||||
| }, | |||||
| setFullscreen () { | |||||
| this.$refs.player.toggleFullscreen() | |||||
| }, | |||||
| setMuted (open) { | |||||
| this.$refs.player.setMuted(open ? 0 : 1) | |||||
| }, | |||||
| snap () { | |||||
| this.$refs.player.snap() | |||||
| }, | |||||
| pause () { | |||||
| this.$refs.player.pause() | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| .video-wrapper .alt { | |||||
| display: none; | |||||
| } | |||||
| </style> | |||||
+ 132
- 0
src/components/VideoPlayerPlatform/players/zlmRtcPlayer.js
View File
| @ -0,0 +1,132 @@ | |||||
| class ZlmRtcPlayer { | |||||
| constructor(options) { | |||||
| this.webrtcPlayer = null; | |||||
| this.playerEl = null; | |||||
| this.config = Object.assign({ | |||||
| debug: false, | |||||
| simulecast: false, | |||||
| useCamera: false, | |||||
| audioEnable: false, | |||||
| videoEnable: false, | |||||
| recvOnly: true, | |||||
| }, options) | |||||
| } | |||||
| eventcallbacK (e, msg) { | |||||
| if (this.config['on' + e]) { | |||||
| this.config['on' + e](msg); | |||||
| } | |||||
| } | |||||
| //全屏 | |||||
| setFullscreen () { | |||||
| // this.playerEl.setFullscreen() | |||||
| const el = this.playerEl; | |||||
| function launchFullScreen () { | |||||
| var element = el; | |||||
| if (element.requestFullScreen) { | |||||
| element.requestFullScreen(); | |||||
| } else if (element.mozRequestFullScreen) { | |||||
| element.mozRequestFullScreen(); | |||||
| } else if (element.webkitRequestFullScreen) { | |||||
| element.webkitRequestFullScreen(); | |||||
| } | |||||
| } | |||||
| launchFullScreen(); | |||||
| } | |||||
| setMuted (open) { | |||||
| this.playerEl.volume = open ? 1 : 0; | |||||
| } | |||||
| setVolume (val) { | |||||
| this.playerEl.volume = val; | |||||
| } | |||||
| getVideoSize(){ | |||||
| let height = this.playerEl.videoHeight | |||||
| let width = this.playerEl.videoWidth | |||||
| return { | |||||
| width,height | |||||
| } | |||||
| } | |||||
| snap (cb) { | |||||
| let canvas = document.createElement('canvas'); | |||||
| canvas.setAttribute('width', this.playerEl.videoWidth); | |||||
| canvas.setAttribute('height', this.playerEl.videoHeight); | |||||
| var ctx = canvas.getContext("2d"); | |||||
| ctx.drawImage(this.playerEl, 0, 0, canvas.width, canvas.height); | |||||
| canvas.toBlob(function (blob) { | |||||
| canvas = null; | |||||
| cb(blob) | |||||
| }); | |||||
| } | |||||
| destroy () { | |||||
| this.webrtcPlayer.close(); | |||||
| this.playerEl.remove(); | |||||
| } | |||||
| init () { | |||||
| return new Promise((resolve) => { | |||||
| resolve(); | |||||
| }) | |||||
| } | |||||
| resize () { } | |||||
| pause(){ | |||||
| this.playerEl.pause() | |||||
| } | |||||
| replay(){ | |||||
| this.playerEl.play() | |||||
| } | |||||
| play (url) { | |||||
| // console.log(url,"play预置位配置url") | |||||
| var ZLMRTCClient = window.ZLMRTCClient; | |||||
| const player = document.createElement('video'); | |||||
| this.playerEl = player; | |||||
| const me = this | |||||
| // player.setAttribute('controls', 'controls'); | |||||
| player.setAttribute('autoplay', 'autoplay'); | |||||
| player.setAttribute('playsinline', 'playsinline'); | |||||
| player.setAttribute('stretch', 'stretch'); | |||||
| player.setAttribute('crossorigin', 'anonymous'); | |||||
| player.addEventListener('pause', () => { | |||||
| me.eventcallbacK("pause", "暂停") | |||||
| }) | |||||
| player.classList.add('video_player_zlm') | |||||
| // player.setAttribute('id', 'v_' + this.config.container.id); | |||||
| this.config.container.innerHtml = ''; | |||||
| this.config.container.appendChild(player); | |||||
| this.webrtcPlayer = new ZLMRTCClient.Endpoint({ | |||||
| element: player,// video 标签 | |||||
| debug: this.config.debug,// 是否打印日志 | |||||
| zlmsdpUrl: url,//流地址 | |||||
| // zlmsdpUrl:document.location.protocol+"//"+window.location.host + "/wuhan/videoMonitor2/index/api/webrtc?app=live&stream=stream"+"&type=play", | |||||
| simulecast: this.config.simulecast, | |||||
| useCamera: this.config.useCamera, | |||||
| audioEnable: this.config.audioEnable, | |||||
| videoEnable: this.config.videoEnable, | |||||
| recvOnly: this.config.recvOnly, | |||||
| }) | |||||
| this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, () => {// ICE 协商出错 | |||||
| // console.error('ICE 协商出错', e) | |||||
| this.eventcallbacK("ICE ERROR", "ICE 协商出错") | |||||
| }); | |||||
| this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (stream) => {//获取到了远端流，可以播放 | |||||
| console.log(stream) | |||||
| player.volume = 0; | |||||
| this.eventcallbacK("playing", "播放成功") | |||||
| }); | |||||
| this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {// offer anwser 交换失败 | |||||
| // console.error('offer anwser 交换失败', e) | |||||
| this.eventcallbacK("OFFER ANSWER ERROR", "offer anwser 交换失败") | |||||
| if (e.code == -400 && e.msg == "流不存在") { | |||||
| this.timer = setTimeout(() => { | |||||
| this.webrtcPlayer.close(); | |||||
| this.play(url); | |||||
| }, 100) | |||||
| } | |||||
| }); | |||||
| this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, () => {// 获取到了本地流 | |||||
| this.eventcallbacK("LOCAL STREAM", "获取到了本地流") | |||||
| }); | |||||
| } | |||||
| } | |||||
| export default ZlmRtcPlayer | |||||