yjz-web-sdk 1.0.2 → 1.0.3-beta.0

package/lib/yjz-web-sdk.js

@@ -198,6 +198,7 @@ var MessageType = /* @__PURE__ */ ((MessageType2) => {
   MessageType2["NotAvailable"] = "NotAvailable";
   MessageType2["Ping"] = "Ping";
   MessageType2["Pong"] = "Pong";
+  MessageType2["SendScreenshot"] = "SendScreenshot";
   return MessageType2;
 })(MessageType || {});
 var SendType = /* @__PURE__ */ ((SendType2) => {
@@ -208,6 +209,7 @@ var SendType = /* @__PURE__ */ ((SendType2) => {
   SendType2["IceCandidates"] = "IceCandidates";
   SendType2["Pong"] = "Pong";
   SendType2["Identity"] = "Web";
+  SendType2["RequestScreenshot"] = "RequestScreenshot";
   return SendType2;
 })(SendType || {});
 var FailCode = /* @__PURE__ */ ((FailCode2) => {
@@ -304,6 +306,8 @@ var EmitType = /* @__PURE__ */ ((EmitType2) => {
   EmitType2["iceConnectionState"] = "iceConnectionState";
   EmitType2["cloudStatusChanged"] = "cloudStatusChanged";
   EmitType2["statisticInfo"] = "statisticInfo";
+  EmitType2["cloudClipData"] = "cloudClipData";
+  EmitType2["screenshot"] = "screenshot";
   return EmitType2;
 })(EmitType || {});
 class SignalingClient extends EventEmitter {
@@ -323,7 +327,6 @@ class SignalingClient extends EventEmitter {
   start() {
     this.webSocket = new WebSocket(this.config.signalServerUrl);
     this.webSocket.onopen = () => {
-      console.log("sendSignInMessagesendSignInMessagesendSignInMessage");
       this.sendSignInMessage();
       if (this.timeout === null) {
         this.timeout = setTimeout(() => {
@@ -379,6 +382,23 @@ class SignalingClient extends EventEmitter {
       type: SendType.SignIn,
       identity: SendType.Identity,
       turnServerUri: this.config.turnServerUri,
+      roomId: this.config.roomId,
+      isControl: this.config.isControl ? "true" : "false",
+      screenshotWidth: this.config.screenshotWidth,
+      screenshotHeight: this.config.screenshotHeight,
+      screenshotQuality: this.config.screenshotQuality
+    };
+    const jsonMessage = JSON.stringify(message);
+    this.sendMessage(jsonMessage);
+  }
+  /**
+   * 用于从控请求当前截屏
+   * @param visible 当前从控page控件是否可见
+   */
+  sendRequestScreenshot(visible) {
+    const message = {
+      type: SendType.RequestScreenshot,
+      visible,
       roomId: this.config.roomId
     };
     const jsonMessage = JSON.stringify(message);
@@ -2982,6 +3002,10 @@ class WebRTCConfig {
     __publicField(this, "turnServerUri");
     __publicField(this, "turnServerUserName");
     __publicField(this, "turnServerPassword");
+    __publicField(this, "isControl");
+    __publicField(this, "screenshotWidth");
+    __publicField(this, "screenshotHeight");
+    __publicField(this, "screenshotQuality");
     this.signalServerUrl = options.signalServerUrl || "";
     this.myId = options.myId || "";
     this.roomId = options.roomId || "";
@@ -2992,23 +3016,783 @@ class WebRTCConfig {
     this.turnServerUri = options.turnServerUri || "turn:btweb.yajuzhen.com:3478";
     this.turnServerUserName = options.turnServerUserName || "yangyj";
     this.turnServerPassword = options.turnServerPassword || "hb@2025@168";
+    this.isControl = options.isControl ?? true;
+    this.screenshotWidth = options.screenshotWidth || 144;
+    this.screenshotHeight = options.screenshotHeight || 256;
+    this.screenshotQuality = options.screenshotQuality || 20;
   }
 }
+var lib = {};
+var parser = {};
+var grammar = { exports: {} };
+var hasRequiredGrammar;
+function requireGrammar() {
+  if (hasRequiredGrammar) return grammar.exports;
+  hasRequiredGrammar = 1;
+  var grammar$1 = grammar.exports = {
+    v: [{
+      name: "version",
+      reg: /^(\d*)$/
+    }],
+    o: [{
+      // o=- 20518 0 IN IP4 203.0.113.1
+      // NB: sessionId will be a String in most cases because it is huge
+      name: "origin",
+      reg: /^(\S*) (\d*) (\d*) (\S*) IP(\d) (\S*)/,
+      names: ["username", "sessionId", "sessionVersion", "netType", "ipVer", "address"],
+      format: "%s %s %d %s IP%d %s"
+    }],
+    // default parsing of these only (though some of these feel outdated)
+    s: [{ name: "name" }],
+    i: [{ name: "description" }],
+    u: [{ name: "uri" }],
+    e: [{ name: "email" }],
+    p: [{ name: "phone" }],
+    z: [{ name: "timezones" }],
+    // TODO: this one can actually be parsed properly...
+    r: [{ name: "repeats" }],
+    // TODO: this one can also be parsed properly
+    // k: [{}], // outdated thing ignored
+    t: [{
+      // t=0 0
+      name: "timing",
+      reg: /^(\d*) (\d*)/,
+      names: ["start", "stop"],
+      format: "%d %d"
+    }],
+    c: [{
+      // c=IN IP4 10.47.197.26
+      name: "connection",
+      reg: /^IN IP(\d) (\S*)/,
+      names: ["version", "ip"],
+      format: "IN IP%d %s"
+    }],
+    b: [{
+      // b=AS:4000
+      push: "bandwidth",
+      reg: /^(TIAS|AS|CT|RR|RS):(\d*)/,
+      names: ["type", "limit"],
+      format: "%s:%s"
+    }],
+    m: [{
+      // m=video 51744 RTP/AVP 126 97 98 34 31
+      // NB: special - pushes to session
+      // TODO: rtp/fmtp should be filtered by the payloads found here?
+      reg: /^(\w*) (\d*) ([\w/]*)(?: (.*))?/,
+      names: ["type", "port", "protocol", "payloads"],
+      format: "%s %d %s %s"
+    }],
+    a: [
+      {
+        // a=rtpmap:110 opus/48000/2
+        push: "rtp",
+        reg: /^rtpmap:(\d*) ([\w\-.]*)(?:\s*\/(\d*)(?:\s*\/(\S*))?)?/,
+        names: ["payload", "codec", "rate", "encoding"],
+        format: function(o) {
+          return o.encoding ? "rtpmap:%d %s/%s/%s" : o.rate ? "rtpmap:%d %s/%s" : "rtpmap:%d %s";
+        }
+      },
+      {
+        // a=fmtp:108 profile-level-id=24;object=23;bitrate=64000
+        // a=fmtp:111 minptime=10; useinbandfec=1
+        push: "fmtp",
+        reg: /^fmtp:(\d*) ([\S| ]*)/,
+        names: ["payload", "config"],
+        format: "fmtp:%d %s"
+      },
+      {
+        // a=control:streamid=0
+        name: "control",
+        reg: /^control:(.*)/,
+        format: "control:%s"
+      },
+      {
+        // a=rtcp:65179 IN IP4 193.84.77.194
+        name: "rtcp",
+        reg: /^rtcp:(\d*)(?: (\S*) IP(\d) (\S*))?/,
+        names: ["port", "netType", "ipVer", "address"],
+        format: function(o) {
+          return o.address != null ? "rtcp:%d %s IP%d %s" : "rtcp:%d";
+        }
+      },
+      {
+        // a=rtcp-fb:98 trr-int 100
+        push: "rtcpFbTrrInt",
+        reg: /^rtcp-fb:(\*|\d*) trr-int (\d*)/,
+        names: ["payload", "value"],
+        format: "rtcp-fb:%s trr-int %d"
+      },
+      {
+        // a=rtcp-fb:98 nack rpsi
+        push: "rtcpFb",
+        reg: /^rtcp-fb:(\*|\d*) ([\w-_]*)(?: ([\w-_]*))?/,
+        names: ["payload", "type", "subtype"],
+        format: function(o) {
+          return o.subtype != null ? "rtcp-fb:%s %s %s" : "rtcp-fb:%s %s";
+        }
+      },
+      {
+        // a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
+        // a=extmap:1/recvonly URI-gps-string
+        // a=extmap:3 urn:ietf:params:rtp-hdrext:encrypt urn:ietf:params:rtp-hdrext:smpte-tc 25@600/24
+        push: "ext",
+        reg: /^extmap:(\d+)(?:\/(\w+))?(?: (urn:ietf:params:rtp-hdrext:encrypt))? (\S*)(?: (\S*))?/,
+        names: ["value", "direction", "encrypt-uri", "uri", "config"],
+        format: function(o) {
+          return "extmap:%d" + (o.direction ? "/%s" : "%v") + (o["encrypt-uri"] ? " %s" : "%v") + " %s" + (o.config ? " %s" : "");
+        }
+      },
+      {
+        // a=extmap-allow-mixed
+        name: "extmapAllowMixed",
+        reg: /^(extmap-allow-mixed)/
+      },
+      {
+        // a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:PS1uQCVeeCFCanVmcjkpPywjNWhcYD0mXXtxaVBR|2^20|1:32
+        push: "crypto",
+        reg: /^crypto:(\d*) ([\w_]*) (\S*)(?: (\S*))?/,
+        names: ["id", "suite", "config", "sessionConfig"],
+        format: function(o) {
+          return o.sessionConfig != null ? "crypto:%d %s %s %s" : "crypto:%d %s %s";
+        }
+      },
+      {
+        // a=setup:actpass
+        name: "setup",
+        reg: /^setup:(\w*)/,
+        format: "setup:%s"
+      },
+      {
+        // a=connection:new
+        name: "connectionType",
+        reg: /^connection:(new|existing)/,
+        format: "connection:%s"
+      },
+      {
+        // a=mid:1
+        name: "mid",
+        reg: /^mid:([^\s]*)/,
+        format: "mid:%s"
+      },
+      {
+        // a=msid:0c8b064d-d807-43b4-b434-f92a889d8587 98178685-d409-46e0-8e16-7ef0db0db64a
+        name: "msid",
+        reg: /^msid:(.*)/,
+        format: "msid:%s"
+      },
+      {
+        // a=ptime:20
+        name: "ptime",
+        reg: /^ptime:(\d*(?:\.\d*)*)/,
+        format: "ptime:%d"
+      },
+      {
+        // a=maxptime:60
+        name: "maxptime",
+        reg: /^maxptime:(\d*(?:\.\d*)*)/,
+        format: "maxptime:%d"
+      },
+      {
+        // a=sendrecv
+        name: "direction",
+        reg: /^(sendrecv|recvonly|sendonly|inactive)/
+      },
+      {
+        // a=ice-lite
+        name: "icelite",
+        reg: /^(ice-lite)/
+      },
+      {
+        // a=ice-ufrag:F7gI
+        name: "iceUfrag",
+        reg: /^ice-ufrag:(\S*)/,
+        format: "ice-ufrag:%s"
+      },
+      {
+        // a=ice-pwd:x9cml/YzichV2+XlhiMu8g
+        name: "icePwd",
+        reg: /^ice-pwd:(\S*)/,
+        format: "ice-pwd:%s"
+      },
+      {
+        // a=fingerprint:SHA-1 00:11:22:33:44:55:66:77:88:99:AA:BB:CC:DD:EE:FF:00:11:22:33
+        name: "fingerprint",
+        reg: /^fingerprint:(\S*) (\S*)/,
+        names: ["type", "hash"],
+        format: "fingerprint:%s %s"
+      },
+      {
+        // a=candidate:0 1 UDP 2113667327 203.0.113.1 54400 typ host
+        // a=candidate:1162875081 1 udp 2113937151 192.168.34.75 60017 typ host generation 0 network-id 3 network-cost 10
+        // a=candidate:3289912957 2 udp 1845501695 193.84.77.194 60017 typ srflx raddr 192.168.34.75 rport 60017 generation 0 network-id 3 network-cost 10
+        // a=candidate:229815620 1 tcp 1518280447 192.168.150.19 60017 typ host tcptype active generation 0 network-id 3 network-cost 10
+        // a=candidate:3289912957 2 tcp 1845501695 193.84.77.194 60017 typ srflx raddr 192.168.34.75 rport 60017 tcptype passive generation 0 network-id 3 network-cost 10
+        push: "candidates",
+        reg: /^candidate:(\S*) (\d*) (\S*) (\d*) (\S*) (\d*) typ (\S*)(?: raddr (\S*) rport (\d*))?(?: tcptype (\S*))?(?: generation (\d*))?(?: network-id (\d*))?(?: network-cost (\d*))?/,
+        names: ["foundation", "component", "transport", "priority", "ip", "port", "type", "raddr", "rport", "tcptype", "generation", "network-id", "network-cost"],
+        format: function(o) {
+          var str = "candidate:%s %d %s %d %s %d typ %s";
+          str += o.raddr != null ? " raddr %s rport %d" : "%v%v";
+          str += o.tcptype != null ? " tcptype %s" : "%v";
+          if (o.generation != null) {
+            str += " generation %d";
+          }
+          str += o["network-id"] != null ? " network-id %d" : "%v";
+          str += o["network-cost"] != null ? " network-cost %d" : "%v";
+          return str;
+        }
+      },
+      {
+        // a=end-of-candidates (keep after the candidates line for readability)
+        name: "endOfCandidates",
+        reg: /^(end-of-candidates)/
+      },
+      {
+        // a=remote-candidates:1 203.0.113.1 54400 2 203.0.113.1 54401 ...
+        name: "remoteCandidates",
+        reg: /^remote-candidates:(.*)/,
+        format: "remote-candidates:%s"
+      },
+      {
+        // a=ice-options:google-ice
+        name: "iceOptions",
+        reg: /^ice-options:(\S*)/,
+        format: "ice-options:%s"
+      },
+      {
+        // a=ssrc:2566107569 cname:t9YU8M1UxTF8Y1A1
+        push: "ssrcs",
+        reg: /^ssrc:(\d*) ([\w_-]*)(?::(.*))?/,
+        names: ["id", "attribute", "value"],
+        format: function(o) {
+          var str = "ssrc:%d";
+          if (o.attribute != null) {
+            str += " %s";
+            if (o.value != null) {
+              str += ":%s";
+            }
+          }
+          return str;
+        }
+      },
+      {
+        // a=ssrc-group:FEC 1 2
+        // a=ssrc-group:FEC-FR 3004364195 1080772241
+        push: "ssrcGroups",
+        // token-char = %x21 / %x23-27 / %x2A-2B / %x2D-2E / %x30-39 / %x41-5A / %x5E-7E
+        reg: /^ssrc-group:([\x21\x23\x24\x25\x26\x27\x2A\x2B\x2D\x2E\w]*) (.*)/,
+        names: ["semantics", "ssrcs"],
+        format: "ssrc-group:%s %s"
+      },
+      {
+        // a=msid-semantic: WMS Jvlam5X3SX1OP6pn20zWogvaKJz5Hjf9OnlV
+        name: "msidSemantic",
+        reg: /^msid-semantic:\s?(\w*) (\S*)/,
+        names: ["semantic", "token"],
+        format: "msid-semantic: %s %s"
+        // space after ':' is not accidental
+      },
+      {
+        // a=group:BUNDLE audio video
+        push: "groups",
+        reg: /^group:(\w*) (.*)/,
+        names: ["type", "mids"],
+        format: "group:%s %s"
+      },
+      {
+        // a=rtcp-mux
+        name: "rtcpMux",
+        reg: /^(rtcp-mux)/
+      },
+      {
+        // a=rtcp-rsize
+        name: "rtcpRsize",
+        reg: /^(rtcp-rsize)/
+      },
+      {
+        // a=sctpmap:5000 webrtc-datachannel 1024
+        name: "sctpmap",
+        reg: /^sctpmap:([\w_/]*) (\S*)(?: (\S*))?/,
+        names: ["sctpmapNumber", "app", "maxMessageSize"],
+        format: function(o) {
+          return o.maxMessageSize != null ? "sctpmap:%s %s %s" : "sctpmap:%s %s";
+        }
+      },
+      {
+        // a=x-google-flag:conference
+        name: "xGoogleFlag",
+        reg: /^x-google-flag:([^\s]*)/,
+        format: "x-google-flag:%s"
+      },
+      {
+        // a=rid:1 send max-width=1280;max-height=720;max-fps=30;depend=0
+        push: "rids",
+        reg: /^rid:([\d\w]+) (\w+)(?: ([\S| ]*))?/,
+        names: ["id", "direction", "params"],
+        format: function(o) {
+          return o.params ? "rid:%s %s %s" : "rid:%s %s";
+        }
+      },
+      {
+        // a=imageattr:97 send [x=800,y=640,sar=1.1,q=0.6] [x=480,y=320] recv [x=330,y=250]
+        // a=imageattr:* send [x=800,y=640] recv *
+        // a=imageattr:100 recv [x=320,y=240]
+        push: "imageattrs",
+        reg: new RegExp(
+          // a=imageattr:97
+          "^imageattr:(\\d+|\\*)[\\s\\t]+(send|recv)[\\s\\t]+(\\*|\\[\\S+\\](?:[\\s\\t]+\\[\\S+\\])*)(?:[\\s\\t]+(recv|send)[\\s\\t]+(\\*|\\[\\S+\\](?:[\\s\\t]+\\[\\S+\\])*))?"
+        ),
+        names: ["pt", "dir1", "attrs1", "dir2", "attrs2"],
+        format: function(o) {
+          return "imageattr:%s %s %s" + (o.dir2 ? " %s %s" : "");
+        }
+      },
+      {
+        // a=simulcast:send 1,2,3;~4,~5 recv 6;~7,~8
+        // a=simulcast:recv 1;4,5 send 6;7
+        name: "simulcast",
+        reg: new RegExp(
+          // a=simulcast:
+          "^simulcast:(send|recv) ([a-zA-Z0-9\\-_~;,]+)(?:\\s?(send|recv) ([a-zA-Z0-9\\-_~;,]+))?$"
+        ),
+        names: ["dir1", "list1", "dir2", "list2"],
+        format: function(o) {
+          return "simulcast:%s %s" + (o.dir2 ? " %s %s" : "");
+        }
+      },
+      {
+        // old simulcast draft 03 (implemented by Firefox)
+        //   https://tools.ietf.org/html/draft-ietf-mmusic-sdp-simulcast-03
+        // a=simulcast: recv pt=97;98 send pt=97
+        // a=simulcast: send rid=5;6;7 paused=6,7
+        name: "simulcast_03",
+        reg: /^simulcast:[\s\t]+([\S+\s\t]+)$/,
+        names: ["value"],
+        format: "simulcast: %s"
+      },
+      {
+        // a=framerate:25
+        // a=framerate:29.97
+        name: "framerate",
+        reg: /^framerate:(\d+(?:$|\.\d+))/,
+        format: "framerate:%s"
+      },
+      {
+        // RFC4570
+        // a=source-filter: incl IN IP4 239.5.2.31 10.1.15.5
+        name: "sourceFilter",
+        reg: /^source-filter: *(excl|incl) (\S*) (IP4|IP6|\*) (\S*) (.*)/,
+        names: ["filterMode", "netType", "addressTypes", "destAddress", "srcList"],
+        format: "source-filter: %s %s %s %s %s"
+      },
+      {
+        // a=bundle-only
+        name: "bundleOnly",
+        reg: /^(bundle-only)/
+      },
+      {
+        // a=label:1
+        name: "label",
+        reg: /^label:(.+)/,
+        format: "label:%s"
+      },
+      {
+        // RFC version 26 for SCTP over DTLS
+        // https://tools.ietf.org/html/draft-ietf-mmusic-sctp-sdp-26#section-5
+        name: "sctpPort",
+        reg: /^sctp-port:(\d+)$/,
+        format: "sctp-port:%s"
+      },
+      {
+        // RFC version 26 for SCTP over DTLS
+        // https://tools.ietf.org/html/draft-ietf-mmusic-sctp-sdp-26#section-6
+        name: "maxMessageSize",
+        reg: /^max-message-size:(\d+)$/,
+        format: "max-message-size:%s"
+      },
+      {
+        // RFC7273
+        // a=ts-refclk:ptp=IEEE1588-2008:39-A7-94-FF-FE-07-CB-D0:37
+        push: "tsRefClocks",
+        reg: /^ts-refclk:([^\s=]*)(?:=(\S*))?/,
+        names: ["clksrc", "clksrcExt"],
+        format: function(o) {
+          return "ts-refclk:%s" + (o.clksrcExt != null ? "=%s" : "");
+        }
+      },
+      {
+        // RFC7273
+        // a=mediaclk:direct=963214424
+        name: "mediaClk",
+        reg: /^mediaclk:(?:id=(\S*))? *([^\s=]*)(?:=(\S*))?(?: *rate=(\d+)\/(\d+))?/,
+        names: ["id", "mediaClockName", "mediaClockValue", "rateNumerator", "rateDenominator"],
+        format: function(o) {
+          var str = "mediaclk:";
+          str += o.id != null ? "id=%s %s" : "%v%s";
+          str += o.mediaClockValue != null ? "=%s" : "";
+          str += o.rateNumerator != null ? " rate=%s" : "";
+          str += o.rateDenominator != null ? "/%s" : "";
+          return str;
+        }
+      },
+      {
+        // a=keywds:keywords
+        name: "keywords",
+        reg: /^keywds:(.+)$/,
+        format: "keywds:%s"
+      },
+      {
+        // a=content:main
+        name: "content",
+        reg: /^content:(.+)/,
+        format: "content:%s"
+      },
+      // BFCP https://tools.ietf.org/html/rfc4583
+      {
+        // a=floorctrl:c-s
+        name: "bfcpFloorCtrl",
+        reg: /^floorctrl:(c-only|s-only|c-s)/,
+        format: "floorctrl:%s"
+      },
+      {
+        // a=confid:1
+        name: "bfcpConfId",
+        reg: /^confid:(\d+)/,
+        format: "confid:%s"
+      },
+      {
+        // a=userid:1
+        name: "bfcpUserId",
+        reg: /^userid:(\d+)/,
+        format: "userid:%s"
+      },
+      {
+        // a=floorid:1
+        name: "bfcpFloorId",
+        reg: /^floorid:(.+) (?:m-stream|mstrm):(.+)/,
+        names: ["id", "mStream"],
+        format: "floorid:%s mstrm:%s"
+      },
+      {
+        // any a= that we don't understand is kept verbatim on media.invalid
+        push: "invalid",
+        names: ["value"]
+      }
+    ]
+  };
+  Object.keys(grammar$1).forEach(function(key) {
+    var objs = grammar$1[key];
+    objs.forEach(function(obj) {
+      if (!obj.reg) {
+        obj.reg = /(.*)/;
+      }
+      if (!obj.format) {
+        obj.format = "%s";
+      }
+    });
+  });
+  return grammar.exports;
+}
+var hasRequiredParser;
+function requireParser() {
+  if (hasRequiredParser) return parser;
+  hasRequiredParser = 1;
+  (function(exports) {
+    var toIntIfInt = function(v) {
+      return String(Number(v)) === v ? Number(v) : v;
+    };
+    var attachProperties = function(match, location, names, rawName) {
+      if (rawName && !names) {
+        location[rawName] = toIntIfInt(match[1]);
+      } else {
+        for (var i = 0; i < names.length; i += 1) {
+          if (match[i + 1] != null) {
+            location[names[i]] = toIntIfInt(match[i + 1]);
+          }
+        }
+      }
+    };
+    var parseReg = function(obj, location, content) {
+      var needsBlank = obj.name && obj.names;
+      if (obj.push && !location[obj.push]) {
+        location[obj.push] = [];
+      } else if (needsBlank && !location[obj.name]) {
+        location[obj.name] = {};
+      }
+      var keyLocation = obj.push ? {} : (
+        // blank object that will be pushed
+        needsBlank ? location[obj.name] : location
+      );
+      attachProperties(content.match(obj.reg), keyLocation, obj.names, obj.name);
+      if (obj.push) {
+        location[obj.push].push(keyLocation);
+      }
+    };
+    var grammar2 = requireGrammar();
+    var validLine = RegExp.prototype.test.bind(/^([a-z])=(.*)/);
+    exports.parse = function(sdp2) {
+      var session = {}, media = [], location = session;
+      sdp2.split(/(\r\n|\r|\n)/).filter(validLine).forEach(function(l) {
+        var type = l[0];
+        var content = l.slice(2);
+        if (type === "m") {
+          media.push({ rtp: [], fmtp: [] });
+          location = media[media.length - 1];
+        }
+        for (var j = 0; j < (grammar2[type] || []).length; j += 1) {
+          var obj = grammar2[type][j];
+          if (obj.reg.test(content)) {
+            return parseReg(obj, location, content);
+          }
+        }
+      });
+      session.media = media;
+      return session;
+    };
+    var paramReducer = function(acc, expr) {
+      var s = expr.split(/=(.+)/, 2);
+      if (s.length === 2) {
+        acc[s[0]] = toIntIfInt(s[1]);
+      } else if (s.length === 1 && expr.length > 1) {
+        acc[s[0]] = void 0;
+      }
+      return acc;
+    };
+    exports.parseParams = function(str) {
+      return str.split(/;\s?/).reduce(paramReducer, {});
+    };
+    exports.parseFmtpConfig = exports.parseParams;
+    exports.parsePayloads = function(str) {
+      return str.toString().split(" ").map(Number);
+    };
+    exports.parseRemoteCandidates = function(str) {
+      var candidates = [];
+      var parts = str.split(" ").map(toIntIfInt);
+      for (var i = 0; i < parts.length; i += 3) {
+        candidates.push({
+          component: parts[i],
+          ip: parts[i + 1],
+          port: parts[i + 2]
+        });
+      }
+      return candidates;
+    };
+    exports.parseImageAttributes = function(str) {
+      return str.split(" ").map(function(item) {
+        return item.substring(1, item.length - 1).split(",").reduce(paramReducer, {});
+      });
+    };
+    exports.parseSimulcastStreamList = function(str) {
+      return str.split(";").map(function(stream) {
+        return stream.split(",").map(function(format) {
+          var scid, paused = false;
+          if (format[0] !== "~") {
+            scid = toIntIfInt(format);
+          } else {
+            scid = toIntIfInt(format.substring(1, format.length));
+            paused = true;
+          }
+          return {
+            scid,
+            paused
+          };
+        });
+      });
+    };
+  })(parser);
+  return parser;
+}
+var writer;
+var hasRequiredWriter;
+function requireWriter() {
+  if (hasRequiredWriter) return writer;
+  hasRequiredWriter = 1;
+  var grammar2 = requireGrammar();
+  var formatRegExp = /%[sdv%]/g;
+  var format = function(formatStr) {
+    var i = 1;
+    var args = arguments;
+    var len = args.length;
+    return formatStr.replace(formatRegExp, function(x) {
+      if (i >= len) {
+        return x;
+      }
+      var arg = args[i];
+      i += 1;
+      switch (x) {
+        case "%%":
+          return "%";
+        case "%s":
+          return String(arg);
+        case "%d":
+          return Number(arg);
+        case "%v":
+          return "";
+      }
+    });
+  };
+  var makeLine = function(type, obj, location) {
+    var str = obj.format instanceof Function ? obj.format(obj.push ? location : location[obj.name]) : obj.format;
+    var args = [type + "=" + str];
+    if (obj.names) {
+      for (var i = 0; i < obj.names.length; i += 1) {
+        var n = obj.names[i];
+        if (obj.name) {
+          args.push(location[obj.name][n]);
+        } else {
+          args.push(location[obj.names[i]]);
+        }
+      }
+    } else {
+      args.push(location[obj.name]);
+    }
+    return format.apply(null, args);
+  };
+  var defaultOuterOrder = [
+    "v",
+    "o",
+    "s",
+    "i",
+    "u",
+    "e",
+    "p",
+    "c",
+    "b",
+    "t",
+    "r",
+    "z",
+    "a"
+  ];
+  var defaultInnerOrder = ["i", "c", "b", "a"];
+  writer = function(session, opts) {
+    opts = opts || {};
+    if (session.version == null) {
+      session.version = 0;
+    }
+    if (session.name == null) {
+      session.name = " ";
+    }
+    session.media.forEach(function(mLine) {
+      if (mLine.payloads == null) {
+        mLine.payloads = "";
+      }
+    });
+    var outerOrder = opts.outerOrder || defaultOuterOrder;
+    var innerOrder = opts.innerOrder || defaultInnerOrder;
+    var sdp2 = [];
+    outerOrder.forEach(function(type) {
+      grammar2[type].forEach(function(obj) {
+        if (obj.name in session && session[obj.name] != null) {
+          sdp2.push(makeLine(type, obj, session));
+        } else if (obj.push in session && session[obj.push] != null) {
+          session[obj.push].forEach(function(el) {
+            sdp2.push(makeLine(type, obj, el));
+          });
+        }
+      });
+    });
+    session.media.forEach(function(mLine) {
+      sdp2.push(makeLine("m", grammar2.m[0], mLine));
+      innerOrder.forEach(function(type) {
+        grammar2[type].forEach(function(obj) {
+          if (obj.name in mLine && mLine[obj.name] != null) {
+            sdp2.push(makeLine(type, obj, mLine));
+          } else if (obj.push in mLine && mLine[obj.push] != null) {
+            mLine[obj.push].forEach(function(el) {
+              sdp2.push(makeLine(type, obj, el));
+            });
+          }
+        });
+      });
+    });
+    return sdp2.join("\r\n") + "\r\n";
+  };
+  return writer;
+}
+var hasRequiredLib;
+function requireLib() {
+  if (hasRequiredLib) return lib;
+  hasRequiredLib = 1;
+  var parser2 = requireParser();
+  var writer2 = requireWriter();
+  var grammar2 = requireGrammar();
+  lib.grammar = grammar2;
+  lib.write = writer2;
+  lib.parse = parser2.parse;
+  lib.parseParams = parser2.parseParams;
+  lib.parseFmtpConfig = parser2.parseFmtpConfig;
+  lib.parsePayloads = parser2.parsePayloads;
+  lib.parseRemoteCandidates = parser2.parseRemoteCandidates;
+  lib.parseImageAttributes = parser2.parseImageAttributes;
+  lib.parseSimulcastStreamList = parser2.parseSimulcastStreamList;
+  return lib;
+}
+var libExports = requireLib();
+const sdpTransform = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
 const setRemoteDescriptionWithHandleOffer = (peerConnection, sdp2, sendAnswer, onError) => {
   const description = new RTCSessionDescription({ type: "offer", sdp: sdp2 });
   peerConnection.setRemoteDescription(description).then(() => createAnswer(peerConnection, sendAnswer, onError)).catch((error) => onError == null ? void 0 : onError(createWebRtcError(FailCode.HANDLE_OFFER, error)));
 };
 const createAnswer = (peerConnection, sendAnswer, onError) => {
-  peerConnection.createAnswer().then((answer) => setLocalDescriptionWithCreateAnswer(peerConnection, answer, sendAnswer, onError)).catch((error) => onError == null ? void 0 : onError(createWebRtcError(FailCode.CREATE_ANSWER, error)));
+  peerConnection.createAnswer().then((answer) => {
+    const modifiedSdp = modifySdp(answer.sdp ?? "");
+    setLocalDescriptionWithCreateAnswer(peerConnection, modifiedSdp, sendAnswer, onError);
+  }).catch((error) => onError == null ? void 0 : onError(createWebRtcError(FailCode.CREATE_ANSWER, error)));
 };
-const setLocalDescriptionWithCreateAnswer = (peerConnection, answer, sendAnswer, onError) => {
+const setLocalDescriptionWithCreateAnswer = (peerConnection, sdp2, sendAnswer, onError) => {
+  const answer = new RTCSessionDescription({ type: "answer", sdp: sdp2 });
   peerConnection.setLocalDescription(answer).then(() => {
-    sendAnswer == null ? void 0 : sendAnswer(answer.sdp ?? "");
+    sendAnswer == null ? void 0 : sendAnswer(sdp2 ?? "");
   }).catch((error) => {
     onError == null ? void 0 : onError(createWebRtcError(FailCode.LOCAL_DES, error));
-    console.log("21321322212213");
   });
 };
+const modifySdp = (sdp2) => {
+  let parsedSdp = sdpTransform.parse(sdp2);
+  parsedSdp.media.forEach((media) => {
+    var _a, _b;
+    if (media.type === "video") {
+      const allowedCodec = "H264";
+      const h264Payloads = media.rtp.filter((rtp) => rtp.codec.toUpperCase() === allowedCodec).map((rtp) => rtp.payload);
+      media.rtp = media.rtp.filter((rtp) => h264Payloads.includes(rtp.payload));
+      media.fmtp = ((_a = media.fmtp) == null ? void 0 : _a.filter((fmtp) => h264Payloads.includes(fmtp.payload))) || [];
+      media.rtcpFb = ((_b = media.rtcpFb) == null ? void 0 : _b.filter((fb) => h264Payloads.includes(fb.payload))) || [];
+      media.payloads = h264Payloads.join(" ");
+      const targetBitrate = 800;
+      if (media.fmtp.length > 0) {
+        media.fmtp.forEach((fmtp) => {
+          if (!fmtp.config.includes("x-google-start-bitrate")) {
+            fmtp.config += `;x-google-start-bitrate=${targetBitrate}`;
+          }
+          if (!fmtp.config.includes("x-google-max-bitrate")) {
+            fmtp.config += `;x-google-max-bitrate=${targetBitrate}`;
+          }
+          if (!fmtp.config.includes("x-google-min-bitrate")) {
+            fmtp.config += `;x-google-min-bitrate=${targetBitrate}`;
+          }
+        });
+      }
+    }
+    if (!media.rtcpFb) media.rtcpFb = [];
+    const payloads = (media.payloads || "").split(" ").map(Number).filter((n) => !isNaN(n));
+    payloads.forEach((pt) => {
+      if (!media.rtcpFb.some((fb) => fb.payload === pt && fb.type === "nack")) {
+        media.rtcpFb.push({ payload: pt, type: "nack" });
+      }
+      if (!media.rtcpFb.some((fb) => fb.payload === pt && fb.type === "nack" && fb.subtype === "pli")) {
+        media.rtcpFb.push({ payload: pt, type: "nack", subtype: "pli" });
+      }
+    });
+    if (media.fmtp) {
+      media.fmtp.forEach((fmtp) => {
+        if (!fmtp.config.includes("useinbandfec=1")) {
+          fmtp.config += ";useinbandfec=1";
+        }
+      });
+    }
+  });
+  return sdpTransform.write(parsedSdp);
+};
 const createPeerConnection = (config) => {
   const iceServers = [
     { urls: config.stunServerUri },
@@ -3023,8 +3807,7 @@ const createPeerConnection = (config) => {
     iceServers,
     iceTransportPolicy: "all",
     bundlePolicy: "max-bundle",
-    rtcpMuxPolicy: "require",
-    iceCandidatePoolSize: 10
+    rtcpMuxPolicy: "require"
   };
   return new RTCPeerConnection(peerConnectionConfig);
 };
@@ -3045,14 +3828,14 @@ const configPeerConnection = (peerConnection, onICEMessage, onTrack, onConnectSt
     if (!state) {
       return;
     }
-    if (state === "failed") {
+    if (state === "failed" || state === "disconnected") {
       onError == null ? void 0 : onError(createWebRtcError(FailCode.ICE_STATE, "failed"));
     }
     onConnectState == null ? void 0 : onConnectState(state);
   };
   peerConnection.ontrack = (event) => {
     const track = event.track;
-    track.contentHint = "detail";
+    track.contentHint = "motion";
     onTrack == null ? void 0 : onTrack(track);
   };
 };
@@ -3078,8 +3861,20 @@ var ChannelDataType = /* @__PURE__ */ ((ChannelDataType2) => {
   ChannelDataType2["ActionRequestCloudDeviceInfo"] = "ActionRequestCloudDeviceInfo";
   ChannelDataType2["ActionClarity"] = "ActionClarity";
   ChannelDataType2["ActionWheel"] = "ActionWheel";
+  ChannelDataType2["CloudClipData"] = "CloudClipData";
+  ChannelDataType2["ActionCommandEvent"] = "ActionCommandEvent";
+  ChannelDataType2["ActionUpdateCloudStatus"] = "ActionUpdateCloudStatus";
+  ChannelDataType2["ActionGesture"] = "ActionGesture";
   return ChannelDataType2;
 })(ChannelDataType || {});
+var ActionCommandType = /* @__PURE__ */ ((ActionCommandType2) => {
+  ActionCommandType2["ActionBack"] = "ActionBack";
+  ActionCommandType2["ActionHome"] = "ActionHome";
+  ActionCommandType2["ActionRecent"] = "ActionRecent";
+  ActionCommandType2["ActionSwitchNavButtons"] = "ActionSwitchNavButtons";
+  ActionCommandType2["ActionSwitchNavGestural"] = "ActionSwitchNavGestural";
+  return ActionCommandType2;
+})(ActionCommandType || {});
 const ActionType = {
   ACTION_DOWN: 0,
   ACTION_MOVE: 2,
@@ -3129,6 +3924,12 @@ class KeyEventData {
     this.meta = meta;
   }
 }
+class GestureData {
+  constructor(mode) {
+    __publicField(this, "mode");
+    this.mode = mode;
+  }
+}
 class ChannelData {
   constructor(type, data = null) {
     __publicField(this, "type");
@@ -3155,6 +3956,9 @@ class ChannelData {
   static click(touchData) {
     return new ChannelData("ClickData", this.formatData(touchData));
   }
+  static action(actionData) {
+    return new ChannelData("ActionCommand", this.formatData(actionData));
+  }
   /**
    * 生成剪贴板数据
    * @param data 剪贴板数据，可以是字符串或其他类型
@@ -3176,6 +3980,13 @@ class ChannelData {
   static wheel(data) {
     return new ChannelData("ActionWheel", this.formatData(data));
   }
+  /**
+   * 切换手势模式数据
+   * @param data 输入数据对象
+   */
+  static gesture(data) {
+    return new ChannelData("ActionGesture", this.formatData(data));
+  }
   /**
    * 生成中文输入数据
    * @param data 中文输入数据
@@ -3262,6 +4073,12 @@ class WebRTCClient extends EventEmitter {
         case ChannelDataType.ActionWheel:
           channelData = ChannelData.wheel(data);
           break;
+        case ChannelDataType.ActionGesture:
+          channelData = ChannelData.gesture(data);
+          break;
+        case ChannelDataType.ActionCommand:
+          channelData = ChannelData.action(data);
+          break;
       }
       if (channelData) {
         const jsonString = JSON.stringify(channelData);
@@ -3409,20 +4226,23 @@ class WebRTCClient extends EventEmitter {
   }
   handleDataChannelMessage(event) {
     const data = JSON.parse(event.data);
-    if (data.type === "ActionCommandEvent") {
+    if (data.type === ChannelDataType.ActionCommandEvent) {
       const { action, value } = JSON.parse(data.data);
       if (action === "ACTION_CONTROL_VIDEO") {
         value === "ENABLE" ? this.startPush() : this.stopPush();
       }
-    } else if (data.type === "ActionUpdateCloudStatus") {
-      const { rotation, screenWidth, screenHeight } = JSON.parse(data.data);
+    } else if (data.type === ChannelDataType.ActionUpdateCloudStatus) {
+      const { rotation, screenWidth, screenHeight, gestureMode } = JSON.parse(data.data);
       const direction = [StreamRotation.ROTATION_0, StreamRotation.ROTATION_180].includes(rotation) ? ContainerDirection.Vertical : ContainerDirection.Horizontal;
       const cloudStatus = {
         direction,
         screenWidth,
-        screenHeight
+        screenHeight,
+        gestureMode
       };
       this.emit(EmitType.cloudStatusChanged, cloudStatus);
+    } else if (data.type === ChannelDataType.CloudClipData) {
+      this.emit(EmitType.cloudClipData, data.data);
     }
   }
   checkStats() {
@@ -3441,6 +4261,7 @@ class WebRTCClient extends EventEmitter {
       let bytesReceived = 0;
       let framesDecoded = 0;
       let pliCount = 0;
+      let framesReceived = 0;
       let connectionType = "";
       const currentTime = Date.now();
       statsReport.forEach((report) => {
@@ -3452,6 +4273,7 @@ class WebRTCClient extends EventEmitter {
             videoFps = report.framesPerSecond || 0;
             totalDecodeTime = report.totalDecodeTime || 0;
             framesDecoded = report.framesDecoded || 0;
+            framesReceived = report.framesReceived || 0;
             pliCount = (report.pliCount || 0) + (report.firCount || 0);
           }
         }
@@ -3494,7 +4316,9 @@ class WebRTCClient extends EventEmitter {
         // percent
         bitrate,
         pliCount,
-        averageDecodeTime
+        averageDecodeTime,
+        framesDecoded,
+        framesReceived
       };
       this.emit(EmitType.statisticInfo, screenInfo);
     }).catch((error) => {
@@ -3523,9 +4347,9 @@ class WebRTCSdk extends EventEmitter {
           this.config.myId = message.myId;
           break;
         case MessageType.Offer:
-          console.log("handleSignaling===>", message);
           if (message.senderId && message.sdp) {
             this.config.targetId = message.senderId;
+            console.log("MessageType.Offer===>", message.senderId);
             this.webRTCClient.handleOffer(message.sdp);
           }
           break;
@@ -3558,6 +4382,10 @@ class WebRTCSdk extends EventEmitter {
         case MessageType.Ping:
           this.sendPong();
           break;
+        case MessageType.SendScreenshot:
+          const base64Str = `data:image/png;base64,${message.screenshot}`;
+          this.emit(EmitType.screenshot, { "room_id": this.config.roomId, "base64": base64Str });
+          break;
       }
     });
     /** 发送 Offer 信令 */
@@ -3621,6 +4449,10 @@ class WebRTCSdk extends EventEmitter {
       EmitType.cloudStatusChanged,
       (info) => this.emit(EmitType.cloudStatusChanged, info)
     );
+    this.webRTCClient.on(
+      EmitType.cloudClipData,
+      (clipData) => this.emit(EmitType.cloudClipData, clipData)
+    );
     this.webRTCClient.on(EmitType.webrtcError, (err) => {
       this.emit(EmitType.webrtcError, err);
     });
@@ -3640,16 +4472,14 @@ class WebRTCSdk extends EventEmitter {
   }
   /** 开始推流：触发媒体采集与轨道添加 */
   async startPush() {
-    try {
-      await this.webRTCClient.readyCapture();
-    } catch (error) {
-      this.emit("error", { type: "camera", error });
-    }
   }
   /** 发送信道数据 */
   sendChannelData(type, data) {
     this.webRTCClient.sendChannelData(type, data);
   }
+  sendRequestScreenshot(visible) {
+    this.signalingClient.sendRequestScreenshot(visible);
+  }
   sendPong() {
     const message = {
       type: SendType.Pong
@@ -3794,10 +4624,10 @@ const KeyCodeMap = {
 };
 const getKeyEventData = (event) => {
   const keyCode = KeyCodeMap[event.code] ?? -1;
-  const metaState = computeAndroidMetaState(event);
+  const meta = computeAndroidMetaState(event);
   return {
-    androidKeyCode: keyCode,
-    metaState
+    keyCode,
+    meta
   };
 };
 function transformCoordinate(viewWidth, viewHeight, cloudWidth, cloudHeight, viewAngle, streamAngle, inputX, inputY) {
@@ -3870,6 +4700,85 @@ function rotatePoint90(width, height, inputX, inputY) {
   const yRotated = -x0 + offsetShortSide;
   return [xRotated, yRotated];
 }
+class GroupControllerManager extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "webRTCConfigList", []);
+    __publicField(this, "sdkList", []);
+    __publicField(this, "loopTimer", null);
+    __publicField(this, "visibilityMap", /* @__PURE__ */ new Map());
+    __publicField(this, "previousVisibilityMap", /* @__PURE__ */ new Map());
+  }
+  startGroupControl(configList) {
+    if (!Array.isArray(configList) || configList.length === 0) {
+      throw new Error("群控列表为空");
+    }
+    const controlCount = configList.filter((config) => config.isControl).length;
+    if (controlCount !== 1) {
+      throw new Error(`一次群控发起，有且只有一个主控，当前主控个数为 ${controlCount}。`);
+    }
+    this.webRTCConfigList = configList;
+    configList.forEach((config) => {
+      const sdk = new WebRTCSdk(config);
+      sdk.startConnection();
+      sdk.on(EmitType.screenshot, (screenshot) => {
+        this.emit(EmitType.screenshot, screenshot);
+      });
+      this.sdkList.push(sdk);
+    });
+    this.startLoop();
+  }
+  stopGroupControl() {
+    this.sdkList.forEach((sdk) => sdk.stop());
+    this.sdkList = [];
+    this.visibilityMap.clear();
+    this.previousVisibilityMap.clear();
+    this.removeAllListeners();
+    this.stopLoop();
+  }
+  getConnectionList() {
+    return this.webRTCConfigList;
+  }
+  /**
+   * 设置某个视图的可见状态
+   * @param viewId 视图 ID
+   * @param visible 是否可见
+   */
+  setViewVisibility(viewId, visible) {
+    this.visibilityMap.set(viewId, visible);
+  }
+  sendChannelData(type, data) {
+    this.sdkList.forEach((sdk) => {
+      sdk.sendChannelData(type, data);
+    });
+  }
+  startLoop() {
+    if (this.loopTimer !== null) return;
+    this.loopTimer = setInterval(() => {
+      try {
+        this.sdkList.forEach((sdk) => {
+          const viewId = sdk.config.roomId;
+          const isVisibleNow = this.visibilityMap.get(viewId) ?? false;
+          const wasVisible = this.previousVisibilityMap.get(viewId) ?? false;
+          if (isVisibleNow) {
+            sdk.sendRequestScreenshot(true);
+          } else if (wasVisible && !isVisibleNow) {
+            sdk.sendRequestScreenshot(false);
+          }
+          this.previousVisibilityMap.set(viewId, isVisibleNow);
+        });
+      } catch (err) {
+        console.error("Error during loop execution:", err);
+      }
+    }, 1e3);
+  }
+  stopLoop() {
+    if (this.loopTimer !== null) {
+      clearInterval(this.loopTimer);
+      this.loopTimer = null;
+    }
+  }
+}
 function useDeviceMode() {
   const isMobile = ref(false);
   const checkDeviceMode = () => {
@@ -3926,6 +4835,7 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle) {
   const widthRadio = ref(0);
   const heightRadio = ref(0);
   const resizeObserver = ref(null);
+  const id = ref(0);
   const videoSize = computed(() => {
     let width = 0;
     let height = 0;
@@ -3944,6 +4854,16 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle) {
       }
       widthRadio.value = remoteVideo.value.width / width;
       heightRadio.value = remoteVideo.value.height / height;
+    } else {
+      const aspect = 720 / 1280;
+      const videoHeight = containerWidth / aspect;
+      if (videoHeight > containerHeight) {
+        height = containerHeight;
+        width = height * aspect;
+      } else {
+        width = containerWidth;
+        height = videoHeight;
+      }
     }
     return { width, height };
   });
@@ -3966,8 +4886,18 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle) {
         };
         screenStatus.value = true;
       });
+      remoteVideoElement.value.addEventListener("loadedmetadata", () => {
+        scheduleFrame();
+      });
     }
   };
+  const scheduleFrame = () => {
+    if (!remoteVideoElement.value) return;
+    id.value = remoteVideoElement.value.requestVideoFrameCallback((now, metadata) => {
+      console.log("DOMHighResTimeStamp==>", now, "Frame at", metadata.presentationTime.toFixed(2), "ms");
+      scheduleFrame();
+    });
+  };
   const startPlay = (track) => {
     if (!remoteVideoElement.value) return;
     if (!remoteVideoElement.value.srcObject) {
@@ -3982,6 +4912,7 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle) {
     if (remoteVideoElement.value && remoteVideoElement.value.srcObject) {
       remoteVideoElement.value.srcObject.getTracks().forEach((track) => track.stop());
       remoteVideoElement.value.srcObject = null;
+      remoteVideoElement.value.cancelVideoFrameCallback(id.value);
     }
   };
   return {
@@ -4014,7 +4945,7 @@ function useMouseTouchControl(options) {
   const endY = ref(0);
   const handlePointerEvent = (event, action) => {
     if (!remoteVideoElement.value) return;
-    const offsetTime = Math.trunc((event.timeStamp - pointerDownTime.value[0]) / 2);
+    const offsetTime = Math.trunc(event.timeStamp - pointerDownTime.value[0]);
     const rect = remoteVideoElement.value.getBoundingClientRect();
     let x = event.clientX - rect.left;
     let y = event.clientY - rect.top;
@@ -4153,19 +5084,27 @@ function useMouseTouchControl(options) {
     handleWheel
   };
 }
-function useKeyboardControl(emit) {
+function useKeyboardControl(disabled, emit) {
+  const listening = ref(false);
   const handleKeyDown = (e) => {
     const data = getKeyEventData(e);
     emit("channelEvent", ChannelDataType.ActionInput, data);
   };
-  const startListening = (e) => {
-    const target = e.target;
-    target.focus();
+  const startListening = () => {
+    if (!disabled) {
+      return;
+    }
+    listening.value = true;
+    document.addEventListener("keydown", handleKeyDown);
   };
   const stopListening = () => {
+    if (!disabled) {
+      return;
+    }
+    listening.value = false;
+    document.removeEventListener("keydown", handleKeyDown);
   };
   return {
-    handleKeyDown,
     startListening,
     stopListening
   };
@@ -4173,10 +5112,10 @@ function useKeyboardControl(emit) {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    streamAngle: { type: Number, default: 0 },
-    videoAngle: { type: Number, default: 0 },
-    cursorType: { type: Number, default: 0 },
-    cloudDeviceSize: { type: Object, default: () => ({ width: 0, height: 0 }) },
+    streamAngle: { default: 0 },
+    videoAngle: { default: 0 },
+    cursorType: { default: 0 },
+    cloudDeviceSize: { default: () => ({ width: 0, height: 0 }) },
     disabled: { type: Boolean, default: true }
   },
   emits: ["channelEvent"],
@@ -4221,22 +5160,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit
     });
     const {
-      handleKeyDown,
       startListening,
       stopListening
-    } = useKeyboardControl(emit);
+    } = useKeyboardControl(disabled, emit);
     useResizeObserver(videoContainer, dimensions);
+    const handleClick = () => {
+      var _a;
+      if ((_a = remoteVideoElement.value) == null ? void 0 : _a.srcObject) {
+        remoteVideoElement.value.muted = false;
+      }
+    };
     onMounted(() => {
       checkDeviceMode();
       window.addEventListener("resize", checkDeviceMode);
       window.addEventListener("pointerdown", checkTouchSupport);
       window.addEventListener("pointerup", handleUp);
+      document.addEventListener("click", handleClick);
       initVideoContainer();
     });
     onUnmounted(() => {
       window.removeEventListener("resize", checkDeviceMode);
       window.removeEventListener("pointerdown", checkTouchSupport);
       window.removeEventListener("pointerup", handleUp);
+      document.removeEventListener("click", handleClick);
     });
     __expose({ startPlay, stopPlay });
     return (_ctx, _cache) => {
@@ -4244,16 +5190,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "videoContainer",
         ref: videoContainer,
         class: "flex flex-1 items-center justify-center",
-        style: { "width": "100%", "height": "100%", "background": "black", "position": "relative", "overflow": "hidden" }
+        style: { "width": "100%", "height": "100%", "position": "relative", "overflow": "hidden" }
       }, [
         createElementVNode("div", {
           ref: "keyboardArea",
-          onPointerenter: _cache[9] || (_cache[9] = ($event) => unref(disabled) ? null : unref(startListening)),
-          onPointerleave: _cache[10] || (_cache[10] = ($event) => unref(disabled) ? null : unref(stopListening)),
-          tabindex: "0",
-          class: "vContainer",
-          onKeydown: _cache[11] || (_cache[11] = ($event) => unref(disabled) ? null : unref(handleKeyDown)),
-          style: normalizeStyle([{ height: unref(videoSize).height + "px", width: unref(videoSize).width + "px", transform: `rotate(${unref(videoAngle)}deg)` }, { "position": "relative" }])
+          onPointerenter: _cache[9] || (_cache[9] = //@ts-ignore
+          (...args) => unref(startListening) && unref(startListening)(...args)),
+          onPointerleave: _cache[10] || (_cache[10] = //@ts-ignore
+          (...args) => unref(stopListening) && unref(stopListening)(...args)),
+          class: "vContainer flex justify-center items-center",
+          style: normalizeStyle([{ height: unref(videoSize).height + "px", width: unref(videoSize).width + "px", transform: `rotate(${unref(videoAngle)}deg)` }, { "position": "relative", "border": "none", "overflow": "hidden" }])
         }, [
           createElementVNode("video", {
             ref_key: "remoteVideoElement",
@@ -4280,7 +5226,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             autoplay: "",
             playsinline: "",
             muted: "",
-            disablePictureInPicture: ""
+            disablePictureInPicture: true
           }, null, 34)
         ], 36)
       ], 512);
@@ -4294,12 +5240,15 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27488d0e"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f0ecea8b"]]);
 export {
+  ActionCommandType,
   ActionType,
   ChannelDataType,
   ContainerDirection,
   EmitType,
+  GestureData,
+  GroupControllerManager,
   InputData,
   KeyEventData,
   index as RemotePlayer,