Skip to content

M
mmc-stl-vue2
提交 ef4e6cee 作者: 温凯
操作

feat(播放器): 添加清流播放器调试日志和优化代码格式

上级 27917c45
正在显示 包含 129 行增加 和 54 行删除
iframe/public/QingLiu/kbt_api.js
...@@ -48,7 +48,16 @@ function kbt_sdk_load() { ...@@ -48,7 +48,16 @@ function kbt_sdk_load() {
break; break;
case "raw_msg": case "raw_msg":
if (window.$Bus) { if (window.$Bus) {
if(e.data["what"] == 903){ if (e.data["what"] == 903) {
console.log(
{
media_name: e.data["media_name"],
stream_name: e.data["stream_name"],
data: e.data["arg1"],
},
"kbt_api.js"
);
window.$Bus.$emit("raw_msg", { window.$Bus.$emit("raw_msg", {
media_name: e.data["media_name"], media_name: e.data["media_name"],
stream_name: e.data["stream_name"], stream_name: e.data["stream_name"],
......
src/components/MMCPlayer/components/qingliu/index.vue
...@@ -16,23 +16,35 @@ export default { ...@@ -16,23 +16,35 @@ export default {
}, },
data() { data() {
return { return {
name: 'QingLiuPlayer' + Date.now(), name: "QingLiuPlayer" + Date.now(),
}; };
}, },
created(){ watch: {
raw_msg: {
handler(val, oldVal) {
if (val) {
console.log(val, "val");
}
},
deep: true,
},
},
created() {
console.log(1111);
window.addEventListener("message", this.onDebugInfo); window.addEventListener("message", this.onDebugInfo);
}, },
mounted() { mounted() {
console.log(this.raw_msg,"raw_msg"); window.onresize = (e) => {
window.onresize = (e) =>{ const clientheight =
const clientheight = document.documentElement.clientHeight || document.body.clientHeight document.documentElement.clientHeight || document.body.clientHeight;
let isFullScreen = screen.height == clientheight let isFullScreen = screen.height == clientheight;
if(isFullScreen == true){ if (isFullScreen == true) {
return return;
}else{ } else {
this.$emit("close") this.$emit("close");
} }
} };
window.qingliu = this.init; window.qingliu = this.init;
this.init(); this.init();
}, },
...@@ -45,7 +57,7 @@ export default { ...@@ -45,7 +57,7 @@ export default {
* 初始化 * 初始化
*/ */
init() { init() {
window.kbt_sdk_load().then( () => { window.kbt_sdk_load().then(() => {
let parentObj = this.$refs.player_area; let parentObj = this.$refs.player_area;
window.kbt_player_create( window.kbt_player_create(
this.name, this.name,
...@@ -56,36 +68,37 @@ export default { ...@@ -56,36 +68,37 @@ export default {
); );
}); });
}, },
screenShot(){ screenShot() {
var canvas = document.querySelector("#sdk_canvas_" + this.name); var canvas = document.querySelector("#sdk_canvas_" + this.name);
const image = canvasToDataURL(canvas); const image = canvasToDataURL(canvas);
let blob = dataURLToBlob(image); let blob = dataURLToBlob(image);
return blob return blob;
}, },
fullScreen(){ fullScreen() {
// var canvas = document.querySelector("#sdk_canvas_" + this.name); // var canvas = document.querySelector("#sdk_canvas_" + this.name);
var canvas = this.$refs.player_area.querySelector('canvas'); var canvas = this.$refs.player_area.querySelector("canvas");
canvas && canvas.requestFullscreen(); canvas && canvas.requestFullscreen();
}, },
onDebugInfo(e){ onDebugInfo(e) {
switch(e.type){ console.log(e.type, "e.type");
case 'qoeinfo': switch (e.type) {
case 'raw_msg': case "qoeinfo":
this.$emit('debugInfo', e); case "raw_msg":
this.$emit("debugInfo", e);
break; break;
} }
} },
}, },
}; };
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.qingliu { .qingliu {
.player_area{ .player_area {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.cf{ .cf {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
......
src/components/MMCPlayer/index.vue
<template> <template>
<div :class="{'full-video': fullScreen}" ref="wrap"> <div :class="{ 'full-video': fullScreen }" ref="wrap">
<div class="interact-wrap"> <div class="interact-wrap">
<div <div
class="cpt_video" class="cpt_video"
...@@ -10,9 +10,13 @@ ...@@ -10,9 +10,13 @@
v-interact v-interact
> >
<div class="video"> <div class="video">
<div class="name" v-clipboard:copy="vUrl.vUrl"><span class="txt">{{ title }}</span></div> <div class="name" v-clipboard:copy="vUrl.vUrl">
<span class="txt">{{ title }}</span>
</div>
<div class="tr-info-box"> <div class="tr-info-box">
<div class="tr-info tr-info--1" v-if="networkType">{{ networkType }}</div> <div class="tr-info tr-info--1" v-if="networkType">
{{ networkType }}
</div>
<div class="tr-info tr-info--2">{{ streamName }}</div> <div class="tr-info tr-info--2">{{ streamName }}</div>
</div> </div>
<div v-show="!fullScreen" class="close" @click="onClose()">关闭</div> <div v-show="!fullScreen" class="close" @click="onClose()">关闭</div>
...@@ -37,58 +41,93 @@ ...@@ -37,58 +41,93 @@
:raw_msg="raw_msg" :raw_msg="raw_msg"
@debugInfo="onDebugInfo" @debugInfo="onDebugInfo"
/> />
<div class="info" v-if="showQingLiuInfo && playerCom == 'QingLiuPlayer'"> <div
class="info"
v-if="showQingLiuInfo && playerCom == 'QingLiuPlayer'"
>
<div class="de"> <div class="de">
<div class="title">bitrate:</div> <div class="title">bitrate:</div>
<div class="detail">{{ raw_msg ? raw_msg/1000 : "0"}}kbps</div> <div class="detail">{{ raw_msg ? raw_msg / 1000 : "0" }}kbps</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">venc_avg:</div> <div class="title">venc_avg:</div>
<div class="detail">{{qoeinfo ? qoeinfo.venc_avg/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.venc_avg / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">venc_last:</div> <div class="title">venc_last:</div>
<div class="detail">{{qoeinfo ? qoeinfo.venc_last/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.venc_last / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushrtt_avg:</div> <div class="title">pushrtt_avg:</div>
<div class="detail">{{qoeinfo ? qoeinfo.pushrtt_avg[0]/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.pushrtt_avg[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushrtt_last:</div> <div class="title">pushrtt_last:</div>
<div class="detail">{{qoeinfo ? qoeinfo.pushrtt_last[0]/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.pushrtt_last[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvrtt_avg:</div> <div class="title">recvrtt_avg:</div>
<div class="detail">{{qoeinfo ? qoeinfo.recvrtt_avg[0]/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.recvrtt_avg[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvrtt_last:</div> <div class="title">recvrtt_last:</div>
<div class="detail">{{qoeinfo ? qoeinfo.recvrtt_last[0]/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.recvrtt_last[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushretrans_avg:</div> <div class="title">pushretrans_avg:</div>
<div class="detail">{{qoeinfo ? (qoeinfo.pushretrans_avg[0]*0.1).toFixed(2) : "0"}}%</div> <div class="detail">
{{
qoeinfo ? (qoeinfo.pushretrans_avg[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushretrans_last:</div> <div class="title">pushretrans_last:</div>
<div class="detail">{{qoeinfo ? (qoeinfo.pushretrans_last[0]*0.1).toFixed(2) : "0"}}%</div> <div class="detail">
{{
qoeinfo ? (qoeinfo.pushretrans_last[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvretrans_avg:</div> <div class="title">recvretrans_avg:</div>
<div class="detail">{{qoeinfo ? (qoeinfo.recvretrans_avg[0]*0.1).toFixed(2) : "0"}}%</div> <div class="detail">
{{
qoeinfo ? (qoeinfo.recvretrans_avg[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvretrans_last:</div> <div class="title">recvretrans_last:</div>
<div class="detail">{{qoeinfo ? (qoeinfo.recvretrans_last[0]*0.1).toFixed(2) : "0"}}%</div> <div class="detail">
{{
qoeinfo ? (qoeinfo.recvretrans_last[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">vdec:</div> <div class="title">vdec:</div>
<div class="detail">{{qoeinfo ? qoeinfo.vdec/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.vdec / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">vbuffer:</div> <div class="title">vbuffer:</div>
<div class="detail">{{qoeinfo ? qoeinfo.vbuffer/1000 : "0"}}ms</div> <div class="detail">
{{ qoeinfo ? qoeinfo.vbuffer / 1000 : "0" }}ms
</div>
</div> </div>
</div> </div>
<div class="play"> <div class="play">
...@@ -102,13 +141,17 @@ ...@@ -102,13 +141,17 @@
<img src="~./assets/info.png" alt /> <img src="~./assets/info.png" alt />
</div> </div>
</el-tooltip> </el-tooltip>
<div v-else class="left ml24" style="margin-left: 124px; color: #fff;"></div> <div
v-else
class="left ml24"
style="margin-left: 124px; color: #fff"
></div>
<div class="ctrl-items"> <div class="ctrl-items">
<div class="ctrl-items-selects"> <div class="ctrl-items-selects">
<el-select <el-select
class="video_type mr24" class="video_type mr24"
v-model="streamSelect" v-model="streamSelect"
@change="fpvSmallWindow = true;" @change="fpvSmallWindow = true"
placeholder="切换源" placeholder="切换源"
> >
<el-option <el-option
...@@ -118,7 +161,11 @@ ...@@ -118,7 +161,11 @@
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
<el-select class="size_type" v-model="sizeSelect" placeholder="比例"> <el-select
class="size_type"
v-model="sizeSelect"
placeholder="比例"
>
<el-option <el-option
v-for="item in sizeOptions2" v-for="item in sizeOptions2"
:key="item.value" :key="item.value"
...@@ -128,7 +175,10 @@ ...@@ -128,7 +175,10 @@
</el-select> </el-select>
</div> </div>
<div class="pointer iconfont icon-gengxin" @click="onReset"></div> <div class="pointer iconfont icon-gengxin" @click="onReset"></div>
<div class="pointer iconfont icon-quanping" @click="onFullScreen"></div> <div
class="pointer iconfont icon-quanping"
@click="onFullScreen"
></div>
</div> </div>
</div> </div>
<slot></slot> <slot></slot>
...@@ -146,7 +196,7 @@ import LiveNVRPlayer from "./components/livenvr"; ...@@ -146,7 +196,7 @@ import LiveNVRPlayer from "./components/livenvr";
import QingLiuPlayer from "./components/qingliu"; import QingLiuPlayer from "./components/qingliu";
import FLVPlayer from "./components/flv"; import FLVPlayer from "./components/flv";
import SRSPlayer from "./components/srs"; import SRSPlayer from "./components/srs";
import WebRtcPlayer from './components/webrtc'; import WebRtcPlayer from "./components/webrtc";
import { to_moveMount } from "../../lib/to_moveMount"; import { to_moveMount } from "../../lib/to_moveMount";
import Obstacle from "./components/obstacle"; import Obstacle from "./components/obstacle";
...@@ -192,13 +242,13 @@ export default { ...@@ -192,13 +242,13 @@ export default {
//是否居中显示 //是否居中显示
isCenter: { isCenter: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
//默认大小, 默认为X2, 1: X1, 2:X2, 3:X3 //默认大小, 默认为X2, 1: X1, 2:X2, 3:X3
size: { size: {
type: Number, type: Number,
default: 2 default: 2,
} },
}, },
data() { data() {
return { return {
...@@ -270,11 +320,11 @@ export default { ...@@ -270,11 +320,11 @@ export default {
} }
} }
}, },
_streamOptions(){ _streamOptions() {
return this.streamOptions.map((item, i) => { return this.streamOptions.map((item, i) => {
item.value = i; item.value = i;
return item; return item;
}) });
}, },
/** /**
* 选择流选项 * 选择流选项
...@@ -313,7 +363,7 @@ export default { ...@@ -313,7 +363,7 @@ export default {
if (this._streamOptions.length > 0) { if (this._streamOptions.length > 0) {
this.streamSelect = this._streamOptions[0].value; this.streamSelect = this._streamOptions[0].value;
} else { } else {
this.streamSelect = '' this.streamSelect = "";
} }
}, },
deep: true, deep: true,
...@@ -339,9 +389,12 @@ export default { ...@@ -339,9 +389,12 @@ export default {
onDebugInfo(data) { onDebugInfo(data) {
switch (data.type) { switch (data.type) {
case "qoeinfo": case "qoeinfo":
console.log(data.data, "清流调试信息事件");
this.qoeinfo = data.data; this.qoeinfo = data.data;
break; break;
case "raw_msg": case "raw_msg":
console.log(data.data, "清流调试信息事件2");
this.raw_msg = data.data; this.raw_msg = data.data;
break; break;
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论