飞渡-Vue2-前端开发

家道前落的少爷

于 2024-03-14 10:53:22 发布

阅读量379

点赞数 4

分类专栏：飞渡使用心得文章标签： html 前端 3dsmax

本文链接：https://blog.csdn.net/m0_51385633/article/details/136700086

版权

飞渡使用心得专栏收录该内容

3 篇文章 1 订阅

订阅专栏

项目

1 项目构建

1.1新建项目

新建一个vue2项目，很简单吧，这里不

赘述。（使用vue-cli，可视化又简单）。

1.2修改配置

修改public文件夹下的index.html，并在public文件夹下添加jquery.js和飞渡的ac.min.js。

代码如下，这样的作用就是不用额外的修改配置，就可以使初始化的api全局使用，原理未知

<!DOCTYPE html>
<html lang="" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="/ac.min.js"></script>
    <script src="/jquery-3.5.0.min.js"></script>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
</body>
</html>

~~vue的其他配置这里也不过多描述，本人也不是专业开发。哈哈哈哈哈哈哈哈哈哈~~

2 视频流引用

2.1 引用视频流

按我的理解就是把视频流的数据嵌入到一个标签中。

根据飞渡的官方文档介绍，在初始化api的方法中有个属性 domId （表示网页中显示视频流的dom的节点id），这个domId必须和标签的id对应才能将视频流嵌入到该标签中。标签样式自己根据需求写，可以固定大小，也可以自适应屏幕大小。
<div id="player" class="player"></div>

2.2 初始化api

host 根据Cloud中，你的配置（服务地址）来定。

apiOptions 要定义，但定义的方法，如 _onReady 可以为空方法。

ui 其中的属性有默认值，具体意义参考官方文档。

__g 初始化后就可以在该页面中，及其子组件中直接使用，不需要传递。

 initPlayer() {
      let host = 172.0.0.1:8080;
      let _onReady = () => {
        //初始化需要执行的api
      };
      let _onEvent = async (event) => {
        console.log(event)
        //何种事件的响应处理
      };
      let options = {
        //dom节点id
        domId: "player",
        apiOptions: {
          //方法内容可以为空，但好像需要定义
          onReady: _onReady,
          onEvent: _onEvent,
        },
        ui: {
          startupInfo: false,
          statusIndicator: false,
          statusButton: false,
          fullscreenButton: false,
          homeButton: false,
          taskListBar: 1
          debugEventsPanel: false,
          mainUI: false,
          campass: false,
        },
        keyEventTarget: 'video',
      };
      __g = new DigitalTwinPlayer(host, options).getAPI();
    },

3 页面实战

3.1 钩子

在mounted中执行上面的方法，在页面加载的时候就初始化api。

在关闭页面的时候关闭api的渲染，防止内存泄露和资源占用。
  mounted() {
    this.initPlayer();
  },
  destroyed() {
    __g.destroy();
  },

3.2 方法

简单调用几个api，组合成一个下雨的效果。

<div>
    <el-button @click="rain">龙王下个雨</el-button>
</div>

rain() {
      this.setAmbientLight(3)
      this.setCloud(1, 0.1, 15)
      __g.weather.setSunSize(0)
      __g.weather.setMoonSize(0)
      let strength = 0.7;
      let speed = 0.5;
      let raindropSize = 0.7;
      __g.weather.setRainParam(strength, speed, raindropSize)
    },

4 总结

其实调用api挺简单的，先看开发文档，然后看有哪些参数，参数有什么意义，是什么数据类型，有没有取值限制，再看方法需不需要异步调用，或者有没有什么前置方法和后续方法的辅助，最后就是按需组合合理搭配完成需求。

家道前落的少爷

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
飞渡-Vue2-前端开发

其实调用api挺简单的，先看开发文档，然后看有哪些参数，参数有什么意义，是什么数据类型，有没有取值限制，再看方法需不需要异步调用，或者有没有什么前置方法和后续方法的辅助，最后就是按需组合合理搭配完成需求。
复制链接

扫一扫