diff --git a/src/components/VideoPlayerPlatform/index.vue b/src/components/VideoPlayerPlatform/index.vue new file mode 100644 index 0000000..d4aadc1 --- /dev/null +++ b/src/components/VideoPlayerPlatform/index.vue @@ -0,0 +1,1261 @@ + + + + + diff --git a/src/components/VideoPlayerPlatform/players/jessibucaPlayer.js b/src/components/VideoPlayerPlatform/players/jessibucaPlayer.js new file mode 100644 index 0000000..4130869 --- /dev/null +++ b/src/components/VideoPlayerPlatform/players/jessibucaPlayer.js @@ -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 \ No newline at end of file diff --git a/src/components/VideoPlayerPlatform/players/livePlayer.vue b/src/components/VideoPlayerPlatform/players/livePlayer.vue new file mode 100644 index 0000000..2a1497d --- /dev/null +++ b/src/components/VideoPlayerPlatform/players/livePlayer.vue @@ -0,0 +1,69 @@ + + + \ No newline at end of file diff --git a/src/components/VideoPlayerPlatform/players/zlmRtcPlayer.js b/src/components/VideoPlayerPlatform/players/zlmRtcPlayer.js new file mode 100644 index 0000000..daf00c5 --- /dev/null +++ b/src/components/VideoPlayerPlatform/players/zlmRtcPlayer.js @@ -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 diff --git a/src/views/point/site_management.vue b/src/views/point/site_management.vue index 36031fe..dab4eac 100644 --- a/src/views/point/site_management.vue +++ b/src/views/point/site_management.vue @@ -26,7 +26,7 @@