Hrtc-plugins NPM

hrtc-plugins

组件下载

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);
  }
}