npm install hrtc-plugins
#局部引用方法 按需使用
<!-- 全景播放器 -->
<panorama class="hrtcPanorama" :hrtcItem="hrtcItem" />
import { panorama } from "hrtc-plugins";
// hrtcItem url:webrtc直播链接
const hrtcItem = ref({ url: props.item.url.url });
.hrtcPanorama {
width: 100%;
height: 100%;
position: relative;
::v-deep(aside[name="playBtn"]) {
position: fixed;
top: calc(50% - 64px);
left: calc(50% - 186px);
}
::v-deep(aside[name="enterVRBtn"]) {
width: 80px;
height: 80px;
background-repeat: no-repeat;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
}
}
属性 | 类型 | 默认值 |
---|---|---|
hrtcItem | Object | {url:''} |