cione-comp-lib/lib/packages/co-rtc/component/video_view.js

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue"),t=require("../../../node_modules/qrcode.vue/dist/qrcode.vue.esm.js"),o=require("../../../_virtual/plugin-vue_export-helper.js");const n=e.defineComponent({name:"video-view",props:{connectd:{type:Boolean,default:!1},mediaStream:{type:MediaStream,default:null},userId:{type:Number,default:0},size:{type:String,default:"100px"},fontStyle:{type:Object,default:{fontSize:20}}},components:{QrcodeVue:t.default},setup(t){const o=e.ref(),n=e.computed((()=>({"font-size":`${t.fontStyle.fontSize}px`})));return e.onMounted((function(){o.value.onloadedmetadata=()=>{}})),e.onUnmounted((function(){const e=o.value;e.onloadedmetadata=null,e.pause()})),{...e.toRefs(t),video:o,fontStyle_c:n}}}),l={class:"rtc-video-container"},r=["srcObject"];var a=o.default(n,[["render",function(t,o,n,a,d,i){const u=e.resolveComponent("qrcode-vue");return e.openBlock(),e.createElementBlock("div",l,[e.createElementVNode("video",{ref:"video",autoplay:"",muted:"",playsinline:"true","webkit-playsinline":"true","x5-playsinline":"true",tabindex:"2",mediatype:"video",srcObject:t.mediaStream},null,8,r),t.connectd?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:"qrcode-container",style:e.normalizeStyle({"--size":t.size})},[e.createVNode(u,{style:{width:"80%",height:"80%"},size:1080,value:t.userId.toString(),margin:2,level:"H",background:"#fff",foreground:"#000"},null,8,["value"]),e.createElementVNode("span",{class:"video-text",style:e.normalizeStyle({...t.fontStyle_c})},e.toDisplayString(t.userId),5)],4))])}]]);exports.default=a;