feat: 飞控中心iframe集成

README.md

@@ -54,6 +54,8 @@ Vue.use(MMCSTL);
 * 修正iconfont.css样式冲突
 ## v1.2.3
 * 修正机库定位图标样式冲突
+## v1.2.4
+* iframe集成
 
 ## 项目结构
 ```

iframe/.gitignore

+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

iframe/README.md

+# iframe1
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

iframe/babel.config.js

+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

iframe/jsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

iframe/package.json

+{
+  "name": "iframe1",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "js-base64": "^3.7.7",
+    "vue": "^2.6.14"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "node-polyfill-webpack-plugin": "^3.0.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

iframe/public/QingLiu/audio_render.js

+class AudioRender extends AudioWorkletProcessor {
+	constructor(context, param) {
+		super(context, param);
+		this.queue = [];
+		this.queue_1st_offset = 0;
+		this.queue_length = 0;
+		this.port.onmessage = this.message_handler.bind(this);
+		this.req_id = 0;
+	}
+	message_handler(e) {
+		// console.log("enter message_handler");
+		switch (e.data["user_cmd"]) {
+			case "audio_process_resp":
+				var waves = e.data["waves"];
+				this.queue.push(waves);
+				// console.log(e.data["req_id"] + " resp " + this.queue_length + " => " + (this.queue_length + waves[0].length));
+				this.queue_length += waves[0].length;
+				// console.log("%cafter push: " + this.queue_length, "color:#0f0;");
+				break;
+			default:
+				console.log("unknown command " + e.data["user_cmd"]);
+				break;
+		}
+	}
+	noise(output, channel="both") {
+		var start = 0;
+		var end = output.length;
+		if (channel == "left") {
+			end = 1;
+		} else if (channel == "right") {
+			start = 1;
+		}
+		for (var i = start; i < end; i++) {
+			var out_ch = output[i];
+			for (var j = 0; j < out_ch.length; j++) {
+				out_ch[j] = Math.random() * 0.2 - 0.1;
+			}
+		}
+	}
+	process(inputs, outputs, parameters) {
+		// console.log(inputs, outputs, parameters);
+		var output = outputs[0];
+		var channels_cnt = output.length; 
+		var need_update = output[0].length;
+		// console.log(this.queue_length, need_update);
+
+		if (this.queue_length < 1024) {
+			this.port.postMessage({user_cmd:"audio_process",req_id:this.req_id,length:need_update});
+		}
+		// console.log(this.req_id + " req");
+		// this.req_id++;
+		if (this.queue_length < need_update) {
+			// console.log("%cfill zero", "color:#f00;");
+			for (var i = 0; i < output.length; i++) {
+				var out_ch = output[i];
+				out_ch.fill(0); // keep mute
+			}
+			// this.noise(output, "right");
+			// this.noise(output);
+			return true;
+		}
+		while (true) {
+			if (this.queue.length == 0) {
+				console.error("inner error, no more data");
+				break;
+			}
+			var in_data = this.queue[0];
+			var in_chn_num = in_data.length;
+			var in_len = in_data[0].length;
+			if (in_len - this.queue_1st_offset <= need_update) {
+				for (var i = 0; i < channels_cnt; i++) {
+					var in_chn = in_data[i < in_chn_num ? i : 0];
+					var out_ch = output[i];
+					out_ch.set(in_chn.slice(this.queue_1st_offset), out_ch.length - need_update);
+				}
+				need_update -= in_len - this.queue_1st_offset;
+				this.queue_1st_offset = 0;
+				// console.log("shift");
+				this.queue.shift();
+			} else {
+				for (var i = 0; i < channels_cnt; i++) {
+					var in_chn = in_data[i < in_chn_num ? i : 0];
+					var out_ch = output[i];
+					out_ch.set(in_chn.slice(this.queue_1st_offset, this.queue_1st_offset + need_update), out_ch.length - need_update);
+				}
+				this.queue_1st_offset += need_update;
+				need_update = 0;
+			}
+			// console.log("need_update: " + need_update);
+			if (need_update <= 0) {
+				this.queue_length -= output[0].length;
+				// console.log("after used: " + this.queue_length);
+				if (need_update != 0) {
+					console.error("inner error, need_update != 0");
+				}
+				break;
+			}
+		}
+		return true;
+	}
+}
+
+registerProcessor('audio_render', AudioRender);
+

iframe/public/QingLiu/kbt_api.js

+var ktb_isLoad = false;
+var ktb_isFirst = true; //是否第一次, 由于同时多个清流实例调用初始化方法会导致无法正常返回，需要做间隔
+var initQueue = [];
+function kbt_sdk_load() {
+  return new Promise(function (resolve, reject) {
+    if (ktb_isLoad) {
+      return resolve();
+    }
+    let timeout = 0;
+    if (!ktb_isFirst) {
+      timeout = 5000;
+    } else {
+      ktb_isFirst = false;
+    }
+
+    setTimeout(() => {
+      console.log("qingliu ktb_isFirst", Date.now(), ktb_isFirst);
+      if (ktb_isLoad) {
+        return resolve();
+      }
+
+      PIMediaPlayer_init(function (e) {
+        // console.log('PIMediaPlayer_init', e)
+        if (PIMediaPlayer_msg_handler(e) == 1) {
+          return;
+        }
+
+        switch (e.data["user_cmd"]) {
+          case "player_ready":
+            ktb_isLoad = true;
+            resolve();
+            break;
+
+          case "qoeinfo":
+            /* console.log(
+              "qoeinfo",
+              e.data["media_name"],
+              e.data["stream_name"],
+              JSON.parse(e.data["qoeinfo"])
+            ); */
+            if (window.$Bus) {
+              window.$Bus.$emit("qoeinfo", {
+                media_name: e.data["media_name"],
+                stream_name: e.data["stream_name"],
+                data: JSON.parse(e.data["qoeinfo"]),
+              });
+            }
+            break;
+          case "raw_msg":
+            if (window.$Bus) {
+              if(e.data["what"] == 903){
+                window.$Bus.$emit("raw_msg", {
+                  media_name: e.data["media_name"],
+                  stream_name: e.data["stream_name"],
+                  data: e.data["arg1"],
+                });
+              }
+            }
+            break;
+        }
+      }, 48);
+    }, timeout);
+  });
+}
+
+var kbt_instances = [];
+function kbt_player_create(name, url, width, height, parentEle) {
+  console.log("kbt_player_create", name);
+  kbt_instances.push(name);
+  let canvas_obj = document.createElement("canvas");
+  canvas_obj.setAttribute("id", "sdk_canvas_" + name);
+  canvas_obj.setAttribute("width", width);
+  canvas_obj.setAttribute("height", height);
+  parentEle.appendChild(canvas_obj);
+  let offscreen = canvas_obj.transferControlToOffscreen();
+  let layer_name = "sdk_layer_" + name;
+  canvas_list = [{ name: layer_name, offscreen: offscreen }];
+  canvas_obj.addEventListener("dblclick", function () {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      let canvas_obj = document.getElementById("sdk_canvas_" + name);
+      canvas_obj.requestFullscreen();
+      /* g_player_process.postMessage({
+        user_cmd: "fullscreen",
+        layer_name: layer_name,
+        width: window.screen.width,
+        height: window.screen.height,
+      }); */
+    }
+  });
+  let dis_name = "sdk_dis_" + name;
+  let layerinfo = [
+    {
+      name: layer_name,
+      width: width,
+      height: height,
+      districts: [
+        {
+          name: "sdk_dis_" + name,
+          position_x: "0px",
+          position_y: "0px",
+          width: width,
+          height: height,
+        },
+      ],
+    },
+  ];
+  PIMediaPlayer_add_canvas(canvas_list, layerinfo);
+  let bindinfo = {};
+  bindinfo[name] = { video0: [{ layer: layer_name, district: dis_name }] };
+  PIMediaPlayer_update_binds(bindinfo);
+  PIMediaPlayer_create(name, url);
+}
+function kbt_player_destroy(name) {
+  console.log("kbt_player_destroy", name);
+  kbt_instances = kbt_instances.filter((item) => {
+    return item != name;
+  });
+  console.log("kbt_instances", kbt_instances);
+  PIMediaPlayer_destroy(name);
+  PIMediaPlayer_del_canvas(["sdk_canvas_" + name]);
+  let canvas_obj = document.getElementById("sdk_canvas_" + name);
+  if (canvas_obj) {
+    canvas_obj.remove();
+  }
+}

iframe/public/QingLiu/libplayer.data

+[SIJK]
+AUDIO_MODE = 1
+HWACCEL = 0
+DISPLAY_MODE = 1
+
+[GLOBAL]
+PSL_LEVEL = 2
+PSL_FLUSH = 1
+PTCP_LEVEL = 0
+PTCP_FLUSH = 1
+PLAYER_LEVEL = 2
+PLAYER_FLUSH = 1
+

iframe/public/QingLiu/libplayer.worker.js

+/**
+ * @license
+ * Copyright 2015 The Emscripten Authors
+ * SPDX-License-Identifier: MIT
+ */
+
+// Pthread Web Worker startup routine:
+// This is the entry point file that is loaded first by each Web Worker
+// that executes pthreads on the Emscripten application.
+
+'use strict';
+
+var Module = {};
+
+// Node.js support
+var ENVIRONMENT_IS_NODE = typeof process == 'object' && typeof process.versions == 'object' && typeof process.versions.node == 'string';
+if (ENVIRONMENT_IS_NODE) {
+  // Create as web-worker-like an environment as we can.
+
+  var nodeWorkerThreads = require('worker_threads');
+
+  var parentPort = nodeWorkerThreads.parentPort;
+
+  parentPort.on('message', function(data) {
+    onmessage({ data: data });
+  });
+
+  var fs = require('fs');
+
+  Object.assign(global, {
+    self: global,
+    require: require,
+    Module: Module,
+    location: {
+      href: __filename
+    },
+    Worker: nodeWorkerThreads.Worker,
+    importScripts: function(f) {
+      (0, eval)(fs.readFileSync(f, 'utf8'));
+    },
+    postMessage: function(msg) {
+      parentPort.postMessage(msg);
+    },
+    performance: global.performance || {
+      now: function() {
+        return Date.now();
+      }
+    },
+  });
+}
+
+// Thread-local:
+
+function assert(condition, text) {
+  if (!condition) abort('Assertion failed: ' + text);
+}
+
+function threadPrintErr() {
+  var text = Array.prototype.slice.call(arguments).join(' ');
+  // See https://github.com/emscripten-core/emscripten/issues/14804
+  if (ENVIRONMENT_IS_NODE) {
+    fs.writeSync(2, text + '\n');
+    return;
+  }
+  console.error(text);
+}
+function threadAlert() {
+  var text = Array.prototype.slice.call(arguments).join(' ');
+  postMessage({cmd: 'alert', text: text, threadId: Module['_pthread_self']()});
+}
+// We don't need out() for now, but may need to add it if we want to use it
+// here. Or, if this code all moves into the main JS, that problem will go
+// away. (For now, adding it here increases code size for no benefit.)
+var out = () => { throw 'out() is not defined in worker.js.'; }
+var err = threadPrintErr;
+self.alert = threadAlert;
+
+Module['instantiateWasm'] = (info, receiveInstance) => {
+  // Instantiate from the module posted from the main thread.
+  // We can just use sync instantiation in the worker.
+  var instance = new WebAssembly.Instance(Module['wasmModule'], info);
+  // TODO: Due to Closure regression https://github.com/google/closure-compiler/issues/3193,
+  // the above line no longer optimizes out down to the following line.
+  // When the regression is fixed, we can remove this if/else.
+  receiveInstance(instance);
+  // We don't need the module anymore; new threads will be spawned from the main thread.
+  Module['wasmModule'] = null;
+  return instance.exports;
+}
+
+self.onmessage = (e) => {
+  try {
+    if (e.data.cmd === 'load') { // Preload command that is called once per worker to parse and load the Emscripten code.
+
+      // Module and memory were sent from main thread
+      Module['wasmModule'] = e.data.wasmModule;
+
+      Module['wasmMemory'] = e.data.wasmMemory;
+
+      Module['buffer'] = Module['wasmMemory'].buffer;
+
+      Module['ENVIRONMENT_IS_PTHREAD'] = true;
+
+      if (typeof e.data.urlOrBlob == 'string') {
+        importScripts(e.data.urlOrBlob);
+      } else {
+        var objectUrl = URL.createObjectURL(e.data.urlOrBlob);
+        importScripts(objectUrl);
+        URL.revokeObjectURL(objectUrl);
+      }
+    } else if (e.data.cmd === 'run') {
+      // This worker was idle, and now should start executing its pthread entry
+      // point.
+      // performance.now() is specced to return a wallclock time in msecs since
+      // that Web Worker/main thread launched. However for pthreads this can
+      // cause subtle problems in emscripten_get_now() as this essentially
+      // would measure time from pthread_create(), meaning that the clocks
+      // between each threads would be wildly out of sync. Therefore sync all
+      // pthreads to the clock on the main browser thread, so that different
+      // threads see a somewhat coherent clock across each of them
+      // (+/- 0.1msecs in testing).
+      Module['__performance_now_clock_drift'] = performance.now() - e.data.time;
+
+      // Pass the thread address inside the asm.js scope to store it for fast access that avoids the need for a FFI out.
+      Module['__emscripten_thread_init'](e.data.threadInfoStruct, /*isMainBrowserThread=*/0, /*isMainRuntimeThread=*/0, /*canBlock=*/1);
+
+      assert(e.data.threadInfoStruct);
+      // Also call inside JS module to set up the stack frame for this pthread in JS module scope
+      Module['establishStackSpace']();
+      Module['PThread'].receiveObjectTransfer(e.data);
+      Module['PThread'].threadInit();
+
+      try {
+        // pthread entry points are always of signature 'void *ThreadMain(void *arg)'
+        // Native codebases sometimes spawn threads with other thread entry point signatures,
+        // such as void ThreadMain(void *arg), void *ThreadMain(), or void ThreadMain().
+        // That is not acceptable per C/C++ specification, but x86 compiler ABI extensions
+        // enable that to work. If you find the following line to crash, either change the signature
+        // to "proper" void *ThreadMain(void *arg) form, or try linking with the Emscripten linker
+        // flag -s EMULATE_FUNCTION_POINTER_CASTS=1 to add in emulation for this x86 ABI extension.
+        var result = Module['invokeEntryPoint'](e.data.start_routine, e.data.arg);
+
+        Module['checkStackCookie']();
+        if (Module['keepRuntimeAlive']()) {
+          Module['PThread'].setExitStatus(result);
+        } else {
+          Module['__emscripten_thread_exit'](result);
+        }
+      } catch(ex) {
+        if (ex != 'unwind') {
+          // ExitStatus not present in MINIMAL_RUNTIME
+          if (ex instanceof Module['ExitStatus']) {
+            if (Module['keepRuntimeAlive']()) {
+              err('Pthread 0x' + Module['_pthread_self']().toString(16) + ' called exit(), staying alive due to noExitRuntime.');
+            } else {
+              err('Pthread 0x' + Module['_pthread_self']().toString(16) + ' called exit(), calling _emscripten_thread_exit.');
+              Module['__emscripten_thread_exit'](ex.status);
+            }
+          }
+          else
+          {
+            // The pthread "crashed".  Do not call `_emscripten_thread_exit` (which
+            // would make this thread joinable.  Instead, re-throw the exception
+            // and let the top level handler propagate it back to the main thread.
+            throw ex;
+          }
+        } else {
+          // else e == 'unwind', and we should fall through here and keep the pthread alive for asynchronous events.
+          err('Pthread 0x' + Module['_pthread_self']().toString(16) + ' completed its main entry point with an `unwind`, keeping the worker alive for asynchronous operation.');
+        }
+      }
+    } else if (e.data.cmd === 'cancel') { // Main thread is asking for a pthread_cancel() on this thread.
+      if (Module['_pthread_self']()) {
+        Module['__emscripten_thread_exit'](-1/*PTHREAD_CANCELED*/);
+      }
+    } else if (e.data.target === 'setimmediate') {
+      // no-op
+    } else if (e.data.cmd === 'processThreadQueue') {
+      if (Module['_pthread_self']()) { // If this thread is actually running?
+        Module['_emscripten_current_thread_process_queued_calls']();
+      }
+    } else if (e.data.cmd === 'processProxyingQueue') {
+      if (Module['_pthread_self']()) { // If this thread is actually running?
+        Module['_emscripten_proxy_execute_queue'](e.data.queue);
+      }
+    } else {
+      err('worker.js received unknown command ' + e.data.cmd);
+      err(e.data);
+    }
+  } catch(ex) {
+    err('worker.js onmessage() captured an uncaught exception: ' + ex);
+    if (ex && ex.stack) err(ex.stack);
+    if (Module['__emscripten_thread_crashed']) {
+      Module['__emscripten_thread_crashed']();
+    }
+    throw ex;
+  }
+};
+
+

iframe/public/cesium/Assets/Textures/NaturalEarthII/tilemapresource.xml

+<?xml version="1.0" encoding="utf-8"?>
+    <TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
+      <Title>NE2_HR_LC_SR_W_DR_recolored.tif</Title>
+      <Abstract></Abstract>
+      <SRS>EPSG:4326</SRS>
+      <BoundingBox miny="-90.00000000000000" minx="-180.00000000000000" maxy="90.00000000000000" maxx="180.00000000000000"/>
+      <Origin y="-90.00000000000000" x="-180.00000000000000"/>
+      <TileFormat width="256" height="256" mime-type="image/jpg" extension="jpg"/>
+      <TileSets profile="geodetic">
+        <TileSet href="0" units-per-pixel="0.70312500000000" order="0"/>
+        <TileSet href="1" units-per-pixel="0.35156250000000" order="1"/>
+        <TileSet href="2" units-per-pixel="0.17578125000000" order="2"/>
+      </TileSets>
+    </TileMap>