平行云接入

平行云没有测试模型可供前端调用，也没有托管平台可供上传模型，只能自己搭服务器运行起来，再弄出服务器地址，授权码，appliid供前端调用

"larksr_websdk": "^3.3.105"

LARKSR_APPID: '1420707475446824960',
LARKSR_AUTHCODE: 'c1189c90511f4b0a95980a6f47db6fdd',
LARKSR_URL: 'http://10.161.105.26:8181',
页面上使用：
<LarksrCloudRendering ref="larksrCloudRef" :appId="appId" @ui-control="handleReceviceData" />
import LarksrCloudRendering from './components/LarksrCloudRendering.vue'
const appId = localConfig.LARKSR_APPID // 平行云appid
const handleReceviceData = (message: any) => {
  const msg = JSON.parse(message.data)
  if (msg.data === '孪生连接成功') return
}

组件：
<template>
  <div id="playerDiv" ref="appContainer">
    <!-- PxyCommonUI 组件容器 -->
    <div ref="uiContainerRef" style="position: absolute; z-index: 1000"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { useLarksrStore } from '@/store/modules/larksr'

// 定义 props
const props = defineProps({
  appId: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['connected', 'uiControl'])

const appContainer = ref(null)
const uiContainerRef = ref(null)
const store = useLarksrStore()

onMounted(async () => {
  await store.init(props.appId, appContainer.value)
})

defineExpose({
  closeLarksr: () => store.close(),
})
watch(
  () => store.connected,
  (val) => {
    if (val) {
      emit('connected', { status: val, larksr: store.larksr })
    }
  },
)
watch(
  () => store.uiControlMessage,
  (val) => {
    if (val) {
      console.log(val)
      emit('uiControl', val)
    }
  },
)
</script>
<style scoped lang="scss">
#playerDiv {
  width: 1920px;
  height: 1080px;
}
</style>

store:
// stores/larksr.ts
import { defineStore } from 'pinia'
import LarkSRSdk from 'larksr_websdk'
import localConfig from '@/localConfig'

export const useLarksrStore = defineStore('larksr', {
  state: () => ({
    larksr: null as any,
    connected: false,
    uiControlMessage: null as any | null,
  }),
  actions: {
    async init(appId: string, rootElement: HTMLElement) {
      if (this.larksr) return this.larksr

      this.larksr = new LarkSRSdk.LarkSR({
        rootElement,
        serverAddress: localConfig.LARKSR_URL,
        mobileForceLandscape: true,
        useSeparateMediaSharePeer: true,
      })

      try {
        await this.larksr.initSDKAuthCode(localConfig.LARKSR_AUTHCODE)
        await this.larksr.connect({ appliId: appId, preferDecoder: 'h264' })

        this.bindEvents()
      } catch (e: any) {
        console.error(e)
        alert(JSON.stringify(e))
      }

      return this.larksr
    },

    bindEvents() {
      if (!this.larksr) return
      const larksr = this.larksr

      larksr.on('connect', () => {
        this.connected = true
      })

      larksr.on('info', (e: any) => {
        console.log('LarkSRClientEvent info', e)
      })

      larksr.on('datachanneltext', (e: any) => {
        console.log('LarkSRClientEvent DATACHANNEL_TEXT', e)
        if (e) {
          this.uiControlMessage = {
            data: e.data,
            timestamp: Date.now(),
          }
        }
      })

      larksr.on('appresize', (e: any) => {
        console.log('LarkSRClientEvent resize', e)
        larksr?.setCloudAppSize(1920, 1080)
      })

      larksr.on('error', (e: any) => {
        console.error('LarkSRClientEvent error', e)
        alert(JSON.stringify(e.message))
      })

      larksr.on('resourcenotenough', (e: any) => {
        if (e.type === 0) {
          alert('当前系统繁忙，请稍后再试！')
        }
      })
    },

    close() {
      this.larksr?.close()
      this.larksr = null
      this.connected = false
    },
  },
})

 

LarkSRSdk:
import 'core-js/stable/symbol';
import { LarkSR, LarkEventType, LarkSRClientEvent, AppliParams, LoadAppliParamsFromUrl, AppliParamsUtils, LoadAppliParamsStartAppInfo, EventBase, API, Operation, Capabilities, ScaleMode, CloudLark, FullScreen, LockPointer, ILarkSRConfig, PlayerModeType, UserType, LarkSREvent, GESTURE_TYPE } from "./larksr";
declare const _default: {
LarkSR: typeof LarkSR;
API: typeof API;
AppliParams: typeof AppliParams;
LoadAppliParamsFromUrl: typeof LoadAppliParamsFromUrl;
AppliParamsUtils: typeof AppliParamsUtils;
LoadAppliParamsStartAppInfo: typeof LoadAppliParamsStartAppInfo;
EventBase: typeof EventBase;
ScaleMode: typeof ScaleMode;
Capabilities: typeof Capabilities;
CloudLark: typeof CloudLark;
FullScreen: typeof FullScreen;
LockPointer: typeof LockPointer;
Operation: typeof Operation;
LarkSRClientEvent: typeof LarkSRClientEvent;
LarkEventType: typeof LarkEventType;
GESTURE_TYPE: typeof GESTURE_TYPE;
KEYMAP: import("./operation/keymap").VritualKeyMapOptions;
};
export default _default;
export { ILarkSRConfig, PlayerModeType, UserType, LarkSREvent, };