"use strict"; /** * EZUIKitPlayer for npm */ (function (global, factory) { "use strict"; if (typeof module === "object" && typeof module.exports === "object") { module.exports = global.document ? factory(global, true) : function (w) { if (!w.document) { throw new Error("EZUIPlayer requires a window with a document"); } return factory(w); }; } else { factory(global); } // Pass this if window is not defined yet })(typeof window !== "undefined" ? window : void 0, function (window, noGlobal) { // 加载js function addJs(filepath, callback) { var headerScript = document.getElementsByTagName('head')[0].getElementsByTagName("script"); var isReady = false; for (var i = 0; i < headerScript.length; i++) { if (headerScript[i].getAttribute("src") == filepath) { isReady = true; callback(); } } if (!isReady) { var oJs = document.createElement("script"); oJs.setAttribute("src", filepath); oJs.onload = callback; document.getElementsByTagName("head")[0].appendChild(oJs); } } // 加载css function addCss(filepath, callback) { var headerLink = document.getElementsByTagName('head')[0].getElementsByTagName("link"); var isReady = false; for (var i = 0; i < headerLink.length; i++) { if (headerLink[i].getAttribute("href") == filepath) { isReady = true; callback(); } } if (!isReady) { var oJs = document.createElement('link'); oJs.rel = 'stylesheet'; oJs.type = 'text/css'; oJs.href = filepath; oJs.onload = callback; document.getElementsByTagName("head")[0].appendChild(oJs); } } // 通用请求方法 function request(url, method, params, header, success, error) { var _url = url; var http_request = new XMLHttpRequest(); http_request.onreadystatechange = function () { if (http_request.readyState == 4) { if (http_request.status == 200) { var _data = JSON.parse(http_request.responseText); success(_data); } } }; http_request.open(method, _url, true); // http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = new FormData(); for (var i in params) { data.append(i, params[i]); } http_request.send(data); } var requestFullScreen = function (element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } ; // 全局属性 var EZUIKit = { EZUIKitPlayer: undefined, EZUIKitTalk: undefined, opt: { apiDomain: 'https://open.ys7.com/api/lapp/live/talk/url', filePath: 'https://open.ys7.com/assets/ezuikit_v2.6.4', accessToken: '', url: '', deviceSerial: '', channelNo: '', id: '', talkLink: '', rtcUrl: '', ttsUrl: '', stream: '', // 对讲插件依赖 isReliesReady: false, template: 'simple', plugin: [], // 加载插件,talk-对讲 audio: 1, // 声音id 0-不开启 1-开启 autoplay: 1, videoLoading: false, }, state: { countTimer: undefined, // countTime 计时器 recodeTime: 0, // 录音时间 recodeTimer: undefined, //录音时长 计时器 recodeTime: 0, fetchDefaultList: false, // 是否拉取默认语音-当用户语音为空 page: 0, // 语音当前页 pageSize: 5 }, handleTalkSuccess: function(){}, handleTalkError: function(){}, }; /** * 视频播放器-开始 */ var domain = "https://open.ys7.com"; var filePathDomain = domain; var EZUIKitPlayer = function EZUIKitPlayer(params) { var _this = this; this.opt = { id: params.id, apiDomain: domain + '/api/lapp/live/talk/url', filePath: filePathDomain + '/assets/ezuikit_v2.6.4', decoderVersion: '', accessToken: '', url: '', deviceSerial: '', channelNo: '', talkLink: '', rtcUrl: '', ttsUrl: '', stream: '', // 对讲插件依赖 isReliesReady: false, template: 'simple', plugin: [], // 加载插件,talk-对讲 audio: 1, // 声音id 0-不开启 1-开启 autoplay: 1, fullScreenStatus: 0, bSupporDoubleClickFull: true, videoLoading: false, }; this.params = params; if (params.id) { this.opt.id = params.id; } if (params.accessToken) { this.opt.accessToken = params.accessToken; } if (typeof params.audio !== 'undefined') { this.opt.audio = params.audio; } if (typeof params.decoderVersion !== 'undefined') { this.opt.decoderVersion = params.decoderVersion; } if (typeof params.env !== 'undefined') { if(typeof params.env.domain !== 'undefined'){ domain = params.env.domain; this.opt.apiDomain = domain + '/api/lapp/live/talk/url'; } if(typeof params.env.filePathDomain !== 'undefined'){ filePathDomain = params.env.filePathDomain; this.opt.filePathDomain = params.env.filePathDomain; } } // if(typeof params.domain !== 'undefined'){ // this.opt.apiDomain = params.domain + '/api/lapp/live/talk/url'; // } if (params.url) { this.opt.url = params.url; this.opt.deviceSerial = params.url.split("/")[3]; this.opt.channelNo = params.url.split("/")[4].split(".")[0]; } if (typeof params.template !== 'undefined') { this.opt.template = params.template; } if (params.plugin) { this.opt.plugin = params.plugin; } if (typeof params.autoplay !== 'undefined') { this.opt.autoplay = params.autoplay ? 1 : 0; } if (typeof params.bSupporDoubleClickFull !== 'undefined') { this.opt.bSupporDoubleClickFull = params.bSupporDoubleClickFull; } if (typeof params.handleTalkSuccess !== 'undefined') { window.EZUIKit.handleTalkSuccess = params.handleTalkSuccess; } if (typeof params.handleTalkError !== 'undefined') { window.EZUIKit.handleTalkError = params.handleTalkError; } var id = this.opt.id; var domElement = document.getElementById(id); // 间隙 domElement.style.fontSize = 0; domElement.style.overflowY = 'auto'; domElement.style.position = 'relative'; /** * 渲染iframe视频框 */ var iframe = document.createElement('iframe'); function matchIframeUrl() { switch (_this.opt.template) { case 'simple': var iframeUrl = domain + "/ezopen/h5/iframe?bSupporDoubleClickFull=0&url=" + _this.opt.url.replace("?","&") + "&autoplay=" + _this.opt.autoplay + "&audio=" + _this.opt.audio + "&accessToken=" + params.accessToken + "&templete=0" + "&id=" + id + "&decoderVersion=" + _this.opt.decoderVersion; var controlsValue = ""; if(typeof params.controls !== 'undefined' && params.controls){ console.log("typeof" ,typeof params.controls) controlsValue = "play,voice,hd,fullScreen"; if(params.controls.length > 0){ controlsValue = params.controls.join(","); iframeUrl += ('&controls=' + controlsValue); } } if (params.websocketParams) { iframeUrl += ('&websocketParams=' + JSON.stringify(params.websocketParams)) } return iframeUrl; case 'standard': return domain + "/ezopen/h5/iframe?bSupporDoubleClickFull=0&url=" + _this.opt.url.replace("?","&") + "&autoplay=" + _this.opt.autoplay + "&audio=" + _this.opt.audio + "&accessToken=" + params.accessToken + "&templete=1" + "&id=" + id + "&decoderVersion=" + _this.opt.decoderVersion; case 'security': return domain + "/ezopen/h5/iframe_se?bSupporDoubleClickFull=0&url=" + _this.opt.url.replace("?","&") + "&autoplay=" + _this.opt.autoplay + "&audio=" + _this.opt.audio + "&accessToken=" + params.accessToken + "&templete=0" + "&id=" + id + "&decoderVersion=" + _this.opt.decoderVersion; case 'theme': iframeUrl = domain +`/jssdk/theme.html?url=${params.url}&accessToken=${params.accessToken}&id=${id}&isMobile=${params.isMobile}`; if(typeof params.isMobile !== 'undefined') { iframeUrl += '&isMobile=' + params.isMobile; } if(typeof params.autoplay !== 'undefined') { iframeUrl += '&autoplay=' + params.autoplay; } if(typeof params.domain !== 'undefined') { if(params.domain == 'https://test12open.ys7.com') iframeUrl += '&env=' + 'test12'; } if (typeof params.env !== 'undefined') { if(typeof params.env.domain !== 'undefined'){ if(params.env.domain == 'https://test12open.ys7.com'){ iframeUrl += '&env=' + 'test12'; } } } if(typeof params.header !== 'undefined') { iframeUrl += '&header=' + params.header; } return iframeUrl; default: return domain + "/ezopen/h5/iframe?bSupporDoubleClickFull=0&url=" + _this.opt.url.replace("?","&") + "&autoplay=" + _this.opt.autoplay + "&audio=" + _this.opt.audio + "&accessToken=" + params.accessToken + "&templete=0" + "&id=" + id + "&decoderVersion=" + _this.opt.decoderVersion; } } iframe.src = matchIframeUrl(); // 默认取容器宽高 var iframeHeight = document.getElementById(id).offsetHeight; var iframeWidth = document.getElementById(id).offsetWidth; if (params.height) { iframeHeight = parseInt(params.height); if(/\%$/.test(params.height)) { iframeWidth = document.getElementById(id).offsetWidth * (parseInt(params.height) /100); } } if (params.width) { iframeWidth = parseInt(params.width); if(/\%$/.test(params.width)) { iframeWidth = document.getElementById(id).offsetWidth * (parseInt(params.width) /100); } } iframe.width = iframeWidth; iframe.height = iframeHeight; iframe.id = 'EZUIKitPlayer-' + id; // 部分iframe属性 iframe.setAttribute("allowfullscreen", true); iframe.setAttribute("allow", "autoplay"); iframe.setAttribute("frameborder", 0); domElement.appendChild(iframe); var jqueryJS = _this.opt.filePath + '/js/jquery.js'; var layerJs = 'https://open.ys7.com/assets/layer/layer.js'; addJs(jqueryJS, function () { addJs(layerJs, function () { // }); // }); /** * 渲染header */ if (matchHeaderOpt().headerContainer) { // if (params.header && params.header instanceof Array) { var headerContainer = document.createElement('div'); headerContainer.setAttribute('class', 'panel-top'); var controsDOM = document.createElement('div'); controsDOM.setAttribute('class', 'contros'); headerContainer.appendChild(controsDOM); domElement.insertBefore(headerContainer, iframe); if (matchHeaderOpt().capturePictureModule) { // 截图 var capturePictureDOM = document.createElement('span'); capturePictureDOM.innerHTML = '' + '' + ' ' + '' + ''; capturePictureDOM.onclick = function () { _this.capturePicture(); }; controsDOM.appendChild(capturePictureDOM); } console.log("matchHeaderOpt().saveModule", matchHeaderOpt().saveModule); if (matchHeaderOpt().saveModule) { var startSaveDOM = document.createElement('span'); startSaveDOM.innerHTML = '' + ' ' + ' ' + ' ' + ''; startSaveDOM.onclick = function () { _this.startSave(); document.getElementById('startSave').setAttribute('class', 'icon hide'); document.getElementById('stopSave').setAttribute('class', 'icon'); }; controsDOM.appendChild(startSaveDOM); var stopSaveDOM = document.createElement('span'); stopSaveDOM.innerHTML = '' + ' ' + ' ' + ' ' + ' '; stopSaveDOM.onclick = function () { _this.stopSave(); document.getElementById('stopSave').setAttribute('class', 'icon hide'); document.getElementById('startSave').setAttribute('class', 'icon'); }; controsDOM.appendChild(stopSaveDOM); } if (matchHeaderOpt().zoomModule) { var enableZoomDOM = document.createElement('span'); enableZoomDOM.innerHTML = '' + ' ' + ' ' + ' ' + ''; enableZoomDOM.onclick = function () { _this.enableZoom(); document.getElementById('enableZoom').setAttribute('class', 'icon hide'); document.getElementById('closeZoom').setAttribute('class', 'icon'); }; controsDOM.appendChild(enableZoomDOM); var closeZoomDOM = document.createElement('span'); closeZoomDOM.innerHTML = '' + ' ' + ' ' + ' ' + ''; closeZoomDOM.onclick = function () { _this.closeZoom(); document.getElementById('closeZoom').setAttribute('class', 'icon hide'); document.getElementById('enableZoom').setAttribute('class', 'icon'); }; controsDOM.appendChild(closeZoomDOM); } } /** * 渲染footer */ /** 根据配置匹配底部渲染 */ function matchFooterOpt() { var result = { footerContainer: false, talkModule: false, broadcastModule: false, hdModule: false, fullScreenModule: false }; var template = _this.opt.template; switch (template) { case 'simple': if (params.footer && params.footer instanceof Array) { var footer = params.footer; result = { footerContainer: true, talkModule: footer.indexOf('talk') !== -1, broadcastModule: footer.indexOf('broadcast') !== -1, hdModule: footer.indexOf('hd') !== -1, fullScreenModule: footer.indexOf('fullScreen') !== -1 }; } break; case 'standard': if (params.footer && params.footer instanceof Array) { var footer = params.footer; result = { footerContainer: true, talkModule: footer.indexOf('talk') !== -1, broadcastModule: footer.indexOf('broadcast') !== -1, hdModule: footer.indexOf('hd') !== -1, fullScreenModule: footer.indexOf('fullScreen') !== -1 }; } break; case 'security': break; case 'voice': result = { footerContainer: true, talkModule: true, broadcastModule: true, hdModule: true, fullScreenModule: true }; break; } return result; } /** 根据配置匹配底部渲染 */ function matchHeaderOpt() { var result = { headerContainer: false, capturePictureModule: false, saveModule: false, zoomModule: false }; var template = _this.opt.template; switch (template) { case 'simple': if (params.header && params.header instanceof Array) { var header = params.header; result = { headerContainer: true, capturePictureModule: header.indexOf('capturePicture') !== -1, saveModule: header.indexOf('save') !== -1, zoomModule: header.indexOf('zoom') !== -1 }; } break; case 'standard': break; case 'security': break; case 'voice': result = { headerContainer: true, capturePictureModule: true, saveModule: true, zoomModule: true }; break; } return result; } if (matchFooterOpt().footerContainer || _this.opt.plugin.indexOf('talk') !== -1) { var recoderCSS = _this.opt.filePath + '/npm/css/recoder.css'; var recoderJs = _this.opt.filePath + '/npm/js/recoder.js'; var recorderJs = _this.opt.filePath + '/recorder.js'; // addCss() addCss(recoderCSS, function () { }); addJs(recoderJs, function () { addJs(recorderJs, function () { }); }); // 对讲模块 if (_this.opt.plugin.indexOf('talk') !== -1 || matchFooterOpt().talkModule) { function apiSuccess(data) { console.log("data", data); if (data.code == 200) { var apiResult = data.data; if (apiResult) { // 临时将https转换为websocket var rtcTrunk = apiResult.rtcUrl; if (rtcTrunk.indexOf("ws") === -1) { rtcTrunk = rtcTrunk.replace("https", "wss").replace("rtcgw", "rtcgw-ws"); } _this.opt.rtcUrl = rtcTrunk; _this.opt.ttsUrl = "tts://" + apiResult.ttsUrl; var talk = "talk://" + _this.opt.deviceSerial + ":0:" + _this.opt.channelNo + ":cas.ys7.com:6500"; _this.opt.talkLink = _this.opt.ttsUrl + "/" + talk; _this.opt.stream = apiResult.stream; console.log("_this.opt", _this.opt); // 加载依赖 if (!_this.opt.isReliesReady) { var adapeterJS = _this.opt.filePath + '/npm/js/adapeter.js'; var janusJS = _this.opt.filePath + '/npm/js/janus.js'; var ttsJS = _this.opt.filePath + '/npm/js/tts.js'; console.log("加载jquery.js"); addJs(adapeterJS, function () { console.log("加载adapeter.js"); addJs(janusJS, function () { console.log("加载janus.js"); addJs(ttsJS, function () { console.log("加载tts.js"); // 文件加载完毕; _this.opt.isReliesReady = true; }); }); }); } // 创建DOM if (!document.getElementById("audioleft")) { var audioleft = document.createElement('div'); audioleft.style.display = 'none'; audioleft.id = 'audioleft'; document.body.appendChild(audioleft); } if (!document.getElementById("audioright")) { var audioright = document.createElement('div'); audioright.style.display = 'none'; audioright.id = 'audioright'; document.body.appendChild(audioright); } } } EZUIKit.opt = _this.opt; } function apiError(err) { if (params.handleError) { params.handleError(err); } } request(_this.opt.apiDomain, 'POST', { accessToken: _this.opt.accessToken, deviceSerial: _this.opt.deviceSerial, channelNo: _this.opt.channelNo }, '', apiSuccess, apiError); } if (matchFooterOpt().footerContainer) { // 底部容器 var footerContainer = document.createElement('div'); footerContainer.setAttribute("class", 'audio-controls'); domElement.appendChild(footerContainer); if (matchFooterOpt().hdModule || matchFooterOpt().fullScreenModule) { // 底部右侧元素 var rightContros = document.createElement('div'); rightContros.setAttribute('class', 'contros'); footerContainer.appendChild(rightContros); if (matchFooterOpt().hdModule) { // 高清-标清切换 var hdDom = document.createElement('span'); hdDom.setAttribute('id', 'video-hd'); hdDom.innerHTML = _this.opt.url.indexOf('.hd') === -1 ? '标清' : '高清'; hdDom.onclick = function () { // 停止 if(_this.opt.videoLoading){ layer.msg("视频加载中,请稍后"); return false; }else { var stopPromise = _this.stop(); _this.opt.videoLoading = true; stopPromise.then((data)=>{ _this.opt.videoLoading = false; if (_this.opt.url.indexOf('.hd') === -1) { _this.opt.url = _this.opt.url.replace('.live', '.hd.live'); hdDom.innerHTML = _this.opt.url.indexOf('.hd') === -1 ? '标清' : '高清'; } else { _this.opt.url = _this.opt.url.replace('.hd.live', '.live'); hdDom.innerHTML = _this.opt.url.indexOf('.hd') === -1 ? '标清' : '高清'; } _this.play(_this.opt.url) }) .catch((error)=>{ console.log("error",error) }) } //iframe.src = domain +"/ezopen/h5/iframe?url=" + _this.opt.url.replace('.hd.live', '.live') + "&autoplay=1&audio=" + _this.opt.audio + "&accessToken=" + _this.opt.accessToken + "&templete=" + 0; }; rightContros.appendChild(hdDom); } if (matchFooterOpt().fullScreenModule) { // 声音控制 var openSoundDOM = document.createElement('span'); openSoundDOM.setAttribute('class', 'hide'); openSoundDOM.setAttribute('id', 'ezuikit-open-sound'); openSoundDOM.setAttribute('title', '打开声音'); openSoundDOM.setAttribute('style', 'vertical-align: top;'); openSoundDOM.innerHTML = ''; openSoundDOM.onclick = function () { _this.openSound(0); openSoundDOM.setAttribute('class', 'hide'); closeSoundDOM.setAttribute('class', ''); }; // 声音控制 var closeSoundDOM = document.createElement('span'); openSoundDOM.setAttribute('id', 'ezuikit-close-sound'); closeSoundDOM.setAttribute('class', 'hide'); closeSoundDOM.setAttribute('title', '关闭声音'); closeSoundDOM.setAttribute('style', 'vertical-align: top;'); closeSoundDOM.innerHTML = ''; closeSoundDOM.onclick = function () { _this.closeSound(0); openSoundDOM.setAttribute('class', ''); closeSoundDOM.setAttribute('class', 'hide'); }; rightContros.appendChild(openSoundDOM); rightContros.appendChild(closeSoundDOM); } // 根据当前音频配置展示 if (_this.opt.audio == 1) { closeSoundDOM.setAttribute('class', ''); } else { openSoundDOM.setAttribute('class', ''); _this.closeSound(0); } if (matchFooterOpt().fullScreenModule) { // 全屏控制 var fullScreenDOM = document.createElement('span'); fullScreenDOM.setAttribute('title', '全屏'); fullScreenDOM.setAttribute('style', 'vertical-align: top;'); fullScreenDOM.innerHTML = ' '; fullScreenDOM.onclick = function () { _this.fullScreen(); }; rightContros.appendChild(fullScreenDOM); } } if (matchFooterOpt().talkModule) { // 对讲 var startTalkDOM = document.createElement('div'); var stopTalkDOM = document.createElement('div'); startTalkDOM.setAttribute("class", "ptp-talk off"); startTalkDOM.innerHTML = '' + '' + ' ' + ' ' + ' ' + ' ' + ' ' + ' 开启对讲'; startTalkDOM.onclick = function () { console.log("EZUIKit.state.countTimer", EZUIKit.state.countTimer); if (EZUIKit.state.countTimer) { window.layer.msg("语音设备正忙,请稍后重试"); return false; } countTime('add', 0); console.log("开始对讲,关闭声音"); _this.closeSound(0); console.log(_this.opt); _this.startTalk(); this.setAttribute("class", "ptp-talk off hide"); stopTalkDOM.setAttribute("class", "ptp-talk on"); }; stopTalkDOM.setAttribute("class", "ptp-talk on hide"); stopTalkDOM.innerHTML = '' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + '关闭对讲'; stopTalkDOM.onclick = function () { console.log(_this.opt); _this.stopTalk(); countTime('destory', 0); _this.openSound(0); this.setAttribute("class", "ptp-talk on hide"); startTalkDOM.setAttribute("class", "ptp-talk off"); }; footerContainer.appendChild(startTalkDOM); footerContainer.appendChild(stopTalkDOM); } if (matchFooterOpt().broadcastModule) { var startBroadcastDOM = document.createElement('div'); var stopBroadcastDOM = document.createElement('div'); startBroadcastDOM.setAttribute("class", 'broadcast off'); stopBroadcastDOM.setAttribute("class", "broadcast on hide"); startBroadcastDOM.innerHTML = ' ' + ' ' + ' ' + ' ' + '' + '语音播报'; startBroadcastDOM.onclick = function () { this.setAttribute("class", "broadcast off hide"); stopBroadcastDOM.setAttribute("class", "broadcast on"); }; stopBroadcastDOM.innerHTML = '
' + '
' + '
' + '
    ' + '
' + '
' + '
' + '
自定义语音
' + '
' + '
' + '' + ' ' + ' ' + ' ' + '' + '语音播报'; // //自定义语音唤起 // document.getElementById("voice-custom").onclick = function(){ // console.log("显示自定义语音"); // } stopBroadcastDOM.onclick = function () { this.setAttribute("class", "broadcast on hide"); startBroadcastDOM.setAttribute("class", "broadcast off"); }; footerContainer.appendChild(startBroadcastDOM); footerContainer.appendChild(stopBroadcastDOM); // 召唤自定义语言 document.getElementById("voice-custom").onclick = function () { console.log("显示自定义语音"); startSpeakDOM.setAttribute('class', 'speak off'); }; // 获取语音列表 fetchVoiceList(0); function fetchVoiceList(page) { function apiSuccess(data) { console.log("data", data); if (data.code == 200) { randerVoliceList(data.data, 5); EZUIKit.state.page = data.page.page; // 如果用户语音列表为空 if (page == 0 && data.data.length == 0 && !EZUIKit.state.fetchDefaultList) { // 获取用户语音为空 EZUIKit.state.fetchDefaultList = true; fetchVoiceList(0); } } } function apiError(err) { console.log("err", err); } request( domain + '/api/lapp/voice/query', 'POST', { accessToken: _this.opt.accessToken, pageStart: page, pageSize: EZUIKit.state.pageSize, default: EZUIKit.state.fetchDefaultList ? 'true' : 'false' }, '', apiSuccess, apiError); } function randerVoliceList(data) { console.log("renderVoliceList", data); if (data && data.length > 0) { for (var i = 0; i < data.length; i++) { var voiceItem = document.createElement('li'); voiceItem.innerHTML = "
  • " + (data[i]["voiceName"].length > 10 ? data[i]["voiceName"].substr(0, 10) + "..." : data[i]["voiceName"]) + "
  • "; document.getElementsByClassName('voice-list-ul')[0].append(voiceItem); // "
  • " + (data[i]["voiceName"].length > 10 ? (data[i]["voiceName"].substr(0, 10) + "...") : data[i]["voiceName"]) + "
  • "; // $("#voice-list ul").append("
  • " + (data[i]["voiceName"].length > 10 ? (data[i]["voiceName"].substr(0, 10) + "...") : data[i]["voiceName"]) + "
  • "); voiceItem.onclick = function (e) { console.log("点击元素", e.target, e.target.dataset.url); var voiceUrl = e.target.dataset.url; var time = e.target.dataset.time; playListOfVoice(voiceUrl, time); }; } if (data.length === EZUIKit.state.pageSize) { document.getElementById('voice-list-end').innerHTML = "向下滚动加载更多"; } else { document.getElementById('voice-list-end').innerHTML = "没有更多数据了"; } } } function playListOfVoice(voiceUrl, time) { console.log("播放语音", voiceUrl, time); // decoder && decoder.closeSound(0); function apiSuccess(data) { console.log("data.data", data.data); if (data.code == 200) { // $("#startBroadcast").show(); // $("#stopBroadcast").hide(); countTime('sub', parseInt(time)); } else if (data.code == "10001") { window.layer.msg("未找到当前语音"); } else { window.layer.msg(data.msg || '发送失败,请稍后再试'); } // padding = false; } function apiError(err) { console.log("err", err); } request( domain + '/api/lapp/voice/send', 'POST', { accessToken: _this.opt.accessToken, deviceSerial: _this.opt.deviceSerial, channelNo: _this.opt.channelNo, fileUrl: voiceUrl }, '', apiSuccess, apiError); } // 自定义语音 // 对讲 var startSpeakDOM = document.createElement('div'); var stopSpeakDOM = document.createElement('div'); startSpeakDOM.setAttribute('class', 'speak off hide'); stopSpeakDOM.setAttribute('class', 'speak on hide'); startSpeakDOM.setAttribute('id', 'startSpeak'); stopSpeakDOM.setAttribute('id', 'stopSpeak'); startSpeakDOM.innerHTML = '' + ' ' + ' ' + ' ' + '' + '按住说话'; stopSpeakDOM.innerHTML = '' + '' + ' ' + '' + '' + '松开发送'; footerContainer.appendChild(startSpeakDOM); footerContainer.appendChild(stopSpeakDOM); document.getElementById("voice-list").onscroll = function (e) { var sum = this.scrollHeight; console.log("sum", sum, this.scrollTop, document.getElementById("voice-list").clientHeight); if (sum <= this.scrollTop + this.clientHeight) { console.log("拖动到底,执行加载", EZUIKit.state.page); fetchVoiceList(++EZUIKit.state.page); } }; // $("#voice-list").unbind("scroll").bind("scroll", function (e) { // // console.log("e",e,this.scrollHeight, $(this).scrollTop() + $(this).height()) // var sum = this.scrollHeight; // if (sum <= $(this).scrollTop() + $(this).height()) { // console.log("拖动到底,执行加载", page); // fetchVoiceList(++page); // } // loading = false; // }); // time-area var timeAreaDOM = document.createElement('div'); timeAreaDOM.setAttribute('class', 'time-area'); timeAreaDOM.setAttribute('id', 'time-area'); timeAreaDOM.innerHTML = '00:00'; footerContainer.appendChild(timeAreaDOM); // 按住说话 var recorder; document.getElementById('startSpeak').onmousedown = function () { if (EZUIKit.state.countTimer) { window.layer.msg("语音设备正忙,请稍后重试"); return false; } console.log("按住说话"); startSpeakDOM.setAttribute('class', 'speak off hide'); stopSpeakDOM.setAttribute('class', 'speak on'); // console.log("startRecording",startRecording); // startRecording(); voiceInit(); countTime('add', 0); setTimeout(function () { EZUIKit.state.recodeTime = 0; startRecording(); }, 1000); if (EZUIKit.state.recodeTimer) { // 先清空计数器 clearInterval(EZUIKit.state.recodeTimer); } EZUIKit.state.recodeTimer = setInterval(function () { if (EZUIKit.state.recodeTime >= 59) { _this.stopTalk(); countTime('destory', 0); this.setAttribute("class", "ptp-talk on hide"); startTalkDOM.setAttribute("class", "ptp-talk off"); window.layer.msg("不超过1分钟"); } else { EZUIKit.state.recodeTime = EZUIKit.state.recodeTime + 1; } }, 1000); /** 录音控制 */ var audio_context; function startUserMedia(stream) { var input = audio_context.createMediaStreamSource(stream); recorder = new window.Recorder(input); } function startRecording() { recorder && recorder.record(); } function stopRecording() { recorder && recorder.stop(); recorder.clear(); } function voiceInit() { console.log("run init"); try { // webkit shim window.AudioContext = window.AudioContext || window.webkitAudioContext; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; window.URL = window.URL || window.webkitURL; audio_context = new AudioContext(); console.log('Audio context set up.'); console.log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!')); } catch (e) { console.log("err", e); window.layer.msg('No web audio support in this browser!'); } navigator.getUserMedia({ audio: true }, startUserMedia, function (e) { console.log('No live audio input: ' + e); }); } ; }; // 松开发送 document.getElementById('stopSpeak').onmouseup = function () { console.log("松开发送"); stopSpeakDOM.setAttribute('class', 'speak on hide'); stopSpeakFun(); function stopSpeakFun() { countTime('destory', 0); if (EZUIKit.state.recodeTime < 1) { window.layer.msg("说话时间过短"); clearInterval(EZUIKit.state.recodeTimer); return false; } clearInterval(EZUIKit.state.recodeTimer); wavUpload(); } function wavUpload() { try { recorder && recorder.stop(); // createAudioDom(); recorder && recorder.exportWAV(function (wav_file) { console.log("wav_file", wav_file); if (wav_file.size < 1000) { window.layer.msg("录音失败,请重试"); // recodeTime = 0; EZUIKit.state.recodeTime = 0; return false; } // 测试 countTime('sub', EZUIKit.state.recodeTime + 2); // 延时 var formdata = new FormData(); // form 表单 {key:value} formdata.append("voiceFile", wav_file); // form input type="file" formdata.append("accessToken", _this.opt.accessToken); formdata.append("deviceSerial", _this.opt.deviceSerial); formdata.append("channelNo", _this.opt.channelNo); // padding = true; function apiSuccess(data) { console.log("data.data", data.data); if (data.code == 200) { // $("#startBroadcast").show(); // $("#stopBroadcast").hide(); countTime('sub', EZUIKit.state.recodeTime + 2); } else if (data.code == "10001") { window.layer.msg("未找到当前语音"); } else { window.layer.msg(data.msg || '发送失败,请稍后再试'); } // padding = false; } function apiError(err) { console.log("err", err); } request(domain + '/api/lapp/voice/sendonce', 'POST', { voiceFile: wav_file, accessToken: _this.opt.accessToken, deviceSerial: _this.opt.deviceSerial, channelNo: _this.opt.channelNo }, '', apiSuccess, apiError); }); recorder && recorder.clear(); } catch (err) { console.log(err); } } }; } /* 时间计数 */ function countTime(type, start) { clearInterval(EZUIKit.state.countTimer); if (type === 'add') { var i = start; EZUIKit.state.countTimer = setInterval(function () { ++i; document.getElementById("time-area").innerHTML = formatSeconds(i); }, 1000); } else if (type === 'sub') { var i = start; EZUIKit.state.countTimer = setInterval(function () { if (i > 0) { i--; document.getElementById("time-area").innerHTML = formatSeconds(i); } else { clearInterval(EZUIKit.state.countTimer); EZUIKit.state.countTimer = undefined; console.log("倒计时结束,开启声音"); // decoder.openSound(0); } }, 1000); } else if (type === 'destory') { clearInterval(EZUIKit.state.countTimer); EZUIKit.state.countTimer = undefined; document.getElementById("time-area").innerHTML = '00:00'; } //将秒数转换为时分秒格式 function formatSeconds(value) { var theTime = parseInt(value); // 秒 var middle = 0; // 分 var hour = 0; // 小时 var secondV = '00'; var minV = '00'; var hourV = '00'; if (theTime > 59) { middle = parseInt(theTime / 60); theTime = parseInt(theTime % 60); if (middle > 59) { hour = parseInt(middle / 60); middle = parseInt(middle % 60); } } secondV = parseInt(theTime) > 9 ? parseInt(theTime) : '0' + parseInt(theTime); minV = parseInt(middle) > 9 ? parseInt(middle) : '0' + parseInt(middle); hourV = parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour); if (hour > 0) { return hourV + ':' + minV + ':' + secondV; } else if (middle > 0) { return minV + ':' + secondV; } else { return '00:' + secondV; } } } /* 将秒数转换为时分秒格式 */ function formatSeconds(value) { var theTime = parseInt(value); // 秒 var middle = 0; // 分 var hour = 0; // 小时 var secondV = '00'; var minV = '00'; var hourV = '00'; if (theTime > 59) { middle = parseInt(theTime / 60); theTime = parseInt(theTime % 60); if (middle > 59) { hour = parseInt(middle / 60); middle = parseInt(middle % 60); } } secondV = parseInt(theTime) > 9 ? parseInt(theTime) : '0' + parseInt(theTime); minV = parseInt(middle) > 9 ? parseInt(middle) : '0' + parseInt(middle); hourV = parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour); if (hour > 0) { return hourV + ':' + minV + ':' + secondV; } else if (middle > 0) { return minV + ':' + secondV; } else { return '00:' + secondV; } } } } }) }) // iframe 传递数据 var _this = this; window.addEventListener("message", function (event) { var origin = event.origin; var id = _this.opt.id; if (event.data.type) { switch (event.data.type) { case 'openSound': if (id == event.data.id && params.openSoundCallBack) { params.openSoundCallBack(event.data); } break; case 'closeSound': if (id == event.data.id && params.closeSoundCallBack) { params.closeSoundCallBack(event.data); } break; case 'capturePicture': if (id == event.data.id && params.capturePictureCallBack) { params.capturePictureCallBack(event.data); } break; case 'startSave': if (id == event.data.id && params.startSaveCallBack) { params.startSaveCallBack(event.data); } break; case 'stopSave': if (id == event.data.id && params.stopSaveCallBack) { params.stopSaveCallBack(event.data); } break; case 'fullScreen': if (id == event.data.id && params.fullScreenCallBack) { params.fullScreenCallBack(event.data); } break; case 'getOSDTime': if (id == event.data.id && params.getOSDTimeCallBack) { params.getOSDTimeCallBack(event.data); } break; case 'handleSuccess': if (id == event.data.id && params.handleSuccess) { params.handleSuccess(event.data); } break; case 'handleError': if (id == event.data.id && params.handleError) { params.handleError(event.data); } break; case 'dblclick': if (id == event.data.id && _this.opt.bSupporDoubleClickFull) { if(_this.opt.fullScreenStatus === 0){ _this.fullScreen(); } else { _this.cancelFullScreen(); } } break; case 'startTalk': _this.startTalk(); // params.startTalk(); _this.closeSound(); break; case 'stopTalk': // window.stopTalk() // params.stopTalk(); _this.openSound(); break; case 'clickEventHandle': console.log("event.data",event.data); if(params.clickEventHandle) { params.clickEventHandle(event.data); } break; case 'removeEventHandle': if(params.removeEventHandle) { params.removeEventHandle(event.data); } break; case 'esc': if(params.clickEventHandle) { params.clickEventHandle(event.data); } break; } } }); // 全屏变化回调 function fullscreenchange(data) { _this.opt.fullScreenStatus = data ? 1 : 0; if (params.fullScreenChangeCallBack) { params.fullScreenChangeCallBack({data:data,id: _this.opt.id}); } } if (typeof document.fullScreen !== "undefined") { document.addEventListener("fullscreenchange", function() { var e = document.fullscreen || false; fullscreenchange(e) }) } else if (typeof document.webkitIsFullScreen !== "undefined") { document.addEventListener("webkitfullscreenchange", function() { var e = document.webkitIsFullScreen || false; fullscreenchange(e) }) } else if (typeof document.mozFullScreen !== "undefined") { document.addEventListener("mozfullscreenchange", function() { var e = document.mozFullScreen || false; fullscreenchange(e) }) } }; // 播放相关API EZUIKitPlayer.prototype.play = function (data) { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; if (typeof data === 'object' && data.url) { this.opt.url = data.url; } if (typeof data === 'object' && data.accessToken) { this.opt.accessToken = data.accessToken; } if (typeof data === 'string') { this.opt.url = data; } player.postMessage({ action: "play", accessToken: this.opt.accessToken, url: this.opt.url }, domain + "/ezopen/h5/iframe"); var _this = this; this.opt.videoLoading = true; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'handleSuccess') { setTimeout(()=>{ _this.opt.videoLoading = false; },1000) resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.stop = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("stop", domain + "/ezopen/h5/iframe"); var _this = this; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'stop') { resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.openSound = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("openSound", domain + "/ezopen/h5/iframe"); var _this = this; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'openSound') { resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.closeSound = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("closeSound", domain + "/ezopen/h5/iframe"); var _this = this; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'closeSound') { resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.startSave = function (fileName) { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage({ action: "startSave", fileName: fileName || 'default' }, domain + "/ezopen/h5/iframe"); var _this = this; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'startSave') { resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.stopSave = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("stopSave", domain + "/ezopen/h5/iframe"); var _this = this; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'stopSave') { resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.fullScreen = function () { if(this.opt.fullScreenStatus === 1){ return false } var _this = this; var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { // console.log('移动端全屏'); var width = document.documentElement.clientWidth; var height = document.documentElement.clientHeight; // wrapper = document.getElementById("test"), var wrapper = document.body;//document.body 属性返回 元素, document.documentElement 属性返回 元素。 wrapper =document.getElementById(id); var style = ""; style += "width:" + height + "px;";// 注意旋转后的宽高切换 style += "height:" + width + "px;"; style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);"; // 注意旋转中点的处理 style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;"; style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;"; style += 'position: fixed;top: 0;left: 0;z-index:10'; wrapper.style.cssText = style; // var cancelFullDOM = document.createElement('div'); // cancelFullDOM.id = id + "cancel-full-screen" // var cancelFullDOMStyle="width:30px;height:"+height+"px;z-index:1000;position:fixed;top:0px;right:0px;"; // cancelFullDOMStyle += "background-image: url(https://resource.ys7cloud.com/group1/M00/00/7E/CtwQE1-01qeAH2wAAAABOliqQ5g167.png);" // cancelFullDOMStyle += "background-size: contain;background-repeat:no-repeat;background-color:rgba(0,0,0,0.2)" // cancelFullDOM.style = cancelFullDOMStyle; // cancelFullDOM.onclick = function(){ // _this.cancelFullScreen(); // } // document.body.appendChild(cancelFullDOM); setTimeout(function () { player.postMessage('autoResize', domain + "/ezopen/h5/iframe") }, 500) } else { // console.log('pc端全屏'); var requestFullScreen = function (element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } requestFullScreen(document.getElementById(id)); } if (this.params.fullScreenCallBack) { this.params.fullScreenCallBack(this.opt.id); } this.opt.fullScreenStatus = 1; }; EZUIKitPlayer.prototype.cancelFullScreen = function () { if(this.opt.fullScreenStatus === 0){ return false } var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { var width = document.getElementById(id).width; var height = document.getElementById(id).height; // wrapper = document.getElementById("test"), var wrapper = document.body;//document.body 属性返回 元素, document.documentElement 属性返回 元素。 wrapper =document.getElementById(id); var style = ""; style += "width:" + width + "px;"; style += "height:" + height + "px;"; style += "-webkit-transform: rotate(0); transform: rotate(0);"; style += "-webkit-transform-origin: 0 0;"; style += "transform-origin: 0 0;"; wrapper.style.cssText = style; setTimeout(function () { player.postMessage("autoResize", domain + "/ezopen/h5/iframe") }, 500); var cancelFullDOMId = id + "cancel-full-screen"; var cancelFullDOM = document.getElementById(cancelFullDOMId); if(cancelFullDOM){ document.body.removeChild(cancelFullDOM) } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } } if (this.params.cancelFullScreenCallBack) { this.params.cancelFullScreenCallBack(this.opt.id); } this.opt.fullScreenStatus = 0; } EZUIKitPlayer.prototype.capturePicture = function (fileName,isUndownload) { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage({ action: "capturePicture", fileName: fileName || 'default', isUndownload: isUndownload, }, domain + "/ezopen/h5/iframe"); var _this = this; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'capturePicture') { resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.enableZoom = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("enableZoom", domain + "/ezopen/h5/iframe"); }; EZUIKitPlayer.prototype.closeZoom = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("closeZoom", domain + "/ezopen/h5/iframe"); }; EZUIKitPlayer.prototype.getOSDTime = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("getOSDTime", domain + "/ezopen/h5/iframe"); var _this = this; var promise = new Promise(function(resolve,reject) { window.addEventListener("message", function (event) { var playId = _this.opt.id; if (playId == event.data.id && event.data.type === 'getOSDTime') { resolve(event.data); } }); }); return promise; }; EZUIKitPlayer.prototype.autoResize = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("autoResize", domain + "/ezopen/h5/iframe") }; EZUIKitPlayer.prototype.reSize = function (width,height) { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; var containerDOM = document.getElementById(this.opt.id); containerDOM.style.width = width + 'px'; containerDOM.style.height = height + 'px'; document.getElementById(this.opt.id).style.width = width + 'px'; document.getElementById(this.opt.id).style.height = height + 'px'; var playDOM = document.getElementById(id); playDOM.setAttribute("width",width); playDOM.setAttribute("height",height); playDOM.style.width = width + 'px'; playDOM.style.height = height + 'px'; setTimeout(function(){ player.postMessage({ action: 'autoResize', }, domain + "/ezopen/h5/iframe"); },500) }; EZUIKitPlayer.prototype.startTalk = function () { console.log("执行开始对讲"); console.log(this.opt); var _this = this; EZUIKit.opt = this.opt; var apiSuccess = function(data) { if (data.code == 200) { var apiResult = data.data; if (apiResult) { // 临时将https转换为websocket var rtcTrunk = apiResult.rtcUrl; if (rtcTrunk.indexOf("ws") === -1) { rtcTrunk = rtcTrunk.replace("https", "wss").replace("rtcgw", "rtcgw-ws"); } _this.opt.rtcUrl = rtcTrunk; _this.opt.ttsUrl = "tts://" + apiResult.ttsUrl; var talk = "talk://" + _this.opt.deviceSerial + ":0:" + _this.opt.channelNo + ":cas.ys7.com:6500"; _this.opt.talkLink = _this.opt.ttsUrl + "/" + talk; _this.opt.stream = apiResult.stream; window.startTalk(); } } } var apiError = function() { layer.msg("获取对讲token失败") } request(_this.opt.apiDomain, 'POST', { accessToken: _this.opt.accessToken, deviceSerial: _this.opt.deviceSerial, channelNo: _this.opt.channelNo }, '', apiSuccess, apiError); }; EZUIKitPlayer.prototype.stopTalk = function () { console.log("执行结束对讲"); window.stopTalk(); }; EZUIKitPlayer.prototype.edit = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage("edit", domain + "/ezopen/h5/iframe"); }; EZUIKitPlayer.prototype.btnReRender = function (data) { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage({action: "btnReRender",data: data}, domain + "/ezopen/h5/iframe") }; EZUIKitPlayer.prototype.changePlayUrl = function (data) { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage({action: "changePlayUrl",data: data}, domain + "/ezopen/h5/iframe"); }; EZUIKitPlayer.prototype.fetchThemeData = function () { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage({action: "fetchThemeData"}, domain + "/ezopen/h5/iframe") }; EZUIKitPlayer.prototype.setThemeData = function (accessToken, header, footer) { var id = 'EZUIKitPlayer-' + this.opt.id; var player = document.getElementById(id).contentWindow; player.postMessage({action: "setThemeData",data:{accessToken, header, footer}}, domain + "/ezopen/h5/iframe") }; /** * 视频播放器-结束 */ EZUIKit.EZUIKitPlayer = EZUIKitPlayer; window.EZUIKit = EZUIKit; if (!noGlobal) { window.EZUIKit = EZUIKit; } return EZUIKit; });