yjz-web-sdk 1.0.2-beta.1 → 1.0.2-beta.2

package/lib/core/data/WebrtcDataType.d.ts

@@ -160,6 +160,8 @@ export interface ScreenStats {
     bitrate: string;
     pliCount: number;
     averageDecodeTime: number;
+    framesDecoded: number;
+    framesReceived: number;
 }
 export interface CloudStatusPayload {
     direction: number;

package/lib/yjz-web-sdk.js

@@ -3479,6 +3479,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) => {
@@ -3490,6 +3491,8 @@ class WebRTCClient extends EventEmitter {
             videoFps = report.framesPerSecond || 0;
             totalDecodeTime = report.totalDecodeTime || 0;
             framesDecoded = report.framesDecoded || 0;
+            framesReceived = report.framesReceived || 0;
+            console.log("接收:", report.framesReceived, "解码:", report.framesDecoded);
             pliCount = (report.pliCount || 0) + (report.firCount || 0);
           }
         }
@@ -3532,7 +3535,9 @@ class WebRTCClient extends EventEmitter {
         // percent
         bitrate,
         pliCount,
-        averageDecodeTime
+        averageDecodeTime,
+        framesDecoded,
+        framesReceived
       };
       this.emit(EmitType.statisticInfo, screenInfo);
     }).catch((error) => {

package/lib/yjz-web-sdk.umd.cjs

@@ -63,9 +63,9 @@ sdp:le};switch(r.browser){case"chrome":if(!U||!N||!t.shimChrome)return n("Chrome
 /**
      * 生成清晰度数据（clarity）
      * @param data 清晰度数据
-     */static clarity(e){return new Me("ActionClarity",this.formatData(e))}}class xe 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=Me.click(t);break;case Ee.ClipboardData:r=Me.clipboard(t);break;case Ee.ActionInput:r=Me.input(t);break;case Ee.ActionChinese:r=Me.chinese(t);break;case Ee.ActionRequestCloudDeviceInfo:r=Me.requestCloudDeviceInfo();break;case Ee.ActionClarity:r=Me.clarity(t);break;case Ee.ActionWheel:r=Me.wheel(t);break;case Ee.ActionGesture:r=Me.gesture(t);break;case Ee.ActionCommand:r=Me.action(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))),Pe(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,Pe(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.stunServerUriAli},{urls:e.turnServerUri,username:e.turnServerUserName,credential:e.turnServerPassword}];return new RTCPeerConnection({iceServers:t,iceTransportPolicy:"all",bundlePolicy:"max-bundle",rtcpMuxPolicy:"require",iceCandidatePoolSize:10})})(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||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),o={direction:[Ae.ROTATION_0,Ae.ROTATION_180].includes(e)?De.Vertical:De.Horizontal,screenWidth:n,screenHeight:r,gestureMode:i};this.emit(m.cloudStatusChanged,o)}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="";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,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&&(d=this.getConnectionType(t,n))}})),r=Math.floor(1e3*(r||0));const l=p-this.lastReportTime,h=s-this.lastBytesReceived,u=(l>0?1e3*h/l:0)/1024,f=u/1024;this.lastBytesReceived=s,this.lastReportTime=p;let C=0;const v=i-this.lastPacketsLost,g=o-this.lastPacketsReceived;v>0&&g>0&&(C=v/(v+g),this.maxLostRate=Math.max(this.maxLostRate||0,C),this.lostPacketCount++),this.lastPacketsLost=i,this.lastPacketsReceived=o;const y=void 0!==t?t:a-this.lastSecondDecodedCount;this.lastSecondDecodedCount=a;const S=u<1024?`${Math.floor(u)} KB/s`:`${Math.floor(f)} MB/s`,T=a>0?Math.floor(1e4*n/a):0,R={connectionType:d,framesPerSecond:y,currentRoundTripTime:r,lostRate:Math.floor(100*C),
+     */static clarity(e){return new Me("ActionClarity",this.formatData(e))}}class xe 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=Me.click(t);break;case Ee.ClipboardData:r=Me.clipboard(t);break;case Ee.ActionInput:r=Me.input(t);break;case Ee.ActionChinese:r=Me.chinese(t);break;case Ee.ActionRequestCloudDeviceInfo:r=Me.requestCloudDeviceInfo();break;case Ee.ActionClarity:r=Me.clarity(t);break;case Ee.ActionWheel:r=Me.wheel(t);break;case Ee.ActionGesture:r=Me.gesture(t);break;case Ee.ActionCommand:r=Me.action(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))),Pe(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,Pe(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.stunServerUriAli},{urls:e.turnServerUri,username:e.turnServerUserName,credential:e.turnServerPassword}];return new RTCPeerConnection({iceServers:t,iceTransportPolicy:"all",bundlePolicy:"max-bundle",rtcpMuxPolicy:"require",iceCandidatePoolSize:10})})(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||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),o={direction:[Ae.ROTATION_0,Ae.ROTATION_180].includes(e)?De.Vertical:De.Horizontal,screenWidth:n,screenHeight:r,gestureMode:i};this.emit(m.cloudStatusChanged,o)}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,p="";const l=Date.now();e.forEach((l=>{if("inbound-rtp"===l.type&&(s+=l.bytesReceived||0,i+=l.packetsLost||0,o+=l.packetsReceived||0,"video"===l.kind&&(t=l.framesPerSecond||0,n=l.totalDecodeTime||0,a=l.framesDecoded||0,d=l.framesReceived||0,c=(l.pliCount||0)+(l.firCount||0))),"candidate-pair"===l.type&&"succeeded"===l.state){r=void 0!==l.currentRoundTripTime?l.currentRoundTripTime:l.responsesReceived>0?l.totalRoundTripTime/l.responsesReceived:0;const t=e.get(l.localCandidateId),n=e.get(l.remoteCandidateId);t&&n&&(p=this.getConnectionType(t,n))}})),r=Math.floor(1e3*(r||0));const h=l-this.lastReportTime,u=s-this.lastBytesReceived,f=(h>0?1e3*u/h:0)/1024,C=f/1024;this.lastBytesReceived=s,this.lastReportTime=l;let v=0;const g=i-this.lastPacketsLost,y=o-this.lastPacketsReceived;g>0&&y>0&&(v=g/(g+y),this.maxLostRate=Math.max(this.maxLostRate||0,v),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:p,framesPerSecond:S,currentRoundTripTime:r,lostRate:Math.floor(100*v),
 // percent
-bitrate:S,pliCount:c,averageDecodeTime:T};this.emit(m.statisticInfo,R)})).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"}}const Le={
+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"}}const Le={
 // 数字键
 Digit1:8,Digit2:9,Digit3:10,Digit4:11,Digit5:12,Digit6:13,Digit7:14,Digit8:15,Digit9:16,Digit0:7,
 // 符号键（主键盘区）

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yjz-web-sdk",
   "private": false,
-  "version": "1.0.2-beta.1",
+  "version": "1.0.2-beta.2",
   "type": "module",
   "description": "针对于亚矩阵项目的云手机投屏和屏幕控制",
   "license": "Apache-2.0",