@metagl/streaming-client
v0.0.5
Published
Geovis Earth Streaming Client
Readme
@metagl/streaming-client
一、概述
- 基于webrtc的流渲染客户端js插件
二、如何使用
（1）准备工作：
- 当前所有接口入参，都基于JSON格式传输
- 阅读协议描述文件protocol.json，编写相应的接口参数，json描述位于protocol文件夹内，内容如下：
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "孪生平台事件传输标准",
"description": "用于与孪生平台流渲染通信的标准化事件格式",
"type": "object",
"properties": {
"protocol": {
"type": "string",
"description": "协议名称和版本",
"enum": ["StreamingEventTransport/1.0"],
"default": "StreamingEventTransport/1.0"
},
"event": {
"type": "string",
"description": "事件名称/类型",
"examples": ["setCamera", "addMarker", "removeObject"]
},
"timestamp": {
"type": "number",
"description": "事件发生的时间戳(毫秒)"
},
"payload": {
"type": "object",
"description": "事件具体内容，根据不同事件类型结构不同"
}
},
"required": ["protocol", "event", "payload"]
}（2）HTML 使用方式：
1、将下载的包中的 metastreaming.js 文件copy到工程相对目录下
2、在html页面中，用标签引入
<script src="./webstreaming.js"></script>3、获取全局对象，默认对象挂载到了window上
- 创建1个id为 'player'的div，并传入setup方法中
- 将流渲染服务地址，传入setup方法中
<body>
<div id="player" ref="player" />
<script>
function startup() {
var metaClientStreaming = window.GVOL_WST;
if (metaClientStreaming) {
let streaming_url = "http://127.0.0.1:8080"; // 替换为您的流渲染服务器地址
let streaming_sdkKey = ""; // 替换为您的SDK key
let streaming_appliId = ""; // 替换为您的应用ID
let streaming_authCode = "ROOM001"; // 替换为您的房间号（填写任意字符即可）
let streaming_userType = 1; // 0: 观察者, 1: 主控
let streaming_playerMode = 1; // 0：普通模式, 1：互动模式（一人操作多人观看），2: 多人协同（键盘鼠标放开，需要应用配合）
metaClientStreaming.setup(
"player",
streaming_url,
{
sdkKey: streaming_sdkKey,
appliId: streaming_appliId,
userType: streaming_userType,
playerMode: streaming_playerMode,
authCode: streaming_authCode,
onMessage: onMessage,
}).then((res) => {
if (res.data && res.data.status) {
if (res.data.status === "success") {
} else {
//初始化失败
alert(res.data.message);
console.log(res.data.message);
}
}
});
}
}
startup();
</script>
</body>- 发送文本消息
function sendText() {
var metaClientStreaming = window.GVOL_WST;
if (metaClientStreaming) {
var input = document.getElementById("input");
metaClientStreaming.sendText(input.value);
}
}
- 发送二进制消息
function sendBinary() {
var metaClientStreaming = window.GVOL_WST;
if (metaClientStreaming) {
metaClientStreaming.sendBinary(new Uint8Array([0x50, 0x58, 0x59, 0xf0]));
}
}
- 接收消息处理
function onMessage(type, data) {
var div_receive = document.getElementById("receive");
if (div_receive) {
div_receive.textContent = data;
}
}
（3）Vue 使用方式：
1、通过 npm 安装包
npm i @metagl/streaming-client2、创建1个id为 'player'的div标签
<template>
<div id="player" ref="player"/>
</template>3、引入metastreaming，并创建对象
- 将'player'标签，传入setup方法中
- 将流渲染服务地址，传入setup方法中
<script setup>
import { ref, onMounted } from "vue";
import { webstreaming } from "@metagl/streaming-client";
const player = ref(null);
onMounted(() => {
//等待dom渲染完成后，获取dom中的player组件
if (webstreaming) {
let streaming_url = "http://127.0.0.1:8080"; // 替换为您的流渲染服务器地址
let streaming_sdkKey = ""; // 替换为您的SDK key
let streaming_appliId = ""; // 替换为您的应用ID
let streaming_authCode = "ROOM001"; // 替换为您的房间号（填写任意字符即可）
let streaming_userType = 1; // 0: 观察者, 1: 主控
let streaming_playerMode = 1; // 0：普通模式, 1：互动模式（一人操作多人观看），2: 多人协同（键盘鼠标放开，需要应用配合）
webstreaming.setup(
"player",
streaming_url,
{
sdkKey: streaming_sdkKey,
appliId: streaming_appliId,
userType: streaming_userType,
playerMode: streaming_playerMode,
authCode: streaming_authCode,
onMessage: onMessage,
}).then((res) => {
if (res.data && res.data.status) {
if (res.data.status === "success") {
} else {
//初始化失败
alert(res.data.message);
console.log(res.data.message);
}
}
});
}
});
- 发送文本消息
const sendText = () => {
if (webstreaming) {
webstreaming.sendText(inputText.value);
}
};
- 发送二进制消息
const sendBinary = () => {
if (webstreaming) {
webstreaming.sendBinary(new Uint8Array([0x50, 0x58, 0x59, 0xf0]));
}
};
- 接收消息处理
const onMessage = (type, data) => {
var div_receive = document.getElementById("receive");
if (div_receive) {
div_receive.textContent = data;
}
}
三、事件传递样例参考
（1）设置场景镜头：
- HTML 样例：
const sendCamera = {
"protocol": "StreamingEventTransport/1.0",
"cmdType": 1,
"eventName": "setCamera",
"timestamp": 1722412972000,
"description": "切换至主入口鸟瞰镜头",
"payload": {
"cameraIndex": 2,
"duration": 1.5
}
};
function sendText() {
var metaClientStreaming = window.GVOL_WST;
if (metaClientStreaming) {
metaClientStreaming.sendText(JSON.stringify(sendCamera));
}
}