@zhsz/cool-design-dv
Version:
134 lines (133 loc) • 4.07 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onBeforeUnmount, resolveDirective, withDirectives, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref, createCommentVNode } from "vue";
import "./jswebrtc.min.mjs";
import "./style.css";
import { Icon } from "@iconify/vue";
import { isFullScreen, fullScreen, exitFullScreen } from "../../utils/bom.mjs";
import { uid } from "../../utils/util.mjs";
const _hoisted_1 = ["id"];
const _hoisted_2 = { class: "my-webrtcPlayer__error" };
const _hoisted_3 = {
key: 0,
class: "my-webrtcPlayer__fullscreen"
};
const __default__ = defineComponent({
name: "WebRtcPlayer"
});
const _sfc_main = /* @__PURE__ */ 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 = ref();
const props = __props;
const isFullScreen$1 = ref(false);
const rtcId = computed(() => props.id ?? uid());
const error = 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$1() {
const el = getTarget();
fullScreen(el);
isFullScreen$1.value = true;
}
function exitFullScreen$1() {
exitFullScreen();
isFullScreen$1.value = false;
}
const loading = 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;
}
});
}
onMounted(() => {
try {
initVideo(`${props.prefix}${props.src}`);
} catch (error2) {
console.error(error2);
}
isFullScreen$1.value = props.fullscreen ? isFullScreen() : false;
});
onBeforeUnmount(() => {
if (player) {
player.destroy();
player = null;
}
});
return (_ctx, _cache) => {
const _directive_loading = resolveDirective("loading");
return withDirectives((openBlock(), createElementBlock("div", {
class: "my-webrtcPlayer",
ref_key: "webrtcPlayer",
ref: webrtcPlayer
}, [
createElementVNode("video", {
id: rtcId.value,
ref: "jswebrtc",
style: { "height": "100%", "width": "100%", "object-fit": "fill" }
}, null, 8, _hoisted_1),
createElementVNode("div", _hoisted_2, toDisplayString(error.value), 1),
_ctx.fullscreen ? (openBlock(), createElementBlock("div", _hoisted_3, [
isFullScreen$1.value ? (openBlock(), createBlock(unref(Icon), {
key: 0,
icon: "ion:power",
title: "取消全屏",
onClick: exitFullScreen$1
})) : (openBlock(), createBlock(unref(Icon), {
key: 1,
icon: "icon-park-outline:full-screen",
title: "全屏",
onClick: fullScreen$1
}))
])) : createCommentVNode("", true)
])), [
[_directive_loading, loading.value]
]);
};
}
});
export {
_sfc_main as default
};