@zhsz/cool-design-dv
Version:
134 lines (133 loc) • 4.07 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("./jswebrtc.min.js");
require("./style.css");
const vue$1 = require("@iconify/vue");
const bom = require("../../utils/bom.js");
const util = require("../../utils/util.js");
const _hoisted_1 = ["id"];
const _hoisted_2 = { class: "my-webrtcPlayer__error" };
const _hoisted_3 = {
key: 0,
class: "my-webrtcPlayer__fullscreen"
};
const __default__ = vue.defineComponent({
name: "WebRtcPlayer"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
src: { default: "" },
prefix: { default: "" },
id: {},
fullscreen: { type: Boolean, default: true },
target: {}
},
setup(__props) {
const win = window || {};
const JSWebrtc = win.JSWebrtc;
const webrtcPlayer = vue.ref();
const props = __props;
const isFullScreen = vue.ref(false);
const rtcId = vue.computed(() => props.id ?? util.uid());
const error = vue.ref();
let player = null;
function getTarget() {
let target;
switch (typeof props.target) {
case "string":
target = props.target === "parent" ? webrtcPlayer.value.parentNode : document.querySelector(props.target);
break;
case "function":
target = props.target();
break;
default:
target = props.target;
break;
}
return target || document.body;
}
function fullScreen() {
const el = getTarget();
bom.fullScreen(el);
isFullScreen.value = true;
}
function exitFullScreen() {
bom.exitFullScreen();
isFullScreen.value = false;
}
const loading = vue.ref(true);
function initVideo(url) {
if (player) {
player.destroy();
player = null;
}
const videoDom = document.getElementById(rtcId.value);
if (videoDom)
videoDom.controls = false;
loading.value = true;
player = new JSWebrtc.Player(url, {
video: videoDom,
autoplay: true,
onPlay: (obj) => {
loading.value = false;
error.value = "";
videoDom.addEventListener("canplay", (e) => {
loading.value = false;
videoDom.play();
});
},
onError: (err) => {
loading.value = false;
error.value = err;
}
});
}
vue.onMounted(() => {
try {
initVideo(`${props.prefix}${props.src}`);
} catch (error2) {
console.error(error2);
}
isFullScreen.value = props.fullscreen ? bom.isFullScreen() : false;
});
vue.onBeforeUnmount(() => {
if (player) {
player.destroy();
player = null;
}
});
return (_ctx, _cache) => {
const _directive_loading = vue.resolveDirective("loading");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: "my-webrtcPlayer",
ref_key: "webrtcPlayer",
ref: webrtcPlayer
}, [
vue.createElementVNode("video", {
id: rtcId.value,
ref: "jswebrtc",
style: { "height": "100%", "width": "100%", "object-fit": "fill" }
}, null, 8, _hoisted_1),
vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(error.value), 1),
_ctx.fullscreen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
isFullScreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
key: 0,
icon: "ion:power",
title: "取消全屏",
onClick: exitFullScreen
})) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
key: 1,
icon: "icon-park-outline:full-screen",
title: "全屏",
onClick: fullScreen
}))
])) : vue.createCommentVNode("", true)
])), [
[_directive_loading, loading.value]
]);
};
}
});
exports.default = _sfc_main;