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() {
break;
case "raw_msg":
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", {
media_name: e.data["media_name"],
stream_name: e.data["stream_name"],
......
src/components/MMCPlayer/components/qingliu/index.vue
......@@ -16,23 +16,35 @@ export default {
},
data() {
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);
},
mounted() {
console.log(this.raw_msg,"raw_msg");
window.onresize = (e) =>{
const clientheight = document.documentElement.clientHeight || document.body.clientHeight
let isFullScreen = screen.height == clientheight
if(isFullScreen == true){
return
}else{
this.$emit("close")
window.onresize = (e) => {
const clientheight =
document.documentElement.clientHeight || document.body.clientHeight;
let isFullScreen = screen.height == clientheight;
if (isFullScreen == true) {
return;
} else {
this.$emit("close");
}
}
};
window.qingliu = this.init;
this.init();
},
......@@ -45,7 +57,7 @@ export default {
* 初始化
*/
init() {
window.kbt_sdk_load().then( () => {
window.kbt_sdk_load().then(() => {
let parentObj = this.$refs.player_area;
window.kbt_player_create(
this.name,
......@@ -56,36 +68,37 @@ export default {
);
});
},
screenShot(){
screenShot() {
var canvas = document.querySelector("#sdk_canvas_" + this.name);
const image = canvasToDataURL(canvas);
let blob = dataURLToBlob(image);
return blob
return blob;
},
fullScreen(){
fullScreen() {
// 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();
},
onDebugInfo(e){
switch(e.type){
case 'qoeinfo':
case 'raw_msg':
this.$emit('debugInfo', e);
onDebugInfo(e) {
console.log(e.type, "e.type");
switch (e.type) {
case "qoeinfo":
case "raw_msg":
this.$emit("debugInfo", e);
break;
}
}
},
},
};
</script>
<style scoped lang='scss'>
.qingliu {
.player_area{
.player_area {
width: 100%;
height: 100%;
}
.cf{
.cf {
position: fixed;
top: 0;
left: 0;
......
src/components/MMCPlayer/index.vue
<template>
<div :class="{'full-video': fullScreen}" ref="wrap">
<template>
<div :class="{ 'full-video': fullScreen }" ref="wrap">
<div class="interact-wrap">
<div
class="cpt_video"
......@@ -10,9 +10,13 @@
v-interact
>
<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 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>
<div v-show="!fullScreen" class="close" @click="onClose()">关闭</div>
......@@ -37,58 +41,93 @@
:raw_msg="raw_msg"
@debugInfo="onDebugInfo"
/>
<div class="info" v-if="showQingLiuInfo && playerCom == 'QingLiuPlayer'">
<div
class="info"
v-if="showQingLiuInfo && playerCom == 'QingLiuPlayer'"
>
<div class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="de">
<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 class="play">
......@@ -102,13 +141,17 @@
<img src="~./assets/info.png" alt />
</div>
</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-selects">
<el-select
class="video_type mr24"
v-model="streamSelect"
@change="fpvSmallWindow = true;"
@change="fpvSmallWindow = true"
placeholder="切换源"
>
<el-option
......@@ -118,7 +161,11 @@
:value="item.value"
></el-option>
</el-select>
<el-select class="size_type" v-model="sizeSelect" placeholder="比例">
<el-select
class="size_type"
v-model="sizeSelect"
placeholder="比例"
>
<el-option
v-for="item in sizeOptions2"
:key="item.value"
......@@ -128,7 +175,10 @@
</el-select>
</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>
<slot></slot>
......@@ -146,7 +196,7 @@ import LiveNVRPlayer from "./components/livenvr";
import QingLiuPlayer from "./components/qingliu";
import FLVPlayer from "./components/flv";
import SRSPlayer from "./components/srs";
import WebRtcPlayer from './components/webrtc';
import WebRtcPlayer from "./components/webrtc";
import { to_moveMount } from "../../lib/to_moveMount";
import Obstacle from "./components/obstacle";
......@@ -192,13 +242,13 @@ export default {
//是否居中显示
isCenter: {
type: Boolean,
default: true
default: true,
},
//默认大小, 默认为X2, 1: X1, 2:X2, 3:X3
size: {
type: Number,
default: 2
}
default: 2,
},
},
data() {
return {
......@@ -270,11 +320,11 @@ export default {
}
}
},
_streamOptions(){
_streamOptions() {
return this.streamOptions.map((item, i) => {
item.value = i;
return item;
})
});
},
/**
* 选择流选项
......@@ -313,7 +363,7 @@ export default {
if (this._streamOptions.length > 0) {
this.streamSelect = this._streamOptions[0].value;
} else {
this.streamSelect = ''
this.streamSelect = "";
}
},
deep: true,
......@@ -339,9 +389,12 @@ export default {
onDebugInfo(data) {
switch (data.type) {
case "qoeinfo":
console.log(data.data, "清流调试信息事件");
this.qoeinfo = data.data;
break;
case "raw_msg":
console.log(data.data, "清流调试信息事件2");
this.raw_msg = data.data;
break;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论