cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
79 lines (78 loc) • 2.62 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onUnmounted, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, createVNode, toDisplayString, createCommentVNode } from "vue";
import QrcodeVue from "../../../node_modules/qrcode.vue/dist/qrcode.vue.esm.mjs";
import _export_sfc from "../../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
name: "video-view",
props: {
connectd: { type: Boolean, default: false },
mediaStream: { type: MediaStream, default: null },
userId: { type: Number, default: 0 },
size: { type: String, default: "100px" },
fontStyle: { type: Object, default: { fontSize: 20 } }
},
components: { QrcodeVue },
setup(props) {
const video = ref();
const fontStyle_c = computed(() => {
return {
"font-size": `${props.fontStyle.fontSize}px`
};
});
function init() {
const videoEl = video.value;
videoEl.onloadedmetadata = () => {
};
}
function clear() {
const videoEl = video.value;
videoEl.onloadedmetadata = null;
videoEl.pause();
}
onMounted(init);
onUnmounted(clear);
return {
...toRefs(props),
video,
fontStyle_c
};
}
});
const _hoisted_1 = { class: "rtc-video-container" };
const _hoisted_2 = ["srcObject"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_qrcode_vue = resolveComponent("qrcode-vue");
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("video", {
ref: "video",
autoplay: "",
muted: "",
playsinline: "true",
"webkit-playsinline": "true",
"x5-playsinline": "true",
tabindex: "2",
mediatype: "video",
srcObject: _ctx.mediaStream
}, null, 8, _hoisted_2),
!_ctx.connectd ? (openBlock(), createElementBlock("div", {
key: 0,
class: "qrcode-container",
style: normalizeStyle({ "--size": _ctx.size })
}, [
createVNode(_component_qrcode_vue, {
style: { "width": "80%", "height": "80%" },
size: 1080,
value: _ctx.userId.toString(),
margin: 2,
level: "H",
background: "#fff",
foreground: "#000"
}, null, 8, ["value"]),
createElementVNode("span", {
class: "video-text",
style: normalizeStyle({ ..._ctx.fontStyle_c })
}, toDisplayString(_ctx.userId), 5)
], 4)) : createCommentVNode("", true)
]);
}
var VideoView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { VideoView as default };