| | |
|---|
| | | <!-- element ui --> |
|---|
| | | <link rel="stylesheet" href="../../lib/elementUi.css"> |
|---|
| | | <script src="../../lib/elementUi.js"></script> |
|---|
| | | |
|---|
| | | <!-- axios --> |
|---|
| | | <script src='../../lib/axios.js'></script> |
|---|
| | | <!-- 视频 --> |
|---|
| | | <script src='../../../realVideo/hls.js'></script> |
|---|
| | | <!-- layui --> |
|---|
| | | <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all"> |
|---|
| | | <style> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="现场视频" name="second"> |
|---|
| | | <!-- {{aoud}} --> |
|---|
| | | <div> |
|---|
| | | <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'> |
|---|
| | | <source id="source" :src="aoud" type="application/x-mpegURL"></source> |
|---|
| | | </video> |
|---|
| | | </div> |
|---|
| | | <video style="height: auto;width: 100%;" controls="controls" id="real_video_conversation" src=""> |
|---|
| | | </video> |
|---|
| | | </el-tab-pane> |
|---|
| | | <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> --> |
|---|
| | | </el-tabs> |
|---|
| | |
|---|
| | | // names: '', |
|---|
| | | contacts: '', |
|---|
| | | deptname: '',//使用方 |
|---|
| | | aoud: '',//视频 |
|---|
| | | ourd: '',//视频data |
|---|
| | | calls: '', |
|---|
| | | imgsl: [], |
|---|
| | | deploymentTime: '', |
|---|
| | |
|---|
| | | if (xhr.status === 200) { |
|---|
| | | // 判断isJson是否传进来了 |
|---|
| | | var data = JSON.parse(xhr.responseText);// JSON转js |
|---|
| | | var ourd = data.data, |
|---|
| | | cl = ourd.channelNumber, |
|---|
| | | deviceCode = ourd.serialNumber; |
|---|
| | | my.deptname = ourd.deptName; |
|---|
| | | // console.log(data,1111111111111) |
|---|
| | | var xhr2 = null//视频请求 |
|---|
| | | , url = 'https://web.byisf.com:18000/GetPlayUrl?deviceCode='+ deviceCode +'&chl=' + cl; |
|---|
| | | if (XMLHttpRequest) { //http请求 |
|---|
| | | xhr2 = new XMLHttpRequest(); |
|---|
| | | } else { |
|---|
| | | xhr2 = new ActiveXObject("Microsoft.XMLHTTP"); |
|---|
| | | |
|---|
| | | } |
|---|
| | | xhr2.open("get", url, true); |
|---|
| | | xhr2.send(); |
|---|
| | | xhr2.onreadystatechange = function () { |
|---|
| | | if (xhr2.readyState === 4) { |
|---|
| | | if (xhr2.status === 200) { |
|---|
| | | // 判断isJson是否传进来了 |
|---|
| | | var data2 = JSON.parse(xhr2.responseText);// JSON转js |
|---|
| | | my.aoud = data2.data.m3u8; |
|---|
| | | // console.log(data2,222222222222) |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | my.ourd = data.data; |
|---|
| | | my.deptname = my.ourd.deptName; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | handleClick(tab, event) {//标签tab点击事件 |
|---|
| | | // console.log(tab, event); |
|---|
| | | }, |
|---|
| | | openRealVideoBox(serialNumber, channelNumber) { |
|---|
| | | var that = this; |
|---|
| | | var newAxios = axios.create({ |
|---|
| | | baseURL: "https://web.byisf.com:18000", |
|---|
| | | withCredentials: false, |
|---|
| | | headers: { |
|---|
| | | "Content-type": "application/x-www-form-urlencoded", |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | //this.form.serialNumber |
|---|
| | | newAxios |
|---|
| | | .post( |
|---|
| | | "/api_control", |
|---|
| | | {}, |
|---|
| | | { |
|---|
| | | params: { |
|---|
| | | param: JSON.stringify({ PktType: "GetAccessToken" }), |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | .then((res) => { |
|---|
| | | newAxios |
|---|
| | | .get( |
|---|
| | | `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}` |
|---|
| | | ) |
|---|
| | | .then((result) => { |
|---|
| | | that.videoSource = result.data.data.m3u8; |
|---|
| | | if (Hls.isSupported()) { |
|---|
| | | var dom = document.getElementById("real_video_conversation"); |
|---|
| | | that.hls = new Hls(); |
|---|
| | | var m3u8Url = decodeURIComponent(that.videoSource); |
|---|
| | | that.hls.loadSource(m3u8Url); |
|---|
| | | that.hls.attachMedia(dom); |
|---|
| | | that.hls.on(Hls.Events.MANIFEST_PARSED, function () { |
|---|
| | | dom.play(); |
|---|
| | | }); |
|---|
| | | that.hls.on(Hls.Events.ERROR, function (event, data) { |
|---|
| | | console.log(data, 4566824159, "视频播放有问题！！！"); |
|---|
| | | if (data.fatal) { |
|---|
| | | switch (data.type) { |
|---|
| | | case Hls.ErrorTypes.NETWORK_ERROR: |
|---|
| | | // try to recover network error |
|---|
| | | console.log( |
|---|
| | | "fatal network error encountered, try to recover" |
|---|
| | | ); |
|---|
| | | that.hls.startLoad(); |
|---|
| | | break; |
|---|
| | | case Hls.ErrorTypes.MEDIA_ERROR: |
|---|
| | | console.log( |
|---|
| | | "fatal media error encountered, try to recover" |
|---|
| | | ); |
|---|
| | | that.hls.recoverMediaError(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | activeName() { |
|---|
| | | if (this.activeName == "second") { |
|---|
| | | this.i++; |
|---|
| | | this.openRealVideoBox(this.ourd.serialNumber, this.ourd.channelNumber); |
|---|
| | | } else { |
|---|
| | | var dom = document.getElementById("real_video_conversation"); |
|---|
| | | if (dom.getAttribute("src") != "") { |
|---|
| | | dom.pause(); |
|---|
| | | dom.setAttribute("src", ""); |
|---|
| | | this.hls.destroy(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值 |
|---|
| | |
|---|
| | | this.getUser(this.ourData.id); |
|---|
| | | // console.log(this.ourData); |
|---|
| | | this.getdatas(this.ourData); |
|---|
| | | },100); |
|---|
| | | }, 50); |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
