项目

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

 

# html # 前端 # 3dsmax
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：3 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区