@stampgis/webrtc 1.0.0

package/assets/core/playerControl.js

@@ -0,0 +1,561 @@
+/* eslint-disable no-undef */
+let initTimeout = null;
+let initialSettings = {
+  //ss: `ws://${streming_url}`,
+  // StreamerId: "DefaultStreamer", // 允许您选择要串流的主播。
+  AutoPlayVideo: true, // 当流准备就绪时，立即开始播放视频，而不是显示播放按钮。
+  AutoConnect: true, // 加载时浏览器将自动连接到流。避免必须单击才能开始
+  OfferToReceive: false, // 浏览器将启动 WebRTC 握手，而不是虚幻引擎应用程序。这是用户自定义前端的高级设置。主要是为了向后兼容 4.x 版本的引擎。
+  UseMic: false, // 将开始从麦克风接收音频输入并将其传输到虚幻引擎。
+  StartVideoMuted: true, // 流开始时音频静音。
+  HoveringMouse: true,
+  MatchViewportRes: true, // 调整虚幻引擎应用程序分辨率的大小以匹配浏览器的视频元素大小。
+  preferSFU: false, // 将尝试使用选择性转发单元 (SFU)（如果您正在运行）。
+  ControlsQuality: true, // 使像素流插件的编码器使用当前浏览器连接来确定可用带宽，从而确定流编码的质量。
+  ForceMonoAudio: false, // 强制浏览器在 SDP 中请求单声道音频。
+  ForceTURN: false, // 将尝试通过 TURN 服务器进行独占连接。如果没有活动的 TURN 服务器，则无法工作。
+  SuppressBrowserKeys: true, // 禁止或允许我们在 UE 中使用的某些键，例如 F5 以显示着色器复杂性而不是刷新页面。
+  TimeoutIfIdle: false, // 如果一段时间内没有检测到输入，则连接超时。
+  AFKTimeout: 180, // 允许您指定 AFK 超时时间。
+  MaxReconnectAttempts: 3, // 当流式传输器断开连接时应用程序将尝试重新连接的最大次数。
+  FakeMouseWithTouches: false,
+  MinQP: 0, // 编码器量化参数 (QP) 的下限。0 = 最佳质量，51 = 最差质量。
+  MaxQP: 51, // 编码器量化参数（QP）的上限。0 = 最佳质量，51 = 最差质量。
+  // PreferredCodec: "H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f", // 编解码器协商期间要使用的首选编解码器。
+  KeyboardInput: false, // 如果启用，捕获键盘事件并将其发送到虚幻引擎应用程序。
+  MouseInput: true, // 如果启用，捕获鼠标事件并将其发送到虚幻引擎应用程序。
+  TouchInput: true, // 如果启用，则会捕获触摸事件并将其发送到虚幻引擎应用程序。
+  GamepadInput: false, // 如果启用，则会捕获游戏手柄事件并将其发送到虚幻引擎应用程序。
+  XRControllerInput: false, // 如果启用，则会捕获 XR 控制器事件并将其发送到虚幻引擎应用程序。
+  WebRTCFPS: 60, // WebRTC 将尝试传输帧的最大 FPS。
+  WebRTCMaxBitrate: 100000, // WebRTC 应使用的最大比特率。
+  WebRTCMinBitrate: 100, // WebRTC 应使用的最低比特率。
+  StreamerAutoJoinInterval: 500, //单位毫秒，如果网络情况不太好该值可以适当放大
+};
+var StampAPI = {
+  LibAx: new StampPixelStreaming.StampCoreApi(),
+  isLoadingMap: false,
+  isClickToStart: false, //点击连接
+  showTips: true, //默认显示提示信息
+  ip: "",
+  port: "",
+  //地图对象
+  lib_ax: null, //地图对象
+
+  //双屏的第二个地图
+  lib_ax1: null,
+  //三屏的第三个地图
+  lib_ax2: null,
+  initEarth() {
+    this.LibAx = new StampPixelStreaming.StampCoreApi();
+    this.lib_ax = new StampPixelStreaming.lib_ax(StampAPI.LibAx);
+    this.lib_ax1 = new StampPixelStreaming.lib_ax(StampAPI.LibAx);
+    this.lib_ax2 = new StampPixelStreaming.lib_ax(StampAPI.LibAx);
+  },
+  initErrorDiv: function ({ earthDomElement, errorDomElement, iIndex }) {
+    StampAPI.isClickToStart = false;
+    errorDomElement &&
+      errorDomElement.addEventListener("click", function () {
+        if (StampAPI.isClickToStart) {
+          StampAPI.hiddenError(errorDomElement);
+          StampAPI.initVideoPlayer({
+            earthDomElement,
+            errorDomElement,
+            iIndex,
+          });
+        }
+      });
+  },
+  getStreamingUrl: function (ip, port) {
+    var streamingUrl = "";
+    if (window.location.protocol === "https:") {
+      // https网站 走代理
+      streamingUrl = `${window.location.origin
+        .replace("https://", "wss://")
+        .replace("http://", "ws://")}/stampwebsocket/?target=${ip}:${port}`;
+    } else {
+      // http网站
+      streamingUrl = `ws://${ip}:${port}`;
+    }
+    return streamingUrl;
+  },
+  /**
+   * 初始化
+   */
+  initVideoPlayer: ({
+    earthDomElement,
+    errorDomElement,
+    iIndex = 0,
+    showTips = true,
+  }) => {
+    var earth = null;
+    switch (iIndex) {
+      case 0:
+        earth = StampAPI.lib_ax;
+        break;
+      case 1:
+        earth = StampAPI.lib_ax1;
+        break;
+      case 2:
+        earth = StampAPI.lib_ax2;
+        break;
+    }
+    earth.earthDomElement = earthDomElement;
+    earth.errorDomElement = errorDomElement;
+    StampAPI.showTips = !!showTips;
+    if (!earthDomElement) {
+      return;
+    }
+    StampAPI.isLoadingMap = true;
+    initTimeout && clearTimeout(initTimeout);
+    initTimeout = null;
+    StampAPI.hiddenError(errorDomElement);
+    StampAPI.initErrorDiv({ earthDomElement, errorDomElement, iIndex });
+    return new Promise((resolve) => {
+      if (stamp_core_config.use_match_maker) {
+        if (iIndex == 0) {
+          if (!StampAPI.ip) {
+            StampAPI.ip = localStorage.getItem("serverip");
+          }
+          if (!StampAPI.port) {
+            StampAPI.port = localStorage.getItem("serverport");
+          }
+          if (StampAPI.ip == null) {
+            //无IP启动，则自动获取IP
+            StampAPI.getIPPort(
+              earthDomElement,
+              errorDomElement,
+              stamp_core_config.match_maker,
+              iIndex
+            ).then(() => {
+              StampAPI.hiddenError();
+              resolve();
+            });
+          } else {
+            var streamingUrl = StampAPI.getStreamingUrl(
+              StampAPI.ip,
+              StampAPI.port
+            );
+            StampAPI.playerControlInit(
+              earthDomElement,
+              streamingUrl,
+              iIndex
+            ).then((res) => {
+              StampAPI.hiddenError();
+              resolve(res);
+            });
+          }
+        } else {
+          StampAPI.getIPPort(
+            earthDomElement,
+            errorDomElement,
+            stamp_core_config.match_maker,
+            iIndex
+          ).then(() => {
+            StampAPI.hiddenError();
+            resolve();
+          });
+        }
+      } else {
+        //本地调试，无需调用matchmaker服务，直接给信令IP和端口
+        StampAPI.hiddenError(errorDomElement);
+        const streamingUrl = stamp_core_config.signal_streaming;
+        StampAPI.ip = streamingUrl
+          .replace("ws://", "")
+          .replace("wss://", "")
+          .split(":")[0];
+        StampAPI.port = streamingUrl
+          .replace("ws://", "")
+          .replace("wss://", "")
+          .split(":")[1];
+        StampAPI.playerControlInit(earthDomElement, streamingUrl, iIndex).then(
+          (res) => {
+            resolve();
+          }
+        );
+      }
+    });
+  },
+
+  /**
+   * 创建地图视频流
+   * @param {*} initialSettings
+   * @param {*} earthDomElement
+   * @param {*} earth
+   * @returns
+   */
+  createPlayer: (initialSettings, earthDomElement, earth) => {
+    return new StampPixelStreaming.player53(
+      initialSettings,
+      earthDomElement,
+      earth
+    );
+  },
+
+  /**
+   * 关闭视频流并清除地图对象
+   * @param {*} earth
+   */
+  closeVideoWithClear: (earth) => {
+    if (earth == undefined) {
+      earth = StampAPI.lib_ax;
+    }
+    StampAPI.closeVideo(earth);
+    StampAPI.clearVideo(earth);
+    StampAPI.closeExe();
+  },
+  closeExe: function () {
+    const xhr = new XMLHttpRequest();
+    if (!StampAPI.ip) {
+      StampAPI.ip = localStorage.getItem("serverip");
+    }
+    if (!StampAPI.port) {
+      StampAPI.port = localStorage.getItem("serverport");
+    }
+    var url = `${stamp_core_config.match_maker}/closeServer?ip=${StampAPI.ip}&port=${StampAPI.port}`;
+    xhr.open("get", url, false);
+    xhr.send();
+  },
+  /**
+   * 关闭视频流
+   * @param {*} earth
+   */
+  closeVideo: function (earth) {
+    earth?.player?.webRtcController?.closeSignalingServer();
+  },
+  /**
+   * 清除地图对象
+   * @param {*} earth
+   */
+  clearVideo: function (earth) {
+    if (earth?.player) {
+      earth.player.earth = undefined;
+      earth.player = undefined;
+    }
+  },
+  /**
+   * 显示错误信息
+   * @param {*} domElement
+   * @param {*} message
+   * @returns
+   */
+  showError: function (domElement, message) {
+    if (!domElement) {
+      return;
+    }
+
+    domElement.innerHTML = message;
+    StampAPI.showTips && (domElement.style.visibility = "visible");
+  },
+  /**
+   * 关闭错误信息
+   * @param {*} domElement
+   * @returns
+   */
+  hiddenError: function (domElement) {
+    if (!domElement) {
+      return;
+    }
+    domElement.innerHTML = "";
+    domElement.style.visibility = "hidden";
+  },
+
+  /**
+   * 负载均衡，取服务端IP端口
+   * @param {*} earthDomElement
+   * @param {*} matchmakerUrl
+   */
+  getIPPort: function (
+    earthDomElement,
+    errorDomElement,
+    matchmakerUrl,
+    iIndex
+  ) {
+    initTimeout && clearTimeout(initTimeout);
+    initTimeout = null;
+    return new Promise((resolve) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("get", matchmakerUrl, false);
+
+      //get token
+      let token = localStorage.getItem("token");
+      if (token == null) {
+        token = "";
+      }
+      xhr.setRequestHeader("x-access-token", token);
+
+      try {
+        xhr.send();
+      } catch (ex) {
+        StampAPI.showError(errorDomElement, "连接服务器失败");
+        initTimeout = setTimeout(function () {
+          StampAPI.getIPPort(
+            earthDomElement,
+            errorDomElement,
+            matchmakerUrl,
+            iIndex
+          ).then((res) => {
+            resolve(res);
+          });
+        }, 3000);
+      }
+      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
+        const res = JSON.parse(xhr.responseText);
+        if (res && res.success) {
+          //save token
+          token = xhr.getResponseHeader("x-access-token");
+          localStorage.setItem("token", token);
+          //成功连接上
+          StampAPI.hiddenError(errorDomElement);
+          const streamingUrl = StampAPI.getStreamingUrl(res.ip, res.port);
+          StampAPI.ip = res.ip;
+          StampAPI.port = res.port;
+          StampAPI.playerControlInit(
+            earthDomElement,
+            streamingUrl,
+            iIndex
+          ).then((res) => {
+            resolve(res);
+          });
+        } else {
+          if (res.serverCount > 0) {
+            StampAPI.showError(
+              errorDomElement,
+              res.serverCount + "台服务器资源全被占用或正在启动中"
+            );
+          } else {
+            StampAPI.showError(errorDomElement, "信令服务器未启动");
+          }
+
+          initTimeout = setTimeout(function () {
+            StampAPI.getIPPort(
+              earthDomElement,
+              errorDomElement,
+              matchmakerUrl,
+              iIndex
+            ).then((res) => {
+              resolve(res);
+            });
+          }, 3000);
+        }
+      } else {
+        StampAPI.showError(errorDomElement, "连接服务器失败");
+        initTimeout = setTimeout(function () {
+          StampAPI.getIPPort(
+            earthDomElement,
+            errorDomElement,
+            matchmakerUrl,
+            iIndex
+          ).then((res) => {
+            resolve(res);
+          });
+        }, 3000);
+      }
+    });
+  },
+
+  /**
+   * 初始化地图控件
+   * @param {*} earthDiv 地图标签ID
+   * @param {*} streamingUrl 信令服务器websocket地址
+   * @returns
+   */
+  playerControlInit: function (earthDivElement, streamingUrl, iIndex) {
+    return new Promise((resolve) => {
+      StampAPI.isLoadingMap = false;
+      var earth = null;
+      switch (iIndex) {
+        case 0:
+          earth = StampAPI.lib_ax;
+          break;
+        case 1:
+          earth = StampAPI.lib_ax1;
+          break;
+        case 2:
+          earth = StampAPI.lib_ax2;
+          break;
+        default:
+          earth = StampAPI.lib_ax;
+      }
+      if (earth.player == undefined) {
+        initialSettings.ss = streamingUrl;
+        if (stamp_core_config.bigscreen) {
+          initialSettings.PreferredCodec = "AV1 level-idx=5;profile=0;tier=0";
+        }
+
+        StampAPI.createPlayer(initialSettings, earthDivElement, earth);
+        earthDivElement.onresize = () => {
+          earth?.player?.webRtcController?.videoPlayer?.resizePlayerStyle();
+          earth?.player?.webRtcController?.videoPlayer?.updateVideoStreamSize();
+        };
+      } else {
+        earth.player.config.textParameters.get("ss")._value = streamingUrl;
+        earth.player.webRtcController.connectToSignallingServer();
+      }
+      earth?.player?.webRtcController?.videoPlayer?.updateVideoStreamSize();
+      earth?.player?.webRtcController?.videoPlayer?.resizePlayerStyle();
+      earth.player.webRtcController.videoPlayer.client_size_factor =
+        stamp_core_config.windowDevicePixelRatio || window.devicePixelRatio;
+      if (window.devicePixelRatio > 1) {
+        var scale = window.devicePixelRatio;
+        earth.environment_interface.touch_screen_scale(scale);
+      }
+
+      if (iIndex == 0) {
+        window.onkeydown = (e) => {
+          if (
+            e.target &&
+            (e.target.type == "text" || e.target.type == "textarea")
+          ) {
+            return;
+          }
+          const global_control_interface = earth?.global_control_interface;
+          if (!global_control_interface) {
+            return;
+          }
+          switch (e.keyCode) {
+            case 82: //R
+              global_control_interface.north_top_view();
+              break;
+            case 78: //N
+              global_control_interface.north_view();
+              break;
+            case 85: //U
+              global_control_interface.top_view();
+              break;
+            case 71: //G
+              global_control_interface.resume();
+              break;
+            case 37: //左
+              global_control_interface.move_left();
+              break;
+            case 38: //上
+              global_control_interface.forward();
+              break;
+            case 39: //右
+              global_control_interface.move_right();
+              break;
+            case 40: //下
+              global_control_interface.backward();
+              break;
+            case 81: //Q
+              global_control_interface.turn_left();
+              break;
+            case 69: //E
+              global_control_interface.turn_right();
+              break;
+            case 90: //Z
+              global_control_interface.look_up();
+              break;
+            case 67: //C
+              global_control_interface.look_down();
+              break;
+            case 187: //+
+              global_control_interface.zoom_in(0.33);
+              break;
+            case 189: //-
+              global_control_interface.zoom_out(-0.5);
+              break;
+            case 76: //L
+              global_control_interface.stop();
+              break;
+            default:
+              break;
+          }
+        };
+
+        window.onmousedown = (e) => {
+          if (
+            e.target.id == "streamingVideo" &&
+            e.which == 1 &&
+            earth.LibAx.Cursor.enable_globe_cursor
+          ) {
+            this.setMouseCursor(earth, 2);
+          }
+        };
+
+        window.onmouseup = (e) => {
+          if (
+            e.target.id == "streamingVideo" &&
+            e.which == 1 &&
+            earth.LibAx.Cursor.enable_globe_cursor
+          ) {
+            this.setMouseCursor(earth, 1);
+          } else if (e.target.id == "streamingVideo" && e.which == 3) {
+            this.setMouseCursor(earth, 0);
+          }
+        };
+      }
+      this.initPlayEvent(earth).then((res) => {
+        earth?.player?.webRtcController?.videoPlayer?.resizePlayerStyle();
+        earth?.player?.webRtcController?.videoPlayer?.updateVideoStreamSize();
+        resolve(res);
+      });
+    });
+  },
+
+  initPlayEvent: function (earth) {
+    return new Promise((resolve) => {
+      earth.player.streaming.addEventListener(
+        "webRtcDisconnected",
+        ({ data: { eventString, showActionOrErrorOnDisconnect } }) => {
+          this.onDisconnect(earth, eventString, showActionOrErrorOnDisconnect);
+        },
+        false
+      );
+      if (earth.onPlaying) {
+        //先清除
+        earth.player.webRtcController.videoPlayer.videoElement.removeEventListener(
+          "playing",
+          earth.onPlaying,
+          false
+        );
+      }
+      earth.onPlaying = () => {
+        this.onPlaying();
+        this.hiddenError(earth.errorDomElement);
+        this.setMouseCursor(earth, 0);
+        resolve("success"); //连接播放成功后回调
+      };
+      earth.player.webRtcController.videoPlayer.videoElement.addEventListener(
+        "playing",
+        earth.onPlaying,
+        false
+      );
+    });
+  },
+
+  setMouseCursor(earth, isFlag) {
+    switch (isFlag) {
+      case 1: //正常浏览，手爪松手状态
+        earth.LibAx.Cursor.normal = "url(cursor/1.cur),default";
+        earth.LibAx.Cursor.update();
+        break;
+      case 2: //拖拽：鼠标按下，手爪握拳状态
+        earth.LibAx.Cursor.normal = "url(cursor/2.cur),default";
+        earth.LibAx.Cursor.update();
+        break;
+      default: //正常状态
+        earth.LibAx.Cursor.normal = "url(cursor/1.cur),default";
+        earth.LibAx.Cursor.edit = "crosshair";
+        earth.LibAx.Cursor.reset();
+        break;
+    }
+  },
+  onDisconnect(earth) {
+    console.log("断开连接");
+    if (StampAPI.isLoadingMap) {
+      return;
+    }
+    this.isClickToStart = true;
+    this.showError(
+      earth?.errorDomElement,
+      '<div style="cursor:pointer;right:0px;">断开连接</div>'
+    );
+  },
+  onPlaying() {
+    console.log("视频播放中");
+  },
+};
+
+StampAPI.initEarth();