yjz-web-sdk 1.0.7-beta.1 → 1.0.7-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/core/data/WebrtcDataType.d.ts +6 -0
- package/lib/index.d.ts +2 -2
- package/lib/yjz-web-sdk.js +32 -6
- package/lib/yjz-web-sdk.umd.cjs +4 -4
- package/package.json +1 -1
|
@@ -113,6 +113,10 @@ export declare class GestureData {
|
|
|
113
113
|
mode: number;
|
|
114
114
|
constructor(mode: number);
|
|
115
115
|
}
|
|
116
|
+
export declare class ClarityData {
|
|
117
|
+
level: number;
|
|
118
|
+
constructor(level: number);
|
|
119
|
+
}
|
|
116
120
|
export declare class ChannelData {
|
|
117
121
|
type: ChannelDataType;
|
|
118
122
|
data: string | null;
|
|
@@ -187,6 +191,8 @@ export interface CloudStatusPayload {
|
|
|
187
191
|
screenWidth: number;
|
|
188
192
|
screenHeight: number;
|
|
189
193
|
gestureMode: number;
|
|
194
|
+
clarityLevel: number;
|
|
195
|
+
isClarity: boolean;
|
|
190
196
|
}
|
|
191
197
|
export interface CloudPointer {
|
|
192
198
|
rect: DOMRect;
|
package/lib/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { WebRTCSdk } from './core/WebRTCSdk';
|
|
2
2
|
import { getKeyEventData } from "./core/util/KeyCodeUtil";
|
|
3
3
|
import { transformCoordinate, valueToPercentage } from "./core/util/ScreenControlUtil";
|
|
4
|
-
import { ActionType, ChannelDataType, ContainerDirection, InputData, KeyEventData, TouchData, WheelData, GestureData, type ActionCommand, ActionCommandType, ActionCommandEventType, ActionCommandEventValue, TrackEventData } from "./core/data/WebrtcDataType";
|
|
4
|
+
import { ActionType, ChannelDataType, ContainerDirection, InputData, KeyEventData, TouchData, WheelData, GestureData, type ActionCommand, ActionCommandType, ActionCommandEventType, ActionCommandEventValue, TrackEventData, ClarityData } from "./core/data/WebrtcDataType";
|
|
5
5
|
import type { WebRTCConfigOptions } from './core/rtc/WebRTCConfig';
|
|
6
6
|
import { GroupControllerManager } from "./core/groupctrl/GroupControllerManager.ts";
|
|
7
7
|
import { EmitType } from "./core/data/WebRtcError";
|
|
8
8
|
import RemotePlayer from './components/RemotePlayer/index.vue';
|
|
9
|
-
export { WebRTCSdk, getKeyEventData, transformCoordinate, valueToPercentage, ActionType, ChannelDataType, InputData, KeyEventData, TouchData, ContainerDirection, EmitType, WheelData, GestureData, type ActionCommand, ActionCommandType, GroupControllerManager, type WebRTCConfigOptions, ActionCommandEventType, ActionCommandEventValue, RemotePlayer, TrackEventData };
|
|
9
|
+
export { WebRTCSdk, getKeyEventData, transformCoordinate, valueToPercentage, ActionType, ChannelDataType, InputData, KeyEventData, TouchData, ContainerDirection, EmitType, WheelData, GestureData, ClarityData, type ActionCommand, ActionCommandType, GroupControllerManager, type WebRTCConfigOptions, ActionCommandEventType, ActionCommandEventValue, RemotePlayer, TrackEventData };
|
package/lib/yjz-web-sdk.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".vContainer[data-v-
|
|
1
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".vContainer[data-v-26654e99]{transition:transform .2s linear;transform-origin:center center;margin:0;overflow:hidden}.flex[data-v-26654e99]{display:flex}.flex-1[data-v-26654e99]{flex:1 1 0}.items-center[data-v-26654e99]{align-items:center}.justify-center[data-v-26654e99]{justify-content:center}.video-control[data-v-26654e99]{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;object-fit:contain;clip-path:inset(0 1px);-webkit-user-drag:none;touch-action:none}.circle-cursor[data-v-26654e99]{cursor:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%23fff'%20opacity='.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='10'%20fill='%23000'%20opacity='.6'/%3e%3c/svg%3e\") 12 12,auto}.triangle-cursor[data-v-26654e99]{cursor:url(\"data:image/svg+xml,%3csvg%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%3e%3cpath%20d='M143.832313%205.834982H143.686438A108.676545%20108.676545%200%200%200%205.834982%20143.686438l34.499333-11.815839-34.499333%2011.815839%200.072938%200.218812%200.145874%200.437624%200.583498%201.750494%202.333993%206.71023%208.752474%2025.528047L49.232663%20269.867929a2254749.467572%202254749.467572%200%200%201%20223.917444%20652.351017l9.335972%2027.205605%202.552804%207.585476%200.729373%202.188119a72.572592%2072.572592%200%200%200%20126.181491%2040.844876%2072.134968%2072.134968%200%200%200%2014.076895-18.963693c3.282178-6.41848%205.689108-13.639271%208.023101-20.3495l0.072937-0.291749%2072.572592-209.329989%2047.409231-136.830334%2015.53564-44.710551%200.145874-0.364687%200.510561-0.145874%2045.002301-15.900327%20137.486769-48.649165c99.340573-35.228705%20202.984445-71.989094%20209.913487-74.906584l3.355115-1.312871c8.023101-3.136303%2022.391744-8.606599%2033.915834-20.130689a72.499655%2072.499655%200%200%200%200-102.549813L999.240712%20304.877823c-1.823432-1.969307-7.293728-7.731351-13.274585-11.961714a89.056417%2089.056417%200%200%200-27.205605-12.3264h-0.145874l-2.552805-0.875247L948.184617%20277.161657l-27.86204-9.263034-94.672588-31.800653A405018.007245%20405018.007245%200%200%201%20268.919745%2048.138604L178.039896%2017.504947%20152.657723%208.752473%20145.874556%206.637292%20144.196999%205.90792%20143.832313%205.834982z'%20fill='%23000000'%20opacity='.7'%3e%3c/path%3e%3c/svg%3e\") 1 1,auto}.default-cursor[data-v-26654e99]{cursor:default}.no-events[data-v-26654e99]{pointer-events:none!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
4
4
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
@@ -3218,6 +3218,12 @@ class GestureData {
|
|
|
3218
3218
|
this.mode = mode;
|
|
3219
3219
|
}
|
|
3220
3220
|
}
|
|
3221
|
+
class ClarityData {
|
|
3222
|
+
constructor(level) {
|
|
3223
|
+
__publicField(this, "level");
|
|
3224
|
+
this.level = level;
|
|
3225
|
+
}
|
|
3226
|
+
}
|
|
3221
3227
|
class ChannelData {
|
|
3222
3228
|
constructor(type, data = null) {
|
|
3223
3229
|
__publicField(this, "type");
|
|
@@ -3532,13 +3538,15 @@ class WebRTCClient extends EventEmitter {
|
|
|
3532
3538
|
value === "ENABLE" ? this.startPush() : this.stopPush();
|
|
3533
3539
|
}
|
|
3534
3540
|
} else if (data.type === ChannelDataType.ActionUpdateCloudStatus) {
|
|
3535
|
-
const { rotation, screenWidth, screenHeight, gestureMode } = JSON.parse(data.data);
|
|
3541
|
+
const { rotation, screenWidth, screenHeight, gestureMode, level, isClarity } = JSON.parse(data.data);
|
|
3536
3542
|
const direction = [StreamRotation.ROTATION_0, StreamRotation.ROTATION_180].includes(rotation) ? ContainerDirection.Vertical : ContainerDirection.Horizontal;
|
|
3537
3543
|
const cloudStatus = {
|
|
3538
3544
|
direction,
|
|
3539
3545
|
screenWidth,
|
|
3540
3546
|
screenHeight,
|
|
3541
|
-
gestureMode
|
|
3547
|
+
gestureMode,
|
|
3548
|
+
clarityLevel: level,
|
|
3549
|
+
isClarity
|
|
3542
3550
|
};
|
|
3543
3551
|
this.emit(EmitType.cloudStatusChanged, cloudStatus);
|
|
3544
3552
|
} else if (data.type === ChannelDataType.CloudClipData) {
|
|
@@ -4376,7 +4384,24 @@ function useRemoteVideo(videoContainer, remoteVideoElement, videoAngle, emit) {
|
|
|
4376
4384
|
video.cancelVideoFrameCallback(frameCallbackId.value);
|
|
4377
4385
|
}
|
|
4378
4386
|
};
|
|
4387
|
+
const handleVisibilityChange = () => {
|
|
4388
|
+
if (document.visibilityState === "visible") {
|
|
4389
|
+
const video = remoteVideoElement.value;
|
|
4390
|
+
if (video && video.srcObject) {
|
|
4391
|
+
video.srcObject.getTracks().forEach((track) => track.enabled = true);
|
|
4392
|
+
}
|
|
4393
|
+
} else {
|
|
4394
|
+
const video = remoteVideoElement.value;
|
|
4395
|
+
if (video && video.srcObject) {
|
|
4396
|
+
video.srcObject.getTracks().forEach((track) => track.enabled = false);
|
|
4397
|
+
}
|
|
4398
|
+
}
|
|
4399
|
+
};
|
|
4400
|
+
onMounted(() => {
|
|
4401
|
+
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
4402
|
+
});
|
|
4379
4403
|
onBeforeUnmount(() => {
|
|
4404
|
+
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
4380
4405
|
if (resizeObserver.value && videoContainer.value) {
|
|
4381
4406
|
resizeObserver.value.unobserve(videoContainer.value);
|
|
4382
4407
|
}
|
|
@@ -4594,10 +4619,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
4594
4619
|
document.addEventListener("click", handleClick);
|
|
4595
4620
|
initVideoContainer();
|
|
4596
4621
|
});
|
|
4597
|
-
|
|
4622
|
+
onBeforeUnmount(() => {
|
|
4598
4623
|
document.removeEventListener("click", handleClick);
|
|
4599
4624
|
});
|
|
4600
|
-
__expose({ startPlay, stopPlay });
|
|
4625
|
+
__expose({ startPlay, stopPlay, remoteVideoElement });
|
|
4601
4626
|
return (_ctx, _cache) => {
|
|
4602
4627
|
return openBlock(), createElementBlock("div", {
|
|
4603
4628
|
ref_key: "videoContainer",
|
|
@@ -4648,13 +4673,14 @@ const _export_sfc = (sfc, props) => {
|
|
|
4648
4673
|
}
|
|
4649
4674
|
return target;
|
|
4650
4675
|
};
|
|
4651
|
-
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
4676
|
+
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-26654e99"]]);
|
|
4652
4677
|
export {
|
|
4653
4678
|
ActionCommandEventType,
|
|
4654
4679
|
ActionCommandEventValue,
|
|
4655
4680
|
ActionCommandType,
|
|
4656
4681
|
ActionType,
|
|
4657
4682
|
ChannelDataType,
|
|
4683
|
+
ClarityData,
|
|
4658
4684
|
ContainerDirection,
|
|
4659
4685
|
EmitType,
|
|
4660
4686
|
GestureData,
|
package/lib/yjz-web-sdk.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".vContainer[data-v-
|
|
1
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".vContainer[data-v-26654e99]{transition:transform .2s linear;transform-origin:center center;margin:0;overflow:hidden}.flex[data-v-26654e99]{display:flex}.flex-1[data-v-26654e99]{flex:1 1 0}.items-center[data-v-26654e99]{align-items:center}.justify-center[data-v-26654e99]{justify-content:center}.video-control[data-v-26654e99]{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;object-fit:contain;clip-path:inset(0 1px);-webkit-user-drag:none;touch-action:none}.circle-cursor[data-v-26654e99]{cursor:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%23fff'%20opacity='.6'/%3e%3ccircle%20cx='12'%20cy='12'%20r='10'%20fill='%23000'%20opacity='.6'/%3e%3c/svg%3e\") 12 12,auto}.triangle-cursor[data-v-26654e99]{cursor:url(\"data:image/svg+xml,%3csvg%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%3e%3cpath%20d='M143.832313%205.834982H143.686438A108.676545%20108.676545%200%200%200%205.834982%20143.686438l34.499333-11.815839-34.499333%2011.815839%200.072938%200.218812%200.145874%200.437624%200.583498%201.750494%202.333993%206.71023%208.752474%2025.528047L49.232663%20269.867929a2254749.467572%202254749.467572%200%200%201%20223.917444%20652.351017l9.335972%2027.205605%202.552804%207.585476%200.729373%202.188119a72.572592%2072.572592%200%200%200%20126.181491%2040.844876%2072.134968%2072.134968%200%200%200%2014.076895-18.963693c3.282178-6.41848%205.689108-13.639271%208.023101-20.3495l0.072937-0.291749%2072.572592-209.329989%2047.409231-136.830334%2015.53564-44.710551%200.145874-0.364687%200.510561-0.145874%2045.002301-15.900327%20137.486769-48.649165c99.340573-35.228705%20202.984445-71.989094%20209.913487-74.906584l3.355115-1.312871c8.023101-3.136303%2022.391744-8.606599%2033.915834-20.130689a72.499655%2072.499655%200%200%200%200-102.549813L999.240712%20304.877823c-1.823432-1.969307-7.293728-7.731351-13.274585-11.961714a89.056417%2089.056417%200%200%200-27.205605-12.3264h-0.145874l-2.552805-0.875247L948.184617%20277.161657l-27.86204-9.263034-94.672588-31.800653A405018.007245%20405018.007245%200%200%201%20268.919745%2048.138604L178.039896%2017.504947%20152.657723%208.752473%20145.874556%206.637292%20144.196999%205.90792%20143.832313%205.834982z'%20fill='%23000000'%20opacity='.7'%3e%3c/path%3e%3c/svg%3e\") 1 1,auto}.default-cursor[data-v-26654e99]{cursor:default}.no-events[data-v-26654e99]{pointer-events:none!important}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
2
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).YjzSDK={},e.Vue)}(this,(function(e,t){"use strict";var n=Object.defineProperty,r=(e,t,r)=>((e,t,r)=>t in e?n(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r)(e,"symbol"!=typeof t?t+"":t,r);function i(e,t){for(var n=0;n<t.length;n++){const r=t[n];if("string"!=typeof r&&!Array.isArray(r))for(const t in r)if("default"!==t&&!(t in e)){const n=Object.getOwnPropertyDescriptor(r,t);n&&Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var s,a={exports:{}};var c=(s||(s=1,function(e){var t=Object.prototype.hasOwnProperty,n="~";function r(){}function i(e,t,n){this.fn=e,this.context=t,this.once=n||!1}function o(e,t,r,o,s){if("function"!=typeof r)throw new TypeError("The listener must be a function");var a=new i(r,o||e,s),c=n?n+t:t;return e._events[c]?e._events[c].fn?e._events[c]=[e._events[c],a]:e._events[c].push(a):(e._events[c]=a,e._eventsCount++),e}function s(e,t){0==--e._eventsCount?e._events=new r:delete e._events[t]}function a(){this._events=new r,this._eventsCount=0}Object.create&&(r.prototype=Object.create(null),(new r).__proto__||(n=!1)),a.prototype.eventNames=function(){var e,r,i=[];if(0===this._eventsCount)return i;for(r in e=this._events)t.call(e,r)&&i.push(n?r.slice(1):r);return Object.getOwnPropertySymbols?i.concat(Object.getOwnPropertySymbols(e)):i},a.prototype.listeners=function(e){var t=n?n+e:e,r=this._events[t];if(!r)return[];if(r.fn)return[r.fn];for(var i=0,o=r.length,s=new Array(o);i<o;i++)s[i]=r[i].fn;return s},a.prototype.listenerCount=function(e){var t=n?n+e:e,r=this._events[t];return r?r.fn?1:r.length:0},a.prototype.emit=function(e,t,r,i,o,s){var a=n?n+e:e;if(!this._events[a])return!1;var c,d,l=this._events[a],p=arguments.length;if(l.fn){switch(l.once&&this.removeListener(e,l.fn,void 0,!0),p){case 1:return l.fn.call(l.context),!0;case 2:return l.fn.call(l.context,t),!0;case 3:return l.fn.call(l.context,t,r),!0;case 4:return l.fn.call(l.context,t,r,i),!0;case 5:return l.fn.call(l.context,t,r,i,o),!0;case 6:return l.fn.call(l.context,t,r,i,o,s),!0}for(d=1,c=new Array(p-1);d<p;d++)c[d-1]=arguments[d];l.fn.apply(l.context,c)}else{var h,u=l.length;for(d=0;d<u;d++)switch(l[d].once&&this.removeListener(e,l[d].fn,void 0,!0),p){case 1:l[d].fn.call(l[d].context);break;case 2:l[d].fn.call(l[d].context,t);break;case 3:l[d].fn.call(l[d].context,t,r);break;case 4:l[d].fn.call(l[d].context,t,r,i);break;default:if(!c)for(h=1,c=new Array(p-1);h<p;h++)c[h-1]=arguments[h];l[d].fn.apply(l[d].context,c)}}return!0},a.prototype.on=function(e,t,n){return o(this,e,t,n,!1)},a.prototype.once=function(e,t,n){return o(this,e,t,n,!0)},a.prototype.removeListener=function(e,t,r,i){var o=n?n+e:e;if(!this._events[o])return this;if(!t)return s(this,o),this;var a=this._events[o];if(a.fn)a.fn!==t||i&&!a.once||r&&a.context!==r||s(this,o);else{for(var c=0,d=[],l=a.length;c<l;c++)(a[c].fn!==t||i&&!a[c].once||r&&a[c].context!==r)&&d.push(a[c]);d.length?this._events[o]=1===d.length?d[0]:d:s(this,o)}return this},a.prototype.removeAllListeners=function(e){var t;return e?(t=n?n+e:e,this._events[t]&&s(this,t)):(this._events=new r,this._eventsCount=0),this},a.prototype.off=a.prototype.removeListener,a.prototype.addListener=a.prototype.on,a.prefixed=n,a.EventEmitter=a,e.exports=a}(a)),a.exports);const d=o(c);var l=(e=>(e.Peers="Peers",e.Offer="Offer",e.Answer="Answer",e.IceCandidates="IceCandidates",e.SignOut="SignOut",e.NotAvailable="NotAvailable",e.Ping="Ping",e.Pong="Pong",e.SendScreenshot="SendScreenshot",e.KickOut="KickOut",e.Error="Error",e))(l||{}),p=(e=>(e.SignIn="SignIn",e.SignOut="SignOut",e.Answer="Answer",e.Offer="Offer",e.IceCandidates="IceCandidates",e.Pong="Pong",e.Identity="Web",e.RequestScreenshot="RequestScreenshot",e.SwitchControl="SwitchControl",e))(p||{}),h=(e=>(e[e.SOCKET=10001]="SOCKET",e[e.SOCKET_CLOSE=10002]="SOCKET_CLOSE",e[e.CREATE_OFFER=10003]="CREATE_OFFER",e[e.HANDLE_OFFER=10004]="HANDLE_OFFER",e[e.CREATE_ANSWER=10005]="CREATE_ANSWER",e[e.HANDLE_ANSWER=10006]="HANDLE_ANSWER",e[e.LOCAL_DES=10007]="LOCAL_DES",e[e.REMOTE_DES=10008]="REMOTE_DES",e[e.HANDLE_ICE=10009]="HANDLE_ICE",e[e.ICE_STATE=10010]="ICE_STATE",e[e.CAMERA=10011]="CAMERA",e[e.NOT_AVAILABLE=10012]="NOT_AVAILABLE",e[e.DATACHANNEL_ERR=10013]="DATACHANNEL_ERR",e[e.STREAM_STATE=10014]="STREAM_STATE",e[e.AUTH_FAILED=10015]="AUTH_FAILED",e[e.KICK_OUT_ERR=10016]="KICK_OUT_ERR",e))(h||{});const u={10001:{type:"socket",description:"WebSocket连接失败"},10002:{type:"socket_close",description:"WebSocket已关闭"},10003:{type:"createOffer",description:"创建offer失败"},10004:{type:"handleOffer",description:"处理offer失败"},10005:{type:"createAnswer",description:"创建answer失败"},10006:{type:"handleAnswer",description:"处理answer失败"},10007:{type:"setLocalDescription",description:"设置本地描述失败"},10008:{type:"setRemoteDescription",description:"设置远端描述失败"},10009:{type:"handleICE",description:"处理 ICE 失败"},10010:{type:"iceState",description:"ICE 状态异常"},10011:{type:"camera",description:"摄像头异常"},10012:{type:"notAvailable",description:"网络环境异常"},10013:{type:"datachannel_err",description:"信令通道错误"},10014:{type:"stream_state",description:"webrtc统计信息获取失败"},10015:{type:"auth_failed",description:"鉴权失败"},10016:{type:"kick_out_err",description:"被踢出投屏房间"}};function f(e,t){const n=u[e];return{code:e,type:n.type,message:n.description,rawError:t}}var m=(e=>(e.signalMessage="signalMessage",e.webrtcError="webrtcError",e.sendAnswer="sendAnswer",e.sendOffer="sendOffer",e.sendICEMessage="sendICEMessage",e.streamTrack="streamTrack",e.iceConnectionState="iceConnectionState",e.cloudStatusChanged="cloudStatusChanged",e.statisticInfo="statisticInfo",e.cloudClipData="cloudClipData",e.screenshot="screenshot",e.groupError="groupError",e))(m||{});class C extends d{
|
|
3
3
|
// private timeout: ReturnType<typeof setTimeout> | null = null;
|
|
4
4
|
constructor(e){super(),
|
|
@@ -70,7 +70,7 @@ sdp:pe};switch(r.browser){case"chrome":if(!U||!N||!t.shimChrome)return n("Chrome
|
|
|
70
70
|
/**
|
|
71
71
|
* 生成清晰度数据（clarity）
|
|
72
72
|
* @param data 清晰度数据
|
|
73
|
-
*/static clarity(e){return new Ne("ActionClarity",this.formatData(e))}static switchAudio(e){return new Ne("ActionCommandEvent",this.formatData(e))}static changeSender(e){return new Ne("ActionTrack",this.formatData(e))}}class je extends d{constructor(e){super(),r(this,"config"),r(this,"peerConnection",null),r(this,"localStream",null),r(this,"isPushingStream",!1),r(this,"dataChannel",null),r(this,"statsTimer"),r(this,"lastReportTime",0),r(this,"lastBytesReceived",0),r(this,"lastPacketsLost",0),r(this,"lastPacketsReceived",0),r(this,"lostPacketCount",0),r(this,"maxLostRate",0),r(this,"lastSecondDecodedCount",0),this.config=e}async startPush(){if(!this.isPushingStream){this.isPushingStream=!0;try{await this.readyCapture()}catch(e){this.emit(m.webrtcError,f(h.CAMERA,e))}}}handleOffer(e){this.resetPeerConnection(),((e,t,n,r)=>{const i=new RTCSessionDescription({type:"offer",sdp:t});e.setRemoteDescription(i).then((()=>Re(e,n,r))).catch((e=>null==r?void 0:r(f(h.HANDLE_OFFER,e))))})(this.peerConnection,e,(e=>{this.emit(m.sendAnswer,e)}),(e=>this.emit(m.webrtcError,e)))}handleAnswer(e){((e,t,n)=>{const r=new RTCSessionDescription({type:"answer",sdp:t});e.setRemoteDescription(r).catch((e=>null==n?void 0:n(f(h.REMOTE_DES,e))))})(this.peerConnection,e??"",(e=>this.emit(m.webrtcError,e)))}handleIceCandidate(e){((e,t,n)=>{e.addIceCandidate(t).catch((e=>null==n?void 0:n(f(h.HANDLE_ICE,e))))})(this.peerConnection,e,(e=>this.emit(m.webrtcError,e)))}sendChannelData(e,t){var n;try{let r=null;switch(e){case Ee.ClickData:r=Ne.click(t);break;case Ee.ClipboardData:r=Ne.clipboard(t);break;case Ee.ActionInput:r=Ne.input(t);break;case Ee.ActionChinese:r=Ne.chinese(t);break;case Ee.ActionRequestCloudDeviceInfo:r=Ne.requestCloudDeviceInfo();break;case Ee.ActionClarity:r=Ne.clarity(t);break;case Ee.ActionWheel:r=Ne.wheel(t);break;case Ee.ActionGesture:r=Ne.gesture(t);break;case Ee.ActionCommand:r=Ne.action(t);break;case Ee.ActionCommandEvent:r=Ne.switchAudio(t);break;case Ee.ActionTrack:r=Ne.changeSender(t)}if(r){const e=JSON.stringify(r),t=(new TextEncoder).encode(e).buffer;null==(n=this.dataChannel)||n.send(t),r=null}}catch(r){this.emit(m.webrtcError,f(h.DATACHANNEL_ERR,r))}}closeConnection(){this.statsTimer&&(clearInterval(this.statsTimer),this.statsTimer=void 0),this.peerConnection&&("function"==typeof this.peerConnection.getSenders&&this.peerConnection.getSenders&&this.peerConnection.getSenders().forEach((e=>{var t,n;e.track&&(null==(n=(t=e.track).stop)||n.call(t))})),"function"==typeof this.peerConnection.getReceivers&&this.peerConnection.getReceivers&&this.peerConnection.getReceivers().forEach((e=>{var t,n;e.track&&(null==(n=(t=e.track).stop)||n.call(t))})),this.peerConnection.getTransceivers&&this.peerConnection.getTransceivers().forEach((e=>{var t;null==(t=e.stop)||t.call(e)})),this.removeAllListeners(),this.dataChannel=null,this.peerConnection.onicecandidate=null,this.peerConnection.ontrack=null,this.peerConnection.ondatachannel=null,this.peerConnection.onconnectionstatechange=null,this.peerConnection.oniceconnectionstatechange=null,this.peerConnection.onsignalingstatechange=null,this.peerConnection.onnegotiationneeded=null,this.peerConnection.onicegatheringstatechange=null,this.peerConnection.close(),this.peerConnection=null)}async readyCapture(){this.resetPeerConnection();try{this.localStream=await navigator.mediaDevices.getUserMedia({video:{width:640,height:480},audio:!0});const e=await this.getRotatedStream(this.localStream);e.getTracks().forEach((t=>{t.contentHint="detail",this.peerConnection.addTrack(t,e)})),this.peerConnection.getSenders().forEach((e=>this.setVideoParams(e))),we(this.peerConnection,(e=>{this.emit(m.sendOffer,e)}),(e=>this.emit(m.webrtcError,e)))}catch(e){throw new Error(`mediaDevices error: ${e}`)}}async getRotatedStream(e){const t=document.createElement("canvas"),n=t.getContext("2d"),r=e.getVideoTracks()[0],{width:i,height:o}=await new Promise((e=>{const t=document.createElement("video");t.srcObject=new MediaStream([r]),t.onloadedmetadata=()=>e({width:t.videoWidth,height:t.videoHeight})}));t.width=640,t.height=480;const s=document.createElement("video");s.srcObject=e,await s.play();const a=()=>{n.clearRect(0,0,t.width,t.height),n.save(),n.translate(t.width/2,t.height/2),n.rotate(Math.PI/2),n.drawImage(s,-i/2,-o/2,i,o),n.restore(),requestAnimationFrame(a)};return a(),t.captureStream()}async setVideoParams(e){const t=e.getParameters();t.degradationPreference="maintain-resolution",t.encodings.forEach((e=>{e.maxBitrate=1e6,e.priority="high",e.scaleResolutionDownBy=1})),await e.setParameters(t)}stopPush(){var e;this.isPushingStream&&(this.isPushingStream=!1,null==(e=this.localStream)||e.getTracks().forEach((e=>{var t;null==(t=this.peerConnection)||t.getSenders().forEach((e=>{var t;null==(t=this.peerConnection)||t.removeTrack(e)})),e.stop()})),this.localStream=null,we(this.peerConnection,(e=>{this.emit(m.sendOffer,e)}),(e=>this.emit(m.webrtcError,e))))}resetPeerConnection(){var e,t,n,r,i;this.peerConnection||(this.peerConnection=(e=>{const t=[{urls:e.stunServerUri},{urls:e.turnServerUri,username:e.turnServerUserName,credential:e.turnServerPassword}];return new RTCPeerConnection({iceServers:t,iceTransportPolicy:"all",bundlePolicy:"max-bundle",iceCandidatePoolSize:4})})(this.config),e=this.peerConnection,t=e=>{this.emit(m.sendICEMessage,e)},n=e=>{this.emit(m.streamTrack,e)},r=e=>{this.emit(m.iceConnectionState,e)},i=e=>this.emit(m.webrtcError,e),e.onicecandidate=e=>{if(!e.candidate)return;const n={sdp:e.candidate.candidate,sdpMid:e.candidate.sdpMid,sdpMLineIndex:e.candidate.sdpMLineIndex};t(JSON.stringify(n))},e.oniceconnectionstatechange=()=>{const t=e.iceConnectionState;t&&("failed"!==t&&"disconnected"!==t&&"closed"!==t||null==i||i(f(h.ICE_STATE,"failed")),null==r||r(t))},e.ontrack=e=>{const t=e.track;t.contentHint="motion",null==n||n(t)},this.checkStats(),this.configDataChannel())}configDataChannel(){this.peerConnection.ondatachannel=e=>{this.dataChannel=e.channel,this.dataChannel.onmessage=e=>this.handleDataChannelMessage(e),this.dataChannel.onerror=e=>this.emit(m.webrtcError,f(h.DATACHANNEL_ERR,e)),this.sendChannelData(Ee.ActionRequestCloudDeviceInfo,"")}}handleDataChannelMessage(e){const t=JSON.parse(e.data);if(t.type===Ee.ActionCommandEvent){const{action:e,value:n}=JSON.parse(t.data);"ACTION_CONTROL_VIDEO"===e&&("ENABLE"===n?this.startPush():this.stopPush())}else if(t.type===Ee.ActionUpdateCloudStatus){const{rotation:e,screenWidth:n,screenHeight:r,gestureMode:i}=JSON.parse(t.data),
|
|
73
|
+
*/static clarity(e){return new Ne("ActionClarity",this.formatData(e))}static switchAudio(e){return new Ne("ActionCommandEvent",this.formatData(e))}static changeSender(e){return new Ne("ActionTrack",this.formatData(e))}}class je extends d{constructor(e){super(),r(this,"config"),r(this,"peerConnection",null),r(this,"localStream",null),r(this,"isPushingStream",!1),r(this,"dataChannel",null),r(this,"statsTimer"),r(this,"lastReportTime",0),r(this,"lastBytesReceived",0),r(this,"lastPacketsLost",0),r(this,"lastPacketsReceived",0),r(this,"lostPacketCount",0),r(this,"maxLostRate",0),r(this,"lastSecondDecodedCount",0),this.config=e}async startPush(){if(!this.isPushingStream){this.isPushingStream=!0;try{await this.readyCapture()}catch(e){this.emit(m.webrtcError,f(h.CAMERA,e))}}}handleOffer(e){this.resetPeerConnection(),((e,t,n,r)=>{const i=new RTCSessionDescription({type:"offer",sdp:t});e.setRemoteDescription(i).then((()=>Re(e,n,r))).catch((e=>null==r?void 0:r(f(h.HANDLE_OFFER,e))))})(this.peerConnection,e,(e=>{this.emit(m.sendAnswer,e)}),(e=>this.emit(m.webrtcError,e)))}handleAnswer(e){((e,t,n)=>{const r=new RTCSessionDescription({type:"answer",sdp:t});e.setRemoteDescription(r).catch((e=>null==n?void 0:n(f(h.REMOTE_DES,e))))})(this.peerConnection,e??"",(e=>this.emit(m.webrtcError,e)))}handleIceCandidate(e){((e,t,n)=>{e.addIceCandidate(t).catch((e=>null==n?void 0:n(f(h.HANDLE_ICE,e))))})(this.peerConnection,e,(e=>this.emit(m.webrtcError,e)))}sendChannelData(e,t){var n;try{let r=null;switch(e){case Ee.ClickData:r=Ne.click(t);break;case Ee.ClipboardData:r=Ne.clipboard(t);break;case Ee.ActionInput:r=Ne.input(t);break;case Ee.ActionChinese:r=Ne.chinese(t);break;case Ee.ActionRequestCloudDeviceInfo:r=Ne.requestCloudDeviceInfo();break;case Ee.ActionClarity:r=Ne.clarity(t);break;case Ee.ActionWheel:r=Ne.wheel(t);break;case Ee.ActionGesture:r=Ne.gesture(t);break;case Ee.ActionCommand:r=Ne.action(t);break;case Ee.ActionCommandEvent:r=Ne.switchAudio(t);break;case Ee.ActionTrack:r=Ne.changeSender(t)}if(r){const e=JSON.stringify(r),t=(new TextEncoder).encode(e).buffer;null==(n=this.dataChannel)||n.send(t),r=null}}catch(r){this.emit(m.webrtcError,f(h.DATACHANNEL_ERR,r))}}closeConnection(){this.statsTimer&&(clearInterval(this.statsTimer),this.statsTimer=void 0),this.peerConnection&&("function"==typeof this.peerConnection.getSenders&&this.peerConnection.getSenders&&this.peerConnection.getSenders().forEach((e=>{var t,n;e.track&&(null==(n=(t=e.track).stop)||n.call(t))})),"function"==typeof this.peerConnection.getReceivers&&this.peerConnection.getReceivers&&this.peerConnection.getReceivers().forEach((e=>{var t,n;e.track&&(null==(n=(t=e.track).stop)||n.call(t))})),this.peerConnection.getTransceivers&&this.peerConnection.getTransceivers().forEach((e=>{var t;null==(t=e.stop)||t.call(e)})),this.removeAllListeners(),this.dataChannel=null,this.peerConnection.onicecandidate=null,this.peerConnection.ontrack=null,this.peerConnection.ondatachannel=null,this.peerConnection.onconnectionstatechange=null,this.peerConnection.oniceconnectionstatechange=null,this.peerConnection.onsignalingstatechange=null,this.peerConnection.onnegotiationneeded=null,this.peerConnection.onicegatheringstatechange=null,this.peerConnection.close(),this.peerConnection=null)}async readyCapture(){this.resetPeerConnection();try{this.localStream=await navigator.mediaDevices.getUserMedia({video:{width:640,height:480},audio:!0});const e=await this.getRotatedStream(this.localStream);e.getTracks().forEach((t=>{t.contentHint="detail",this.peerConnection.addTrack(t,e)})),this.peerConnection.getSenders().forEach((e=>this.setVideoParams(e))),we(this.peerConnection,(e=>{this.emit(m.sendOffer,e)}),(e=>this.emit(m.webrtcError,e)))}catch(e){throw new Error(`mediaDevices error: ${e}`)}}async getRotatedStream(e){const t=document.createElement("canvas"),n=t.getContext("2d"),r=e.getVideoTracks()[0],{width:i,height:o}=await new Promise((e=>{const t=document.createElement("video");t.srcObject=new MediaStream([r]),t.onloadedmetadata=()=>e({width:t.videoWidth,height:t.videoHeight})}));t.width=640,t.height=480;const s=document.createElement("video");s.srcObject=e,await s.play();const a=()=>{n.clearRect(0,0,t.width,t.height),n.save(),n.translate(t.width/2,t.height/2),n.rotate(Math.PI/2),n.drawImage(s,-i/2,-o/2,i,o),n.restore(),requestAnimationFrame(a)};return a(),t.captureStream()}async setVideoParams(e){const t=e.getParameters();t.degradationPreference="maintain-resolution",t.encodings.forEach((e=>{e.maxBitrate=1e6,e.priority="high",e.scaleResolutionDownBy=1})),await e.setParameters(t)}stopPush(){var e;this.isPushingStream&&(this.isPushingStream=!1,null==(e=this.localStream)||e.getTracks().forEach((e=>{var t;null==(t=this.peerConnection)||t.getSenders().forEach((e=>{var t;null==(t=this.peerConnection)||t.removeTrack(e)})),e.stop()})),this.localStream=null,we(this.peerConnection,(e=>{this.emit(m.sendOffer,e)}),(e=>this.emit(m.webrtcError,e))))}resetPeerConnection(){var e,t,n,r,i;this.peerConnection||(this.peerConnection=(e=>{const t=[{urls:e.stunServerUri},{urls:e.turnServerUri,username:e.turnServerUserName,credential:e.turnServerPassword}];return new RTCPeerConnection({iceServers:t,iceTransportPolicy:"all",bundlePolicy:"max-bundle",iceCandidatePoolSize:4})})(this.config),e=this.peerConnection,t=e=>{this.emit(m.sendICEMessage,e)},n=e=>{this.emit(m.streamTrack,e)},r=e=>{this.emit(m.iceConnectionState,e)},i=e=>this.emit(m.webrtcError,e),e.onicecandidate=e=>{if(!e.candidate)return;const n={sdp:e.candidate.candidate,sdpMid:e.candidate.sdpMid,sdpMLineIndex:e.candidate.sdpMLineIndex};t(JSON.stringify(n))},e.oniceconnectionstatechange=()=>{const t=e.iceConnectionState;t&&("failed"!==t&&"disconnected"!==t&&"closed"!==t||null==i||i(f(h.ICE_STATE,"failed")),null==r||r(t))},e.ontrack=e=>{const t=e.track;t.contentHint="motion",null==n||n(t)},this.checkStats(),this.configDataChannel())}configDataChannel(){this.peerConnection.ondatachannel=e=>{this.dataChannel=e.channel,this.dataChannel.onmessage=e=>this.handleDataChannelMessage(e),this.dataChannel.onerror=e=>this.emit(m.webrtcError,f(h.DATACHANNEL_ERR,e)),this.sendChannelData(Ee.ActionRequestCloudDeviceInfo,"")}}handleDataChannelMessage(e){const t=JSON.parse(e.data);if(t.type===Ee.ActionCommandEvent){const{action:e,value:n}=JSON.parse(t.data);"ACTION_CONTROL_VIDEO"===e&&("ENABLE"===n?this.startPush():this.stopPush())}else if(t.type===Ee.ActionUpdateCloudStatus){const{rotation:e,screenWidth:n,screenHeight:r,gestureMode:i,level:o,isClarity:s}=JSON.parse(t.data),a={direction:[Ie.ROTATION_0,Ie.ROTATION_180].includes(e)?De.Vertical:De.Horizontal,screenWidth:n,screenHeight:r,gestureMode:i,clarityLevel:o,isClarity:s};this.emit(m.cloudStatusChanged,a)}else t.type===Ee.CloudClipData&&this.emit(m.cloudClipData,t.data)}checkStats(){this.statsTimer=setInterval((()=>this.processStats()),1e3)}processStats(){this.peerConnection&&this.peerConnection.getStats(null).then((e=>{let t=0,n=0,r=0,i=0,o=0,s=0,a=0,c=0,d=0,l="";const p=Date.now();e.forEach((p=>{if("inbound-rtp"===p.type&&(s+=p.bytesReceived||0,i+=p.packetsLost||0,o+=p.packetsReceived||0,"video"===p.kind&&(t=p.framesPerSecond||0,n=p.totalDecodeTime||0,a=p.framesDecoded||0,d=p.framesReceived||0,c=(p.pliCount||0)+(p.firCount||0))),"candidate-pair"===p.type&&"succeeded"===p.state){r=void 0!==p.currentRoundTripTime?p.currentRoundTripTime:p.responsesReceived>0?p.totalRoundTripTime/p.responsesReceived:0;const t=e.get(p.localCandidateId),n=e.get(p.remoteCandidateId);t&&n&&(l=this.getConnectionType(t,n))}})),r=Math.floor(1e3*(r||0));const h=p-this.lastReportTime,u=s-this.lastBytesReceived,f=(h>0?1e3*u/h:0)/1024,C=f/1024;this.lastBytesReceived=s,this.lastReportTime=p;let g=0;const y=i-this.lastPacketsLost,v=o-this.lastPacketsReceived;y>0&&v>0&&(g=y/(y+v),this.maxLostRate=Math.max(this.maxLostRate||0,g),this.lostPacketCount++),this.lastPacketsLost=i,this.lastPacketsReceived=o;const S=void 0!==t?t:a-this.lastSecondDecodedCount;this.lastSecondDecodedCount=a;const T=f<1024?`${Math.floor(f)} KB/s`:`${Math.floor(C)} MB/s`,R=a>0?Math.floor(1e4*n/a):0,b={connectionType:l,framesPerSecond:S,currentRoundTripTime:r,lostRate:Math.floor(100*g),
|
|
74
74
|
// percent
|
|
75
75
|
bitrate:T,pliCount:c,averageDecodeTime:R,framesDecoded:a,framesReceived:d};this.emit(m.statisticInfo,b)})).catch((e=>{this.emit(m.webrtcError,f(h.STREAM_STATE,e))}))}getConnectionType(e,t){return"host"===e.candidateType&&"host"===t.candidateType?"直连":"relay"===e.candidateType||"relay"===t.candidateType?"中继":"NAT"}}class Ue extends d{constructor(e){super(),r(this,"config"),r(this,"signalingClient"),r(this,"webRTCClient"),
|
|
76
76
|
/**
|
|
@@ -112,7 +112,7 @@ Insert:124,Delete:112,Home:122,End:123,PageUp:92,PageDown:93,ScrollLock:116,Paus
|
|
|
112
112
|
* @param visible
|
|
113
113
|
*/setViewIds(e,t){this.visibility.clear(),e.forEach((e=>{this.visibility.set(e,t)}))}getChanges(){const e=[];return this.visibility.forEach(((t,n)=>{const r=this.prevVisibility.get(n)??!1;e.push({viewId:n,nowVisible:t,wasVisible:r}),this.prevVisibility.set(n,t)})),e}clear(){this.visibility.clear(),this.prevVisibility.clear()}}class Ge{constructor(e,t){r(this,"timer",null),this.interval=e,this.callback=t}start(){this.timer||(this.timer=setInterval(this.callback,this.interval))}stop(){this.timer&&(clearInterval(this.timer),this.timer=null)}}class He extends d{constructor(e){super(),r(this,"sdk"),r(this,"config"),this.config=e,this.sdk=new Ue(this.config),this.initSdk()}initSdk(){const e=this.config.roomId;this.sdk.removeAllListeners(),this.config.isControl?(this.sdk.on(m.streamTrack,(e=>{const t="video"===e.kind;this.emit(m.streamTrack,t,e)})),this.sdk.on(m.cloudStatusChanged,(e=>{this.emit(m.cloudStatusChanged,e)}))):this.sdk.on(m.screenshot,(t=>this.emit(m.screenshot,e,t))),this.sdk.on(m.iceConnectionState,(t=>this.emit(m.iceConnectionState,e,t))),this.sdk.on(m.webrtcError,(t=>{this.emit(m.webrtcError,e,t),this.stop()}))}
|
|
114
114
|
// 动态更新 isControl 值
|
|
115
|
-
setIsControl(e){this.config.isControl!==e&&(this.config.isControl=e,this.initSdk())}start(){this.sdk.startConnection()}stop(){this.sdk.stop(),this.sdk.removeAllListeners()}switchControl(e){this.sdk.switchControl(e)}sendData(e,t){(this.config.canOperate||this.config.isControl)&&1===this.config.connectStatus&&this.sdk.sendChannelData(e,t)}sendControlData(e){(this.config.canOperate||this.config.isControl)&&1===this.config.connectStatus&&this.sdk.sendControlEvent(e)}requestScreenshot(e){this.sdk.sendRequestScreenshot(e)}}function Je(e,n,r,i){const o=t.ref(!1),s=t.ref({}),a=t.ref({width:0,height:0}),c=t.ref(0),d=t.ref(0),l=t.ref(null),p=t.ref(0),h=t.computed((()=>r.value%180!=0)),u=t.computed((()=>{let e=0,t=0;const n=h.value?a.value.height:a.value.width,r=h.value?a.value.width:a.value.height,i=s.value.width??720,o=s.value.height??1280,l=i/o,p=n/l;return p>r?(t=r,e=t*l):(e=n,t=p),c.value=i/e,d.value=o/t,{width:e,height:t}})),f=()=>{o.value=!1;const e=n.value;e&&e.srcObject&&(e.srcObject.getTracks().forEach((e=>e.stop())),e.srcObject=null,e.cancelVideoFrameCallback(p.value))};return t.onBeforeUnmount((()=>{l.value&&e.value&&l.value.unobserve(e.value),f()})),{videoSize:u,remoteVideo:s,dimensions:a,widthRadio:c,heightRadio:d,screenStatus:o,initVideoContainer:()=>{e.value&&(l.value=new ResizeObserver((([e])=>{const{width:t,height:n}=e.contentRect;a.value={width:t,height:n}})),l.value.observe(e.value)),(()=>{const e=n.value;if(!e)return;const r=()=>{s.value={width:e.videoWidth,height:e.videoHeight},o.value=!0,i("loadedSuccess")};e.addEventListener("loadedmetadata",r),t.onBeforeUnmount((()=>{e.removeEventListener("loadedmetadata",r)}))})()},startPlay:e=>{const t=n.value;t&&(t.srcObject||(t.srcObject=new MediaStream),t.playsInline=!0,t.setAttribute("webkit-playsinline","true"),t.srcObject.addTrack(e))},stopPlay:f}}const qe=((e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n})(t.defineComponent({__name:"index",props:{streamAngle:{default:0},videoAngle:{default:0},cursorType:{default:0},cloudDeviceSize:{default:()=>({width:0,height:0})},disabled:{type:Boolean,default:!0},bgColor:{default:"transparent"}},emits:["channelEvent","groupControlEvent","loadedSuccess"],setup(e,{expose:n,emit:r}){const i=r,o=e,{streamAngle:s,videoAngle:a,cursorType:c,cloudDeviceSize:d,disabled:l,bgColor:p}=t.toRefs(o),h=t.ref(null),u=t.ref(null),f=function(e){return t.computed((()=>{switch(e.value){case 1:return"circle-cursor";case 2:return"triangle-cursor";default:return"default-cursor"}}))}(c),{videoSize:m,dimensions:C,widthRadio:g,initVideoContainer:y,startPlay:v,stopPlay:S}=Je(h,u,a,i),{handleMouseDown:T,handleMouseMove:R,handleMouseEnter:b,handleMouseUp:w,handleMouseLeave:P,handleWheel:E}=function(e){const{remoteVideoElement:n,cloudDeviceSize:r,streamAngle:i,videoAngle:o,widthRadio:s,emit:a}=e,c=t.ref(!1),d=t.ref(0),l=t.ref(new Array(20).fill(0)),p=t.ref(new Array(10).fill(0)),h=(e,t)=>{if(!n.value)return;const s=Math.trunc(e.timeStamp-p.value[0]),c=n.value.getBoundingClientRect();let h=e.clientX-c.left,u=e.clientY-c.top;const f=r.value.width,m=r.value.height,C=Ke(c.width,c.height,f,m,o.value,i.value,h,u);if(!C||C.length<2)return;if(h=C[0],u=C[1],t===Oe.ACTION_MOVE){const e=l.value[10]-u,t=l.value[0]-h;if(Math.abs(e)<d.value&&Math.abs(t)<d.value)return}l.value[0]=h,l.value[10]=u;const g=ze(c.width,c.height,f,m,o.value,i.value,h,u),y=new Me(t,0,g[0],g[1],s);a("channelEvent",Ee.ClickData,y)},u=e=>{c.value&&(c.value=!1,h(e,Oe.ACTION_UP),n.value&&n.value.releasePointerCapture(e.pointerId))};return{isPointerDown:c,handleMouseDown:e=>{c.value=!0,n.value&&n.value.setPointerCapture(e.pointerId),p.value[0]=e.timeStamp,d.value=Math.trunc(6/s.value),h(e,Oe.ACTION_DOWN)},handleMouseMove:e=>{if(!c.value)return;if(h(e,Oe.ACTION_MOVE),!n.value)return;const t=n.value.getBoundingClientRect(),{clientX:r,clientY:i}=e;(r<t.left||r>t.right||i<t.top||i>t.bottom)&&u(e)},handleMouseEnter:e=>{1!==e.buttons||c.value||(c.value=!0,n.value&&n.value.setPointerCapture(e.pointerId),p.value[0]=e.timeStamp,d.value=Math.trunc(6/s.value),h(e,Oe.ACTION_DOWN))},handleMouseUp:u,handleMouseLeave:e=>{c.value&&(h(e,Oe.ACTION_UP),c.value=!1,n.value&&n.value.releasePointerCapture(e.pointerId))},handleWheel:e=>{const t=-1*Math.sign(e.deltaY),n=new xe(t);a("channelEvent",Ee.ActionWheel,n)}}}({remoteVideoElement:u,cloudDeviceSize:d,streamAngle:s,videoAngle:a,widthRadio:g,emit:i}),{startListening:k,stopListening:_}=function(e,n){const r=t.ref(!1),i=e=>{const t=Ve(e);n("channelEvent",Ee.ActionInput,t)};return{startListening:()=>{e&&(r.value=!0,document.addEventListener("keydown",i))},stopListening:()=>{e&&(r.value=!1,document.removeEventListener("keydown",i))}}}(l,i);!function(e,n){let r=null;t.onMounted((()=>{e.value&&(r=new ResizeObserver((e=>{for(const t of e){const{width:e,height:r}=t.contentRect;n.value={width:e,height:r}}})),r.observe(e.value))})),t.onUnmounted((()=>{null==r||r.disconnect()}))}(h,C);const A=()=>{var e;(null==(e=u.value)?void 0:e.srcObject)&&(u.value.muted=!1)};return t.onMounted((()=>{document.addEventListener("click",A),y()})),t.
|
|
115
|
+
setIsControl(e){this.config.isControl!==e&&(this.config.isControl=e,this.initSdk())}start(){this.sdk.startConnection()}stop(){this.sdk.stop(),this.sdk.removeAllListeners()}switchControl(e){this.sdk.switchControl(e)}sendData(e,t){(this.config.canOperate||this.config.isControl)&&1===this.config.connectStatus&&this.sdk.sendChannelData(e,t)}sendControlData(e){(this.config.canOperate||this.config.isControl)&&1===this.config.connectStatus&&this.sdk.sendControlEvent(e)}requestScreenshot(e){this.sdk.sendRequestScreenshot(e)}}function Je(e,n,r,i){const o=t.ref(!1),s=t.ref({}),a=t.ref({width:0,height:0}),c=t.ref(0),d=t.ref(0),l=t.ref(null),p=t.ref(0),h=t.computed((()=>r.value%180!=0)),u=t.computed((()=>{let e=0,t=0;const n=h.value?a.value.height:a.value.width,r=h.value?a.value.width:a.value.height,i=s.value.width??720,o=s.value.height??1280,l=i/o,p=n/l;return p>r?(t=r,e=t*l):(e=n,t=p),c.value=i/e,d.value=o/t,{width:e,height:t}})),f=()=>{o.value=!1;const e=n.value;e&&e.srcObject&&(e.srcObject.getTracks().forEach((e=>e.stop())),e.srcObject=null,e.cancelVideoFrameCallback(p.value))},m=()=>{if("visible"===document.visibilityState){const e=n.value;e&&e.srcObject&&e.srcObject.getTracks().forEach((e=>e.enabled=!0))}else{const e=n.value;e&&e.srcObject&&e.srcObject.getTracks().forEach((e=>e.enabled=!1))}};return t.onMounted((()=>{document.addEventListener("visibilitychange",m)})),t.onBeforeUnmount((()=>{document.removeEventListener("visibilitychange",m),l.value&&e.value&&l.value.unobserve(e.value),f()})),{videoSize:u,remoteVideo:s,dimensions:a,widthRadio:c,heightRadio:d,screenStatus:o,initVideoContainer:()=>{e.value&&(l.value=new ResizeObserver((([e])=>{const{width:t,height:n}=e.contentRect;a.value={width:t,height:n}})),l.value.observe(e.value)),(()=>{const e=n.value;if(!e)return;const r=()=>{s.value={width:e.videoWidth,height:e.videoHeight},o.value=!0,i("loadedSuccess")};e.addEventListener("loadedmetadata",r),t.onBeforeUnmount((()=>{e.removeEventListener("loadedmetadata",r)}))})()},startPlay:e=>{const t=n.value;t&&(t.srcObject||(t.srcObject=new MediaStream),t.playsInline=!0,t.setAttribute("webkit-playsinline","true"),t.srcObject.addTrack(e))},stopPlay:f}}const qe=((e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n})(t.defineComponent({__name:"index",props:{streamAngle:{default:0},videoAngle:{default:0},cursorType:{default:0},cloudDeviceSize:{default:()=>({width:0,height:0})},disabled:{type:Boolean,default:!0},bgColor:{default:"transparent"}},emits:["channelEvent","groupControlEvent","loadedSuccess"],setup(e,{expose:n,emit:r}){const i=r,o=e,{streamAngle:s,videoAngle:a,cursorType:c,cloudDeviceSize:d,disabled:l,bgColor:p}=t.toRefs(o),h=t.ref(null),u=t.ref(null),f=function(e){return t.computed((()=>{switch(e.value){case 1:return"circle-cursor";case 2:return"triangle-cursor";default:return"default-cursor"}}))}(c),{videoSize:m,dimensions:C,widthRadio:g,initVideoContainer:y,startPlay:v,stopPlay:S}=Je(h,u,a,i),{handleMouseDown:T,handleMouseMove:R,handleMouseEnter:b,handleMouseUp:w,handleMouseLeave:P,handleWheel:E}=function(e){const{remoteVideoElement:n,cloudDeviceSize:r,streamAngle:i,videoAngle:o,widthRadio:s,emit:a}=e,c=t.ref(!1),d=t.ref(0),l=t.ref(new Array(20).fill(0)),p=t.ref(new Array(10).fill(0)),h=(e,t)=>{if(!n.value)return;const s=Math.trunc(e.timeStamp-p.value[0]),c=n.value.getBoundingClientRect();let h=e.clientX-c.left,u=e.clientY-c.top;const f=r.value.width,m=r.value.height,C=Ke(c.width,c.height,f,m,o.value,i.value,h,u);if(!C||C.length<2)return;if(h=C[0],u=C[1],t===Oe.ACTION_MOVE){const e=l.value[10]-u,t=l.value[0]-h;if(Math.abs(e)<d.value&&Math.abs(t)<d.value)return}l.value[0]=h,l.value[10]=u;const g=ze(c.width,c.height,f,m,o.value,i.value,h,u),y=new Me(t,0,g[0],g[1],s);a("channelEvent",Ee.ClickData,y)},u=e=>{c.value&&(c.value=!1,h(e,Oe.ACTION_UP),n.value&&n.value.releasePointerCapture(e.pointerId))};return{isPointerDown:c,handleMouseDown:e=>{c.value=!0,n.value&&n.value.setPointerCapture(e.pointerId),p.value[0]=e.timeStamp,d.value=Math.trunc(6/s.value),h(e,Oe.ACTION_DOWN)},handleMouseMove:e=>{if(!c.value)return;if(h(e,Oe.ACTION_MOVE),!n.value)return;const t=n.value.getBoundingClientRect(),{clientX:r,clientY:i}=e;(r<t.left||r>t.right||i<t.top||i>t.bottom)&&u(e)},handleMouseEnter:e=>{1!==e.buttons||c.value||(c.value=!0,n.value&&n.value.setPointerCapture(e.pointerId),p.value[0]=e.timeStamp,d.value=Math.trunc(6/s.value),h(e,Oe.ACTION_DOWN))},handleMouseUp:u,handleMouseLeave:e=>{c.value&&(h(e,Oe.ACTION_UP),c.value=!1,n.value&&n.value.releasePointerCapture(e.pointerId))},handleWheel:e=>{const t=-1*Math.sign(e.deltaY),n=new xe(t);a("channelEvent",Ee.ActionWheel,n)}}}({remoteVideoElement:u,cloudDeviceSize:d,streamAngle:s,videoAngle:a,widthRadio:g,emit:i}),{startListening:k,stopListening:_}=function(e,n){const r=t.ref(!1),i=e=>{const t=Ve(e);n("channelEvent",Ee.ActionInput,t)};return{startListening:()=>{e&&(r.value=!0,document.addEventListener("keydown",i))},stopListening:()=>{e&&(r.value=!1,document.removeEventListener("keydown",i))}}}(l,i);!function(e,n){let r=null;t.onMounted((()=>{e.value&&(r=new ResizeObserver((e=>{for(const t of e){const{width:e,height:r}=t.contentRect;n.value={width:e,height:r}}})),r.observe(e.value))})),t.onUnmounted((()=>{null==r||r.disconnect()}))}(h,C);const A=()=>{var e;(null==(e=u.value)?void 0:e.srcObject)&&(u.value.muted=!1)};return t.onMounted((()=>{document.addEventListener("click",A),y()})),t.onBeforeUnmount((()=>{document.removeEventListener("click",A)})),n({startPlay:v,stopPlay:S,remoteVideoElement:u}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"videoContainer",ref:h,class:"flex flex-1 items-center justify-center",style:{width:"100%",height:"100%",position:"relative",overflow:"hidden"}},[t.createElementVNode("div",{ref:"keyboardArea",onPointerenter:n[6]||(n[6]=//@ts-ignore
|
|
116
116
|
(...e)=>t.unref(k)&&t.unref(k)(...e)),onPointerleave:n[7]||(n[7]=//@ts-ignore
|
|
117
117
|
(...e)=>t.unref(_)&&t.unref(_)(...e)),class:"vContainer",style:t.normalizeStyle([{height:t.unref(m).height+"px",width:t.unref(m).width+"px",transform:`rotate(${t.unref(a)}deg)`},{position:"relative",overflow:"hidden"}])},[t.createElementVNode("video",{ref_key:"remoteVideoElement",ref:u,class:t.normalizeClass(["video-control",[t.unref(f),{"no-events":t.unref(l)}]]),onPointerenter:n[0]||(n[0]=//@ts-ignore
|
|
118
118
|
(...e)=>t.unref(b)&&t.unref(b)(...e)),onPointerdown:n[1]||(n[1]=//@ts-ignore
|
|
@@ -120,7 +120,7 @@ setIsControl(e){this.config.isControl!==e&&(this.config.isControl=e,this.initSdk
|
|
|
120
120
|
(...e)=>t.unref(R)&&t.unref(R)(...e)),onPointerup:n[3]||(n[3]=//@ts-ignore
|
|
121
121
|
(...e)=>t.unref(w)&&t.unref(w)(...e)),onPointerleave:n[4]||(n[4]=//@ts-ignore
|
|
122
122
|
(...e)=>t.unref(P)&&t.unref(P)(...e)),onWheel:n[5]||(n[5]=//@ts-ignore
|
|
123
|
-
(...e)=>t.unref(E)&&t.unref(E)(...e)),style:t.normalizeStyle({backgroundColor:`${t.unref(p)}`}),autoplay:"",playsinline:"",muted:"",disablePictureInPicture:!0},null,38)],36)],512))}}),[["__scopeId","data-v-
|
|
123
|
+
(...e)=>t.unref(E)&&t.unref(E)(...e)),style:t.normalizeStyle({backgroundColor:`${t.unref(p)}`}),autoplay:"",playsinline:"",muted:"",disablePictureInPicture:!0},null,38)],36)],512))}}),[["__scopeId","data-v-26654e99"]]);e.ActionCommandEventType=Ae,e.ActionCommandEventValue=ke,e.ActionCommandType=_e,e.ActionType=Oe,e.ChannelDataType=Ee,e.ClarityData=class{constructor(e){r(this,"level"),this.level=e}},e.ContainerDirection=De,e.EmitType=m,e.GestureData=class{constructor(e){r(this,"mode"),this.mode=e}},e.GroupControllerManager=class extends d{constructor(e=1e3,t=new Be){super(),r(this,"configs",new Map),r(this,"controllers",new Map),r(this,"visibility"),r(this,"loopManager"),this.visibility=t,this.loopManager=new Ge(e,(()=>this.handleLoop()))}startControl(e){if(!e.size)throw new Error("配置为空");if(1!==Array.from(e.values()).filter((e=>e.isControl)).length)throw new Error("必须且仅有一个主控");this.configs=new Map(e),this.configs.forEach((e=>this.addController(e))),this.loopManager.start()}switchToMain(e,t){e&&t&&(this.switchControl(e,!0),this.switchControl(t,!1))}switchControl(e,t){let n=this.getController(e);null==n||n.setIsControl(t),null==n||n.switchControl(t)}
|
|
124
124
|
/**
|
|
125
125
|
* 找到当前主控config, 设置为从控
|
|
126
126
|
*/clearCurrentControl(){for(const[e,t]of this.configs.entries())if(t.isControl)return this.configs.set(e,{...t,isControl:!1}),e}
|