@gvol-org/metastreaming NPM

Metaverse Client Streaming

概述

基于webrtc的流渲染客户端js插件
需要配合星图地球流渲染服务使用

安装

npm i @gvol-org/metastreaming

如何使用

HTML 使用方式：

1、将下载的包中的 metastreaming.js 文件copy到工程相对目录下

2、在html页面中，用标签引入

<script src="./metastreaming.js"></script>

3、获取全局对象，默认对象挂载到了window上

创建1个id为 'player'的div，并传入setup方法中
将流渲染服务地址，传入setup方法中

<body>
  <div id="player" ref="player" />
  <script>
    function startup() {

      var metaClientStreaming = window.GVOL_MST;
      // or var metaClientStreaming = window.metastreaming;      

      if (metaClientStreaming) {
        metaClientStreaming.setup("player", "http://127.0.0.1").then((res) => {
          if (res.data && res.data.status) {
            if (res.data.status === "success") {
              //初始化成功
              metaClientStreaming.play();
            } else {
              //初始化失败
              alert(res.data.message);
              console.log(res.data.message);
            }
          }
        });
      }
    }

    startup();

  </script>
</body>

Vue 使用方式：

1、通过 npm 安装包

npm i @gvol-org/metastreaming

2、创建1个id为 'player'的div标签

<template>
  <div id="player" ref="player"/>
</template>

3、引入metastreaming，并创建对象

将'player'标签，传入setup方法中
将流渲染服务地址，传入setup方法中

<script setup>
import { ref, onMounted } from "vue";
import { metastreaming }  from "@gvol-org/metastreaming";

const player = ref(null);

onMounted(() => {
  //等待dom渲染完成后，获取dom中的player组件
  if (metastreaming) {
    metastreaming.setup("player", "http://127.0.0.1").then((res) => {
      if (res.data && res.data.status) {
        if (res.data.status === "success") {
          //初始化成功
          metastreaming.play();
        } else {
          //初始化失败
          alert(res.data.message);
          console.log(res.data.message);
        }
      }
    });
  }
});