@chaomingd/design 0.0.68

package/dist/esm/PixelPlayer/lib/peer-stream.js

@@ -0,0 +1,876 @@
+'4.27.2';
+
+/* eslint-disable -- hack skills */
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _wrapNativeSuper from "@babel/runtime/helpers/esm/wrapNativeSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+// Must be kept in sync with JavaScriptKeyCodeToFKey C++ array.
+// special keycodes different from KeyboardEvent.keyCode
+var SpecialKeyCodes = {
+  Backspace: 8,
+  ShiftLeft: 16,
+  ControlLeft: 17,
+  AltLeft: 18,
+  ShiftRight: 253,
+  ControlRight: 254,
+  AltRight: 255
+};
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+var MouseButton = {
+  MainButton: 0,
+  // Left button.
+  AuxiliaryButton: 1,
+  // Wheel button.
+  SecondaryButton: 2,
+  // Right button.
+  FourthButton: 3,
+  // Browser Back button.
+  FifthButton: 4 // Browser Forward button.
+};
+
+// Must be kept in sync with PixelStreamingProtocol::EToClientMsg C++ enum.
+var RECEIVE = {
+  QualityControlOwnership: 0,
+  Response: 1,
+  Command: 2,
+  FreezeFrame: 3,
+  UnfreezeFrame: 4,
+  VideoEncoderAvgQP: 5,
+  LatencyTest: 6,
+  InitialSettings: 7
+};
+
+// Must be kept in sync with PixelStreamingProtocol::EToUE4Msg C++ enum.
+var SEND = {
+  /*
+   * Control Messages. Range = 0..49.
+   */
+  IFrameRequest: 0,
+  RequestQualityControl: 1,
+  MaxFpsRequest: 2,
+  AverageBitrateRequest: 3,
+  StartStreaming: 4,
+  StopStreaming: 5,
+  LatencyTest: 6,
+  RequestInitialSettings: 7,
+  /*
+   * Input Messages. Range = 50..89.
+   */
+
+  // Generic Input Messages. Range = 50..59.
+  UIInteraction: 50,
+  Command: 51,
+  // Keyboard Input Message. Range = 60..69.
+  KeyDown: 60,
+  KeyUp: 61,
+  KeyPress: 62,
+  // Mouse Input Messages. Range = 70..79.
+  MouseEnter: 70,
+  MouseLeave: 71,
+  MouseDown: 72,
+  MouseUp: 73,
+  MouseMove: 74,
+  MouseWheel: 75,
+  // Touch Input Messages. Range = 80..89.
+  TouchStart: 80,
+  TouchEnd: 81,
+  TouchMove: 82
+};
+var customEventsArray = ['initialize', 'connected', 'disconnected', 'tryConnect', 'message', 'error'];
+export var PeerStream = /*#__PURE__*/function (_HTMLVideoElement) {
+  _inherits(PeerStream, _HTMLVideoElement);
+  var _super = _createSuper(PeerStream);
+  function PeerStream() {
+    var _this;
+    _classCallCheck(this, PeerStream);
+    for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+      params[_key] = arguments[_key];
+    }
+    console.log(params);
+    _this = _super.call(this);
+    _defineProperty(_assertThisInitialized(_this), "ws", {
+      send: function send() {},
+      close: function close() {}
+    });
+    _defineProperty(_assertThisInitialized(_this), "pc", {
+      close: function close() {}
+    });
+    _defineProperty(_assertThisInitialized(_this), "VideoEncoderQP", void 0);
+    _defineProperty(_assertThisInitialized(_this), "QualityControlOwnership", void 0);
+    _defineProperty(_assertThisInitialized(_this), "InitialSettings", void 0);
+    _defineProperty(_assertThisInitialized(_this), "disablepictureinpicture", void 0);
+    _defineProperty(_assertThisInitialized(_this), "dc", void 0);
+    _defineProperty(_assertThisInitialized(_this), "audio", void 0);
+    _defineProperty(_assertThisInitialized(_this), "ping", -1);
+    _defineProperty(_assertThisInitialized(_this), "customEvents", {});
+    _defineProperty(_assertThisInitialized(_this), "reconnect", -1);
+    _defineProperty(_assertThisInitialized(_this), "reconnectCount", 0);
+    window.ps = _assertThisInitialized(_this);
+
+    // this.ws = { send() { }, close() { } }; // WebSocket
+    // this.pc = { close() { } }; // RTCPeerConnection
+    _this.createCustomEvents();
+    _this.setupVideo();
+    _this.registerKeyboardEvents();
+    _this.registerMouseHoverEvents();
+    _this.registerFakeMouseEvents();
+    document.addEventListener('pointerlockchange', function () {
+      if (document.pointerLockElement === _assertThisInitialized(_this)) {
+        _this.registerPointerlockEvents();
+      } else {
+        _this.registerMouseHoverEvents();
+      }
+    }, false);
+    _this.addEventListener('loadeddata', function (e) {
+      _this.style.aspectRatio = "".concat(_this.videoWidth / _this.videoHeight);
+    });
+    return _this;
+  }
+  _createClass(PeerStream, [{
+    key: "createCustomEvents",
+    value: function createCustomEvents() {
+      for (var _i = 0, _customEventsArray = customEventsArray; _i < _customEventsArray.length; _i++) {
+        var eventName = _customEventsArray[_i];
+        var event = new CustomEvent(eventName);
+        this.customEvents[eventName] = event;
+      }
+    }
+    // 自定义播放暂停
+  }, {
+    key: "customPlay",
+    value: function customPlay() {
+      this.setupWebsocket();
+    }
+  }, {
+    key: "customPause",
+    value: function customPause() {
+      this.dc.close();
+      this.pause();
+    }
+  }, {
+    key: "customStop",
+    value: function customStop() {
+      this.ws.close(1000, 'Infinity');
+      this.pc.close();
+    }
+  }, {
+    key: "setupWebsocket",
+    value: function setupWebsocket() {
+      var _this2 = this;
+      // This will happen each time the node is moved, and may happen before the element"s contents have been fully parsed. may be called once your element is no longer connected
+      if (!this.isConnected) return;
+      var signal = this.getAttribute('signal');
+      if (!signal) {
+        var ip = this.getAttribute('ip') || location.hostname || 'localhost';
+        var port = this.getAttribute('port') || 88;
+        var token = this.getAttribute('token') || 'hello';
+        signal = "ws://".concat(ip, ":").concat(port, "/").concat(token);
+      }
+      // 是否需要ping，配套的是signal.js里的需要pong
+      var needPing = false;
+      this.ws.close(1000, 'Infinity');
+      this.ws = new WebSocket(signal);
+      this.ws.onerror = function (e) {
+        console.log(e);
+      };
+      this.ws.onopen = /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                console.info('✅ connected to', _this2.ws.url);
+                _this2.setupPeerConnection();
+                // If the new data channel is the first one added to the connection, renegotiation is started by delivering a negotiationneeded event.
+                _this2.setupDataChannel();
+                // this.pc.restartIce();
+
+                clearInterval(_this2.ping);
+                if (needPing) {
+                  // @ts-ignore
+                  _this2.ping = setInterval(function () {
+                    _this2.ws.send(JSON.stringify({
+                      type: 'ping',
+                      time: Date.now()
+                    }));
+                  }, 1000 * 50);
+                }
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      this.ws.onmessage = function (e) {
+        _this2.onWebSocketMessage(e.data);
+      };
+      this.ws.onclose = function (e) {
+        console.info('❌ signaler closed:', e.reason || e.code);
+        clearInterval(_this2.ping);
+        var timeout = +e.reason || 3000;
+        if (timeout === Infinity) return;
+        clearTimeout(_this2.reconnect);
+        if (_this2.reconnectCount > 0) {
+          // @ts-ignore
+          _this2.reconnect = setTimeout(function () {
+            _this2.reconnectCount--;
+            _this2.dispatchEvent(_this2.customEvents.tryConnect);
+            _this2.setupWebsocket();
+          }, timeout);
+        }
+        _this2.dispatchEvent(_this2.customEvents.disconnected);
+      };
+    }
+  }, {
+    key: "setupAttributes",
+    value: function setupAttributes() {
+      this.poster = this.getAttribute('poster') || '';
+      console.log(this.poster);
+      this.reconnectCount = +(this.getAttribute('reconnectCount') || Number.MAX_SAFE_INTEGER);
+    }
+  }, {
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      this.setupAttributes();
+      this.setupWebsocket();
+    }
+  }, {
+    key: "disconnectedCallback",
+    value: function disconnectedCallback() {
+      // WebRTC的生命周期与<video>的生命周期绑定
+      this.ws.close(1000, 'Infinity');
+      this.pc.close();
+      console.log('❌ peer connection closing');
+      // this.dc.close();
+    }
+  }, {
+    key: "adoptedCallback",
+    value: function adoptedCallback() {}
+  }, {
+    key: "attributeChangedCallback",
+    value:
+    // attributeChangedCallback(name, oldValue, newValue) {
+    function attributeChangedCallback() {
+      if (!this.isConnected) return;
+      // fired before connectedCallback when startup  一开始会触发：oldValue从null变成newValue
+      this.ws.close(1000, '1');
+    }
+  }, {
+    key: "onWebSocketMessage",
+    value: function () {
+      var _onWebSocketMessage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(msgStr) {
+        var msg, answer, _iterator, _step, receiver, candidate;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              msg = JSON.parse(msgStr);
+              _context2.next = 8;
+              break;
+            case 4:
+              _context2.prev = 4;
+              _context2.t0 = _context2["catch"](0);
+              console.debug('signaler:', msg);
+              return _context2.abrupt("return");
+            case 8:
+              if (!(msg.type === 'answer')) {
+                _context2.next = 17;
+                break;
+              }
+              answer = new RTCSessionDescription(msg);
+              _context2.next = 12;
+              return this.pc.setRemoteDescription(answer);
+            case 12:
+              console.log('Got answer:', answer);
+              // 功能不可用
+              _iterator = _createForOfIteratorHelper(this.pc.getReceivers());
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  receiver = _step.value;
+                  receiver.playoutDelayHint = 0;
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+              _context2.next = 25;
+              break;
+            case 17:
+              if (!(msg.type === 'iceCandidate')) {
+                _context2.next = 24;
+                break;
+              }
+              candidate = new RTCIceCandidate(msg.candidate);
+              _context2.next = 21;
+              return this.pc.addIceCandidate(candidate);
+            case 21:
+              console.log('Got candidate:', candidate);
+              _context2.next = 25;
+              break;
+            case 24:
+              if (msg.type === 'ping') {
+                console.log('↓↓ ping:', msg);
+                msg.type = 'pong';
+                this.ws.send(JSON.stringify(msg));
+              } else {
+                console.warn('signaler:', msg);
+              }
+            case 25:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this, [[0, 4]]);
+      }));
+      function onWebSocketMessage(_x2) {
+        return _onWebSocketMessage.apply(this, arguments);
+      }
+      return onWebSocketMessage;
+    }()
+  }, {
+    key: "onDataChannelMessage",
+    value: function onDataChannelMessage(message) {
+      var data = new Uint8Array(message);
+      var utf16 = new TextDecoder('utf-16');
+      switch (data[0]) {
+        case RECEIVE.VideoEncoderAvgQP:
+          {
+            this.VideoEncoderQP = +utf16.decode(data.slice(1));
+            // console.debug("Got QP:", this.VideoEncoderQP);
+            break;
+          }
+        case RECEIVE.Response:
+          {
+            // user custom message
+            var detail = utf16.decode(data.slice(1));
+            this.dispatchEvent(new CustomEvent('message', {
+              detail: detail
+            }));
+            console.info('Got ✉:', detail);
+            break;
+          }
+        case RECEIVE.Command:
+          {
+            var command = JSON.parse(utf16.decode(data.slice(1)));
+            console.info('Got command:', command);
+            if (command.command === 'onScreenKeyboard') {
+              console.info('You should setup a on-screen keyboard');
+            }
+            break;
+          }
+        case RECEIVE.FreezeFrame:
+          {
+            var size = new DataView(data.slice(1, 5).buffer).getInt32(0, true);
+            var jpeg = data.slice(1 + 4);
+            console.info('Got freezed frame:', jpeg);
+            break;
+          }
+        case RECEIVE.UnfreezeFrame:
+          {
+            console.info('Got 【unfreeze frame】');
+            break;
+          }
+        case RECEIVE.LatencyTest:
+          {
+            var latencyTimings = JSON.parse(utf16.decode(data.slice(1)));
+            console.info('Got latency timings:', latencyTimings);
+            break;
+          }
+        case RECEIVE.QualityControlOwnership:
+          {
+            this.QualityControlOwnership = data[1] !== 0;
+            console.info('Got Quality Control Ownership:', this.QualityControlOwnership);
+            break;
+          }
+        case RECEIVE.InitialSettings:
+          {
+            this.InitialSettings = JSON.parse(utf16.decode(data.slice(1)));
+            console.log('Got initial setting:', this.InitialSettings);
+            break;
+          }
+        default:
+          {
+            console.error('Got invalid data:', data);
+          }
+      }
+    }
+  }, {
+    key: "setupVideo",
+    value: function setupVideo() {
+      this.tabIndex = -1; // easy to focus..
+      this.autofocus = true;
+      this.playsInline = true;
+      this.disablepictureinpicture = true;
+
+      // Recently many browsers can only autoplay the videos with sound off
+      this.muted = true;
+      this.autoplay = true;
+
+      // this.onsuspend
+      // this.onresize
+      // this.requestPointerLock();
+
+      this.style.pointerEvents = 'none';
+      this.style.objectFit = 'fill';
+    }
+  }, {
+    key: "setupDataChannel",
+    value: function setupDataChannel() {
+      var _this3 = this;
+      var label = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'hello';
+      // See https://www.w3.org/TR/webrtc/#dom-rtcdatachannelinit for values (this is needed for Firefox to be consistent with Chrome.)
+      this.dc = this.pc.createDataChannel(label, {
+        ordered: true
+      });
+      // Inform browser we would like binary data as an ArrayBuffer (FF chooses Blob by default!)
+      this.dc.binaryType = 'arraybuffer';
+      this.dc.safeSend = function () {
+        try {
+          if (_this3.dc.readyState === 'open') {
+            var _this3$dc;
+            (_this3$dc = _this3.dc).send.apply(_this3$dc, arguments);
+          }
+        } catch (error) {
+          console.log(error);
+        }
+      };
+      this.dc.onopen = function () {
+        _this3.dispatchEvent(_this3.customEvents.connected);
+        console.log('✅ data channel connected:', label);
+        _this3.style.pointerEvents = 'auto';
+        _this3.dc.send(new Uint8Array([SEND.RequestInitialSettings]));
+        _this3.dc.send(new Uint8Array([SEND.RequestQualityControl]));
+      };
+      this.dc.onclose = function () {
+        console.info('❌ data channel closed:', label);
+        // this.style.pointerEvents = "none";
+      };
+      this.dc.onmessage = function (e) {
+        _this3.onDataChannelMessage(e.data);
+      };
+    }
+  }, {
+    key: "setupPeerConnection",
+    value: function setupPeerConnection() {
+      var _this4 = this;
+      console.log('setupPeerConnection');
+      this.pc.close();
+      this.pc = new RTCPeerConnection({
+        // sdpSemantics: "unified-plan",
+        iceServers: [
+          // {
+          //   urls: [
+          //     "stun:stun.l.google.com:19302",
+          //     "stun:stun1.l.google.com:19302",
+          //     "stun:stun2.l.google.com:19302",
+          //     "stun:stun3.l.google.com:19302",
+          //     "stun:stun4.l.google.com:19302",
+          //   ],
+          // },
+        ]
+      });
+      this.pc.ontrack = function (e) {
+        console.log("Got ".concat(e.track.kind, " track:"), e);
+        if (e.track.kind === 'video') {
+          _this4.srcObject = e.streams[0];
+        } else if (e.track.kind === 'audio') {
+          _this4.audio = document.createElement('audio');
+          _this4.audio.autoplay = true;
+          _this4.audio.srcObject = e.streams[0];
+        }
+      };
+      this.pc.onicecandidate = function (e) {
+        var _e$candidate;
+        // firefox
+        if ((_e$candidate = e.candidate) !== null && _e$candidate !== void 0 && _e$candidate.candidate) {
+          console.log('sending candidate:', e.candidate);
+          _this4.ws.send(JSON.stringify({
+            type: 'iceCandidate',
+            candidate: e.candidate
+          }));
+        } else {
+          // Notice that the end of negotiation is detected here when the event"s candidate property is null.
+        }
+      };
+      this.pc.onnegotiationneeded = function (e) {
+        _this4.setupOffer();
+      };
+      var setPoster = function setPoster() {
+        return _this4.poster = _this4.poster || "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><style>text{font-size:7mm;fill:red;}</style>\n        <text x=\"10\" y=\"030\"> Signal:      ".concat(_this4.pc.signalingState, "     </text>\n        <text x=\"10\" y=\"065\"> Connect:     ").concat(_this4.pc.connectionState, "    </text>\n        <text x=\"10\" y=\"100\"> ICE Gather:  ").concat(_this4.pc.iceGatheringState, "  </text>\n        <text x=\"10\" y=\"135\"> ICE Connect: ").concat(_this4.pc.iceConnectionState, " </text>\n      </svg>");
+      };
+      this.pc.onsignalingstatechange = this.pc.onconnectionstatechange = this.pc.oniceconnectionstatechange = this.pc.onicegatheringstatechange = setPoster;
+    }
+  }, {
+    key: "setupOffer",
+    value: function () {
+      var _setupOffer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var _offer$sdp;
+        var offer;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return this.pc.createOffer({
+                offerToReceiveAudio: this.hasAttribute('audio'),
+                offerToReceiveVideo: true
+                // voiceActivityDetection: false,
+              });
+            case 2:
+              offer = _context3.sent;
+              // this indicate we support stereo (Chrome needs this)
+              offer.sdp = (_offer$sdp = offer.sdp) === null || _offer$sdp === void 0 ? void 0 : _offer$sdp.replace('useinbandfec=1', 'useinbandfec=1;stereo=1;sprop-maxcapturerate=48000');
+              this.pc.setLocalDescription(offer);
+              this.ws.send(JSON.stringify(offer));
+              console.log('sending offer:', offer);
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function setupOffer() {
+        return _setupOffer.apply(this, arguments);
+      }
+      return setupOffer;
+    }()
+  }, {
+    key: "registerKeyboardEvents",
+    value: function registerKeyboardEvents() {
+      var _this5 = this;
+      this.addEventListener('keydown', function (event) {
+        // Handle the keydown event here
+        console.log('Key pressed:', event.key);
+      });
+      this.onkeydown = function (e) {
+        console.log(e.code, e.keyCode);
+        _this5.dc.safeSend(new Uint8Array([SEND.KeyDown, SpecialKeyCodes[e.code] || e.keyCode, Number(e.repeat)]));
+        // whether to prevent browser"s default behavior when keyboard/mouse have inputs, like F1~F12 and Tab
+        e.preventDefault();
+        //  e.stopPropagation
+      };
+      this.onkeyup = function (e) {
+        _this5.dc.safeSend(new Uint8Array([SEND.KeyUp, SpecialKeyCodes[e.code] || e.keyCode]));
+        e.preventDefault();
+      };
+      this.onkeypress = function (e) {
+        var data = new DataView(new ArrayBuffer(3));
+        data.setUint8(0, SEND.KeyPress);
+        data.setUint16(1, SpecialKeyCodes[e.code] || e.keyCode, true);
+        _this5.dc.safeSend(data);
+        e.preventDefault();
+      };
+    }
+  }, {
+    key: "registerTouchEvents",
+    value: function registerTouchEvents() {
+      var _this6 = this;
+      // We need to assign a unique identifier to each finger.
+      // We do this by mapping each Touch object to the identifier.
+      var fingers = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
+      var fingerIds = {};
+      this.ontouchstart = function (e) {
+        // Assign a unique identifier to each touch.
+        for (var _i2 = 0, _Array$from = Array.from(e.changedTouches); _i2 < _Array$from.length; _i2++) {
+          var touch = _Array$from[_i2];
+          // remember touch
+          var finger = fingers.pop();
+          if (finger === undefined) {
+            console.info('exhausted touch indentifiers');
+          }
+          fingerIds[touch.identifier] = finger;
+        }
+        _this6.emitTouchData(SEND.TouchStart, e.changedTouches, fingerIds);
+        e.preventDefault();
+      };
+      this.ontouchend = function (e) {
+        _this6.emitTouchData(SEND.TouchEnd, e.changedTouches, fingerIds);
+        // Re-cycle unique identifiers previously assigned to each touch.
+        for (var _i3 = 0, _Array$from2 = Array.from(e.changedTouches); _i3 < _Array$from2.length; _i3++) {
+          var touch = _Array$from2[_i3];
+          // forget touch
+          fingers.push(fingerIds[touch.identifier]);
+          delete fingerIds[touch.identifier];
+        }
+        e.preventDefault();
+      };
+      this.ontouchmove = function (e) {
+        _this6.emitTouchData(SEND.TouchMove, e.touches, fingerIds);
+        e.preventDefault();
+      };
+    }
+
+    // 触屏模拟鼠标
+  }, {
+    key: "registerFakeMouseEvents",
+    value: function registerFakeMouseEvents() {
+      var _this7 = this;
+      var finger = undefined;
+      var _this$getBoundingClie = this.getBoundingClientRect(),
+        left = _this$getBoundingClie.left,
+        top = _this$getBoundingClie.top;
+      this.ontouchstart = function (e) {
+        if (finger === undefined) {
+          var firstTouch = e.changedTouches[0];
+          finger = {
+            id: firstTouch.identifier,
+            x: firstTouch.clientX - left,
+            y: firstTouch.clientY - top
+          };
+          // Hack: Mouse events require an enter and leave so we just enter and leave manually with each touch as this event is not fired with a touch device.
+          _this7.onmouseenter && _this7.onmouseenter(e);
+          _this7.emitMouseDown(MouseButton.MainButton, finger.x, finger.y);
+        }
+        e.preventDefault();
+      };
+      this.ontouchend = function (e) {
+        for (var _i4 = 0, _Array$from3 = Array.from(e.changedTouches); _i4 < _Array$from3.length; _i4++) {
+          var _finger;
+          var touch = _Array$from3[_i4];
+          if (touch.identifier === ((_finger = finger) === null || _finger === void 0 ? void 0 : _finger.id)) {
+            var _x3 = touch.clientX - left;
+            var y = touch.clientY - top;
+            _this7.emitMouseUp(MouseButton.MainButton, _x3, y);
+            // Hack: Manual mouse leave event.
+            _this7.onmouseleave && _this7.onmouseleave(e);
+            finger = undefined;
+            break;
+          }
+        }
+        e.preventDefault();
+      };
+      this.ontouchmove = function (e) {
+        for (var _i5 = 0, _Array$from4 = Array.from(e.changedTouches); _i5 < _Array$from4.length; _i5++) {
+          var _finger2;
+          var touch = _Array$from4[_i5];
+          if (touch.identifier === ((_finger2 = finger) === null || _finger2 === void 0 ? void 0 : _finger2.id)) {
+            var _x4 = touch.clientX - left;
+            var y = touch.clientY - top;
+            _this7.emitMouseMove(_x4, y, _x4 - finger.x, y - finger.y);
+            finger.x = _x4;
+            finger.y = y;
+            break;
+          }
+        }
+        e.preventDefault();
+      };
+    }
+  }, {
+    key: "registerMouseHoverEvents",
+    value: function registerMouseHoverEvents() {
+      var _this8 = this;
+      this.registerMouseEnterAndLeaveEvents();
+      this.onmousemove = function (e) {
+        _this8.emitMouseMove(e.offsetX, e.offsetY, e.movementX, e.movementY);
+        e.preventDefault();
+      };
+      this.onmousedown = function (e) {
+        _this8.emitMouseDown(e.button, e.offsetX, e.offsetY);
+        // e.preventDefault();
+      };
+      this.onmouseup = function (e) {
+        _this8.emitMouseUp(e.button, e.offsetX, e.offsetY);
+        // e.preventDefault();
+      };
+
+      // When the context menu is shown then it is safest to release the button which was pressed when the event happened. This will guarantee we will get at least one mouse up corresponding to a mouse down event. Otherwise the mouse can get stuck.
+      // https://github.com/facebook/react/issues/5531
+      this.oncontextmenu = function (e) {
+        _this8.emitMouseUp(e.button, e.offsetX, e.offsetY);
+        e.preventDefault();
+      };
+      this.onwheel = function (e) {
+        // console.log(e,e.wheelDeltaY,e.deltaY)
+        // 临时处理
+        _this8.emitMouseWheel(-e.deltaY, e.offsetX, e.offsetY);
+        e.preventDefault();
+      };
+    }
+  }, {
+    key: "registerPointerlockEvents",
+    value: function registerPointerlockEvents() {
+      var _this9 = this;
+      this.registerMouseEnterAndLeaveEvents();
+      console.info('mouse locked in, ESC to exit');
+      var clientWidth = this.clientWidth,
+        clientHeight = this.clientHeight;
+      var x = clientWidth / 2;
+      var y = clientHeight / 2;
+      this.onmousemove = function (e) {
+        x += e.movementX;
+        y += e.movementY;
+        x = (x + clientWidth) % clientWidth;
+        y = (y + clientHeight) % clientHeight;
+        _this9.emitMouseMove(x, y, e.movementX, e.movementY);
+      };
+      this.onmousedown = function (e) {
+        _this9.emitMouseDown(e.button, x, y);
+      };
+      this.onmouseup = function (e) {
+        _this9.emitMouseUp(e.button, x, y);
+      };
+      this.onwheel = function (e) {
+        // 临时处理
+        _this9.emitMouseWheel(-e.deltaY, x, y);
+      };
+    }
+  }, {
+    key: "registerMouseEnterAndLeaveEvents",
+    value: function registerMouseEnterAndLeaveEvents() {
+      var _this10 = this;
+      this.onmouseenter = function (e) {
+        _this10.dc.safeSend(new Uint8Array([SEND.MouseEnter]));
+      };
+      this.onmouseleave = function (e) {
+        _this10.dc.safeSend && _this10.dc.safeSend(new Uint8Array([SEND.MouseLeave]));
+      };
+    }
+  }, {
+    key: "emitMouseMove",
+    value: function emitMouseMove(x, y, deltaX, deltaY) {
+      var coord = this._normalize(x, y);
+      deltaX = deltaX * 65536 / this.clientWidth;
+      deltaY = deltaY * 65536 / this.clientHeight;
+      var data = new DataView(new ArrayBuffer(9));
+      data.setUint8(0, SEND.MouseMove);
+      data.setUint16(1, coord.x, true);
+      data.setUint16(3, coord.y, true);
+      data.setInt16(5, deltaX, true);
+      data.setInt16(7, deltaY, true);
+      this.dc.safeSend(data);
+    }
+  }, {
+    key: "emitMouseDown",
+    value: function emitMouseDown(button, x, y) {
+      var coord = this._normalize(x, y);
+      var data = new DataView(new ArrayBuffer(6));
+      data.setUint8(0, SEND.MouseDown);
+      data.setUint8(1, button);
+      data.setUint16(2, coord.x, true);
+      data.setUint16(4, coord.y, true);
+      this.dc.safeSend(data);
+    }
+  }, {
+    key: "emitMouseUp",
+    value: function emitMouseUp(button, x, y) {
+      var coord = this._normalize(x, y);
+      var data = new DataView(new ArrayBuffer(6));
+      data.setUint8(0, SEND.MouseUp);
+      data.setUint8(1, button);
+      data.setUint16(2, coord.x, true);
+      data.setUint16(4, coord.y, true);
+      this.dc.safeSend(data);
+    }
+  }, {
+    key: "emitMouseWheel",
+    value: function emitMouseWheel(delta, x, y) {
+      var coord = this._normalize(x, y);
+      var data = new DataView(new ArrayBuffer(7));
+      data.setUint8(0, SEND.MouseWheel);
+      data.setInt16(1, delta, true);
+      data.setUint16(3, coord.x, true);
+      data.setUint16(5, coord.y, true);
+      this.dc.safeSend(data);
+    }
+  }, {
+    key: "emitTouchData",
+    value: function emitTouchData(type, touches, fingerIds) {
+      var data = new DataView(new ArrayBuffer(2 + 6 * touches.length));
+      data.setUint8(0, type);
+      data.setUint8(1, touches.length);
+      var byte = 2;
+      for (var _i6 = 0, _Array$from5 = Array.from(touches); _i6 < _Array$from5.length; _i6++) {
+        var touch = _Array$from5[_i6];
+        var _x5 = touch.clientX - this.offsetLeft;
+        var y = touch.clientY - this.offsetTop;
+        var coord = this._normalize(_x5, y);
+        data.setUint16(byte, coord.x, true);
+        byte += 2;
+        data.setUint16(byte, coord.y, true);
+        byte += 2;
+        data.setUint8(byte, fingerIds[touch.identifier]);
+        byte += 1;
+        data.setUint8(byte, 255 * touch.force); // force is between 0.0 and 1.0 so quantize into byte.
+        byte += 1;
+      }
+      this.dc.safeSend(data);
+    }
+
+    // emit string
+  }, {
+    key: "emitMessage",
+    value: function emitMessage(msg) {
+      var messageType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SEND.UIInteraction;
+      if (typeof msg !== 'string') msg = JSON.stringify(msg);
+
+      // Add the UTF-16 JSON string to the array byte buffer, going two bytes at a time.
+      var data = new DataView(new ArrayBuffer(1 + 2 + 2 * msg.length));
+      var byteIdx = 0;
+      data.setUint8(byteIdx, messageType);
+      byteIdx++;
+      data.setUint16(byteIdx, msg.length, true);
+      byteIdx += 2;
+      var _iterator2 = _createForOfIteratorHelper(msg),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var char = _step2.value;
+          // charCodeAt() is UTF-16, codePointAt() is Unicode.
+          data.setUint16(byteIdx, char.charCodeAt(0), true);
+          byteIdx += 2;
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      this.dc.safeSend(data);
+      // 有时候前端问：怎么返回undefined？是不是没发送成功？
+      return true;
+    }
+  }, {
+    key: "_normalize",
+    value: function _normalize(x, y) {
+      var normalizedX = x / this.clientWidth;
+      var normalizedY = y / this.clientHeight;
+      if (normalizedX < 0.0 || normalizedX > 1.0 || normalizedY < 0.0 || normalizedY > 1.0) {
+        return {
+          inRange: false,
+          x: 65535,
+          y: 65535
+        };
+      } else {
+        return {
+          inRange: true,
+          x: normalizedX * 65536,
+          y: normalizedY * 65536
+        };
+      }
+    }
+  }, {
+    key: "debug",
+    value: function debug(NodeJS) {
+      // 调试信令服务器
+      this.ws.send(JSON.stringify({
+        type: 'debug',
+        debug: NodeJS
+      }));
+    }
+  }]);
+  return PeerStream;
+}( /*#__PURE__*/_wrapNativeSuper(HTMLVideoElement));
+_defineProperty(PeerStream, "observedAttributes", ['signal', 'ip', 'port', 'token']);
+export function initialize(initialSettings) {
+  customElements.define('peer-stream', PeerStream, {
+    extends: 'video'
+  });
+}