rgbd 0.0.18 → 0.0.19
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/dist/rgbd.js +9 -14
- package/package.json +1 -1
package/dist/rgbd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var E=class{constructor(){this.context=null,this.sourceNodes=null,this.gainNode=null,this.volume=1,this.sampleRate=0,this.numChannels=0,this.timeSuspended=0,this.timeOffset=0,this.lastTime=0,this.context=null,this.isPaused=!1,this.loopHandle=null}start(
|
|
1
|
+
var E=class{constructor(){this.context=null,this.sourceNodes=null,this.gainNode=null,this.volume=1,this.sampleRate=0,this.numChannels=0,this.timeSuspended=0,this.timeOffset=0,this.lastTime=0,this.context=null,this.isPaused=!1,this.loopHandle=null}start(a={}){if(this.context)throw new Error("Audio manager already started!");this.audioEnabled=a.audioEnabled??!0,this.sampleRate=a.sampleRate??44100,this.numChannels=a.numChannels??2,this.context=new AudioContext({sampleRate:this.sampleRate}),this.isPaused&&this.context.suspend(),this.sourceNodes=new Set,this.gainNode=this.context.createGain(),this.gainNode.gain.value=this.volume,this.gainNode.connect(this.context.destination),this.timeSuspended=0,this.timeOffset=0,this.lastTime=performance.now(),this.loopHandle=setInterval(()=>{let o=performance.now();!this.isPaused&&this.context.state==="suspended"&&(this.timeSuspended+=(o-this.lastTime)/1e3),this.lastTime=o},a.updateInterval??10),this.context.onstatechange=()=>{let o=performance.now();this.context?.state==="running"&&(this.timeSuspended+=(o-this.lastTime)/1e3),this.lastTime=o}}async stop(){if(!this.context)throw new Error("Audio manager not started!");clearInterval(this.loopHandle),this.loopHandle=null,await this.context.suspend(),this.context=null}started(){return this.context!=null}getTime(){return(this.context?.currentTime??0)+this.timeSuspended+this.timeOffset}getLatency(){return this.context?(this.context.outputLatency??0)+this.context.baseLatency:0}getVideoTime(){return this.getTime()-this.getLatency()}setVideoTime(a){if(a+=this.getLatency(),this.sourceNodes!=null){for(let o of this.sourceNodes)try{o.stop()}catch{}this.sourceNodes.clear()}this.timeOffset=a-((this.context?.currentTime??0)+this.timeSuspended)}setVolume(a){this.volume=a,this.gainNode&&(this.gainNode.gain.value=a)}async resumeContext(){if(!this.context)throw new Error("Audio manager not started!");this.context.state==="suspended"&&!this.isPaused&&await this.context.resume()}async pause(){this.isPaused||(this.context&&await this.context.suspend(),this.isPaused=!0)}async play(){this.isPaused&&(this.context&&await this.context.resume(),this.isPaused=!1)}scheduleChunk(a,o){let p=a[0].length;if(p<=0)return;let m=this.context.createBuffer(this.numChannels,p,this.sampleRate);for(let u=0;u<this.numChannels;u++)m.copyToChannel(a[u],u);if(o-=this.timeSuspended+this.timeOffset,o>this.context.currentTime&&this.context.state!=="suspended"){let u=this.context.createBufferSource();u.buffer=m,u.connect(this.gainNode),this.sourceNodes.add(u),u.onended=()=>this.sourceNodes.delete(u),u.start(o)}this.playHead+=m.duration}};import*as x from"mp4box";var T=class{constructor(a,o){this.u=a,this.j=0,this.mt=o}write(a){let o=new ArrayBuffer(a.byteLength);new Uint8Array(o).set(a),o.fileStart=this.j,this.j+=o.byteLength,this.u.appendBuffer(o)}close(){this.u.flush(),this.mt()}},_=class{constructor(a,o,{onConfig:p,onChunk:m,onEndOfStream:u}){if(this.L=o,this.q=p,this.ft=m,this.u=x.createFile(),this.u.onReady=this.pt.bind(this),this.u.onSamples=this.gt.bind(this),a instanceof ArrayBuffer)a.fileStart=0,this.u.appendBuffer(a),this.u.flush(),u();else{let v=new T(this.u,u);fetch(a).then(t=>{t.body.pipeTo(new WritableStream(v,{highWaterMark:2}))})}}K(a){let p=this.u.getTrackById(a.id).mdia.minf.stbl.stsd.entries[0];if(this.L)return p.esds.esd.descs[0].descs[0].data;{let m=p.avcC||p.hvcC||p.vpcC||p.av1C;if(!m)return null;let u=new x.DataStream(void 0,0,x.DataStream.BIG_ENDIAN);return m.write(u),new Uint8Array(u.buffer,8)}}pt(a){if(this.L){let o=a.audioTracks[0];this.q(o?{codec:o.codec,sampleRate:o.audio.sample_rate,numberOfChannels:o.audio.channel_count,description:this.K(o)}:null),o&&this.u.setExtractionOptions(o.id)}else{let o=a.videoTracks[0];this.q({codec:o.codec.startsWith("vp08")?"vp8":o.codec,codedHeight:o.video.height,codedWidth:o.video.width,description:this.K(o)}),this.u.setExtractionOptions(o.id)}this.u.start()}gt(a,o,p){for(let m of p){let u;this.L?u=EncodedAudioChunk:u=EncodedVideoChunk,this.ft(new u({type:m.is_sync?"key":"delta",timestamp:1e6*m.cts/m.timescale,duration:1e6*m.duration/m.timescale,data:m.data}))}}};var C=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u",b,y,w;if(!C)b=class{},y=class{},w=class{};else{let A=`#version 300 es
|
|
2
2
|
|
|
3
3
|
precision mediump float;
|
|
4
4
|
precision mediump int;
|
|
@@ -11,6 +11,7 @@ var E=class{constructor(){this.context=null,this.sourceNodes=null,this.gainNode=
|
|
|
11
11
|
uniform float u_depthMin;
|
|
12
12
|
uniform float u_depthMax;
|
|
13
13
|
uniform ivec2 u_grid;
|
|
14
|
+
uniform uint u_xr;
|
|
14
15
|
|
|
15
16
|
out vec2 v_uv;
|
|
16
17
|
|
|
@@ -46,15 +47,19 @@ var E=class{constructor(){this.context=null,this.sourceNodes=null,this.gainNode=
|
|
|
46
47
|
|
|
47
48
|
float depth = texture(u_depthImage, uv).r;
|
|
48
49
|
float z = mix(u_depthMin, u_depthMax, depth);
|
|
50
|
+
if(u_xr != 0u)
|
|
51
|
+
z *= -1.0;
|
|
49
52
|
|
|
50
53
|
vec2 pixelPos = uv * u_imageSize;
|
|
51
54
|
vec2 pos = (pixelPos - u_imageSize * 0.5) * z / u_focal;
|
|
55
|
+
if(u_xr != 0u)
|
|
56
|
+
pos.x *= -1.0;
|
|
52
57
|
|
|
53
58
|
v_uv = uv;
|
|
54
59
|
gl_Position = u_projMat * u_viewMat * vec4(pos.x, pos.y, z, 1.0);
|
|
55
60
|
}
|
|
56
61
|
|
|
57
|
-
`,
|
|
62
|
+
`,a=`#version 300 es
|
|
58
63
|
|
|
59
64
|
precision mediump float;
|
|
60
65
|
|
|
@@ -65,23 +70,13 @@ var E=class{constructor(){this.context=null,this.sourceNodes=null,this.gainNode=
|
|
|
65
70
|
uniform sampler2D u_colorImage;
|
|
66
71
|
uniform sampler2D u_depthImage;
|
|
67
72
|
|
|
68
|
-
uniform vec2 u_targetRes;
|
|
69
|
-
uniform float u_discardCutoff;
|
|
70
|
-
|
|
71
73
|
void main()
|
|
72
74
|
{
|
|
73
|
-
float deriv = min(
|
|
74
|
-
length(dFdx(v_uv) * u_targetRes),
|
|
75
|
-
length(dFdy(v_uv) * u_targetRes)
|
|
76
|
-
);
|
|
77
|
-
if(deriv < u_discardCutoff)
|
|
78
|
-
discard;
|
|
79
|
-
|
|
80
75
|
fragColor = texture(u_colorImage, v_uv);
|
|
81
76
|
}
|
|
82
|
-
`;class
|
|
77
|
+
`;class p extends HTMLElement{constructor(){super(),this.s={GRID_SIZE:250,FOCAL_LENGTH:1200,DEPTH_MIN:.1,DEPTH_MAX:10,CAM_RADIUS:1.5,CAM_MAX_THETA:Math.PI/40,CAM_MAX_PHI:Math.PI/64,CAM_FOV:Math.PI/4,CAM_SMOOTHNESS:.9,BOOMERANG_SPEED:0,BACKGROUND_COLOR:[0,0,0]},this.P=null,this.i=null,this.t=null,this.d=null,this.h=null,this.S=null,this.T={},this.f=null,this.m={x:0,y:0,hovered:!1},this.r={theta:Math.PI,phi:0,radius:this.s.CAM_RADIUS},this.k=0,this.A=null,this.O=!1,this.Y=null,this.Z=null,this.J=this.w.bind(this),this.Q=this.xt.bind(this),this.$=this._t.bind(this),this.v=this.F.bind(this),this.tt=!1,this.o=null,this.N=null,this.At=!1,this.p=null,this.P=this.attachShadow({mode:"open"});let t=document.createElement("div");t.style.position="relative",t.style.width="100%",t.style.height="100%",t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="center",t.style.background="black",this.P.appendChild(t);let e=document.createElement("style");e.textContent=`
|
|
83
78
|
:host { display: inline-block; width: 300px; height: 200px; }
|
|
84
79
|
:host([fullbleed]) { display:block; width:100%; height:100%; }
|
|
85
80
|
canvas { touch-action: none; }
|
|
86
81
|
.cover-img, .cover-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
|
|
87
|
-
`,this.w.appendChild(e),this.i=document.createElement("canvas"),this.i.style.width="100%",this.i.style.height="100%",this.i.style.objectFit="contain",this.i.setAttribute("role","img"),this.i.setAttribute("aria-label","3D image"),t.appendChild(this.i),this.P=this.U.bind(this),this.L=this.ut.bind(this),this.O=this.ct.bind(this),this.k=this.N.bind(this)}connectedCallback(){this.F();let t;try{this.lt(),t=!1}catch{t=!0}window.addEventListener("resize",this.P),window.addEventListener("mousemove",this.L),document.addEventListener("mouseleave",this.O),t?this.H():(this.U(),this.I=!0,this.S=performance.now(),this.D=requestAnimationFrame(this.k))}disconnectedCallback(){this.I=!1,cancelAnimationFrame(this.D),window.removeEventListener("resize",this.P),this.i.removeEventListener("pointermove",this.L),this.i.removeEventListener("pointerleave",this.O);try{if(this.m){let t=this.m;this.R&&t.deleteProgram(this.R);for(let e in this.E)t.deleteTexture(this.E[e].tex)}}catch{}}setViewMatrix(t){this.Y=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.Z=t&&t.length===16?new Float32Array(t):null}get width(){return this.g(this.t)}get height(){return this._(this.t)}lt(){let t=this.i.getContext("webgl2",{antialias:!0,alpha:!1});if(!t)throw new Error("WebGL not supported");this.m=t;let e=this.dt(t,x,o);if(!e)return;this.R=e,t.useProgram(e);let s=this.J(t),i=this.J(t);this.E.color=s,this.E.depth=i,this.A("color",this.t),this.A("depth",this.l);let n=t.getUniformLocation(e,"u_colorImage"),h=t.getUniformLocation(e,"u_depthImage");t.uniform1i(n,0),t.uniform1i(h,1),this.d={uProjection:t.getUniformLocation(e,"u_projMat"),uView:t.getUniformLocation(e,"u_viewMat"),uImageSize:t.getUniformLocation(e,"u_imageSize"),uFocal:t.getUniformLocation(e,"u_focal"),uDepthMin:t.getUniformLocation(e,"u_depthMin"),uDepthMax:t.getUniformLocation(e,"u_depthMax"),uGridSegs:t.getUniformLocation(e,"u_grid"),uTargetRes:t.getUniformLocation(e,"u_targetRes"),uDiscardCutoff:t.getUniformLocation(e,"u_discardCutoff")}}N(t){if(!this.I||!this.m)return;let e=this.m,s=t-this.S;this.S=t,this.Q(),e.clearColor(...this.s.BACKGROUND_COLOR,1),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.enable(e.DEPTH_TEST),this.f.hovered||(this.f.x=Math.sin(t*this.s.BOOMERANG_SPEED),this.f.y=Math.sin(t*this.s.BOOMERANG_SPEED*.5+Math.PI));let i=this.f.x*this.s.CAM_MAX_THETA+Math.PI,n=-this.f.y*this.s.CAM_MAX_PHI,h=this.f.hovered?this.s.CAM_RADIUS*.8:this.s.CAM_RADIUS;this.r.theta=this.G(i,this.r.theta,s),this.r.phi=this.G(n,this.r.phi,s),this.r.radius=this.G(h,this.r.radius,s);let a=this.i.width/this.i.height,c=Math.max(1,Math.floor(this.s.GRID_SIZE)),p=Math.max(1,Math.round(c/a)),d=this.g(this.t),f=this._(this.t);e.uniform2f(this.d.uImageSize,d,f),e.uniform1f(this.d.uFocal,this.s.FOCAL_LENGTH),e.uniform1f(this.d.uDepthMin,this.s.DEPTH_MIN),e.uniform1f(this.d.uDepthMax,this.s.DEPTH_MAX),e.uniform2i(this.d.uGridSegs,c,p),e.uniform2f(this.d.uTargetRes,this.i.width,this.i.height),e.uniform1f(this.d.uDiscardCutoff,this.s.DISCARD_CUTOFF);let g=[this.r.radius*Math.cos(this.r.phi)*Math.sin(this.r.theta),this.r.radius*Math.sin(this.r.phi),this.s.CAM_RADIUS+this.r.radius*Math.cos(this.r.phi)*Math.cos(this.r.theta)],M=[0,0,this.s.CAM_RADIUS],w=[0,-1,0],R=this.Y||new Float32Array(this.ft(g,M,w)),S=this.Z||new Float32Array(this.mt(this.s.CAM_FOV,a,.1,100));e.uniformMatrix4fv(this.d.uView,!1,R),e.uniformMatrix4fv(this.d.uProjection,!1,S),e.drawArrays(e.TRIANGLES,0,c*p*6),this.D=requestAnimationFrame(this.k)}ut(t){let e=this.i.getBoundingClientRect();this.f.hovered=!0,this.f.x=(t.clientX-e.left)/e.width*2-1,this.f.y=(t.clientY-e.top)/e.height*2-1}ct(){this.f.hovered=!1}U(){let t=window.devicePixelRatio||1,e=this.i.parentElement;if(!e)return;let s=e.clientWidth,i=e.clientHeight,n=this.g(this.t)||1,h=this._(this.t)||1,a=n/h,c=s,p=c/a;p>i&&(p=i,c=p*a);let d=Math.max(1,Math.floor(c*t)),f=Math.max(1,Math.floor(p*t));this.i.width=d,this.i.height=f,this.m&&this.m.viewport(0,0,d,f)}F(){let t=this.s;if(this.hasAttribute("grid-size")&&(t.GRID_SIZE=parseInt(this.getAttribute("grid-size"))??t.GRID_SIZE),this.hasAttribute("focal-length")&&(t.FOCAL_LENGTH=parseFloat(this.getAttribute("focal-length"))??t.FOCAL_LENGTH),this.hasAttribute("depth-min")&&(t.DEPTH_MIN=parseFloat(this.getAttribute("depth-min"))??t.DEPTH_MIN),this.hasAttribute("depth-max")&&(t.DEPTH_MAX=parseFloat(this.getAttribute("depth-max"))??t.DEPTH_MAX),this.hasAttribute("discard-cutoff")&&(t.DISCARD_CUTOFF=parseFloat(this.getAttribute("discard-cutoff"))??t.DISCARD_CUTOFF),this.hasAttribute("cam-radius")&&(t.CAM_RADIUS=parseFloat(this.getAttribute("cam-radius"))??t.CAM_RADIUS),this.hasAttribute("cam-max-theta")&&(t.CAM_MAX_THETA=parseFloat(this.getAttribute("cam-max-theta"))??t.CAM_MAX_THETA),this.hasAttribute("cam-max-phi")&&(t.CAM_MAX_PHI=parseFloat(this.getAttribute("cam-max-phi"))??t.CAM_MAX_PHI),this.hasAttribute("cam-fov")&&(t.CAM_FOV=parseFloat(this.getAttribute("cam-fov"))??t.CAM_FOV),this.hasAttribute("cam-smoothness")&&(t.CAM_SMOOTHNESS=parseFloat(this.getAttribute("cam-smoothness"))??t.CAM_SMOOTHNESS),this.hasAttribute("boomerang-speed")&&(t.BOOMERANG_SPEED=parseFloat(this.getAttribute("boomerang-speed"))??t.BOOMERANG_SPEED),this.hasAttribute("background-color"))try{let e=this.getAttribute("background-color").split(",").map(Number);e.length===3&&(t.BACKGROUND_COLOR=e)}catch{}}$(t,e,s){let i=t.createShader(e);return t.shaderSource(i,s),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(console.error(t.getShaderInfoLog(i)),t.deleteShader(i),null)}dt(t,e,s){let i=this.$(t,t.VERTEX_SHADER,e),n=this.$(t,t.FRAGMENT_SHADER,s);if(!i||!n)return null;let h=t.createProgram();return t.attachShader(h,i),t.attachShader(h,n),t.linkProgram(h),t.getProgramParameter(h,t.LINK_STATUS)?(t.deleteShader(i),t.deleteShader(n),h):(console.error(t.getProgramInfoLog(h)),t.deleteProgram(h),null)}J(t){let e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),{tex:e,width:0,height:0}}A(t,e){if(!this.m)return;let s=this.m,i=this.E[t];if(s.activeTexture(t==="color"?s.TEXTURE0:s.TEXTURE1),s.bindTexture(s.TEXTURE_2D,i.tex),!this.B(e)){s.texImage2D(s.TEXTURE_2D,0,s.RGBA,1,1,0,s.RGBA,s.UNSIGNED_BYTE,new Uint8Array([0,0,0,0]));return}try{s.pixelStorei(s.UNPACK_FLIP_Y_WEBGL,!1),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,e),(this.g(e)!=i.width||this._(e)!=i.height)&&(this.U(),i.width=this.g(e),i.height=this._(e))}catch{}}mt(t,e,s,i){let n=1/Math.tan(t/2);return[n/e,0,0,0,0,n,0,0,0,0,(i+s)/(s-i),-1,0,0,2*i*s/(s-i),0]}ft(t,e,s){function i(d){let f=Math.hypot(...d)||1;return d.map(g=>g/f)}function n(d,f){return[d[1]*f[2]-d[2]*f[1],d[2]*f[0]-d[0]*f[2],d[0]*f[1]-d[1]*f[0]]}function h(d,f){return d.map((g,M)=>g-f[M])}let a=i(h(t,e)),c=i(n(s,a)),p=n(a,c);return[c[0],p[0],a[0],0,c[1],p[1],a[1],0,c[2],p[2],a[2],0,-(c[0]*t[0]+c[1]*t[1]+c[2]*t[2]),-(p[0]*t[0]+p[1]*t[1]+p[2]*t[2]),-(a[0]*t[0]+a[1]*t[1]+a[2]*t[2]),1]}G(t,e,s){let i=(1-this.s.CAM_SMOOTHNESS)*s/16.67,n=Math.sign(t-e);return e+=(t-e)*i,Math.sign(t-e)!==n&&(e=t),e}H(){throw new Error("Must implement _createFallback")}Q(){}B(t){throw new Error("Must implement _isSourceReady")}g(t){throw new Error("Must implement _getSourceWidth")}_(t){throw new Error("Must implement _getSourceHeight")}}T=m;class l extends T{static get observedAttributes(){return["color-src","depth-src","grid-size","focal-length","depth-min","depth-max","discard-cutoff","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color"]}constructor(){super(),this.t=new Image,this.l=new Image,this.t.crossOrigin="anonymous",this.l.crossOrigin="anonymous",this.t.onload=()=>this.A("color",this.t),this.l.onload=()=>this.A("depth",this.l)}attributeChangedCallback(t,e,s){e!==s&&(t==="color-src"?this.t.src=s||"":t==="depth-src"?this.l.src=s||"":this.F())}H(){this.t.style.display="block",this.t.classList.add("cover-img"),this.i.parentElement.appendChild(this.t)}B(t){return t&&t.complete&&t.naturalWidth>0}g(t){return t?t.width:1}_(t){return t?t.height:1}}C=l;class u extends T{static get observedAttributes(){return["color-src","depth-src","grid-size","focal-length","depth-min","depth-max","discard-cutoff","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color","autoplay","loop","muted","controls"]}constructor(){super(),this.n=[],this.o=[],this.a=[],this.X=!1,this.V=!1,this.T=!0,this.e=new E,this.e.pause(),this.z=!1,this.h=document.createElement("div"),this.h.classList.add("rgbd-controls"),this.h.style.position="absolute",this.h.style.bottom="8px",this.h.style.left="8px",this.h.style.right="8px",this.h.style.height="32px",this.h.style.display="none",this.h.style.background="rgba(0,0,0,0.4)",this.h.style.borderRadius="4px",this.h.style.color="white",this.h.style.display="flex",this.h.style.alignItems="center",this.h.style.gap="8px",this.h.style.padding="4px 8px",this.shadowRoot.appendChild(this.h),this.p=document.createElement("button"),this.p.textContent="\u25B6",this.p.style.cursor="pointer",this.p.style.background="transparent",this.p.style.color="white",this.p.style.border="none",this.p.style.fontSize="18px",this.p.addEventListener("click",()=>{this.paused?this.play():this.pause()}),this.h.appendChild(this.p),this.c=document.createElement("input"),this.c.type="range",this.c.min="0",this.c.max="1",this.c.value="0",this.c.step="any",this.c.style.flex="1",this.c.addEventListener("input",()=>{let t=this.n[0];if(!t||!t.duration)return;let e=t.startTime+this.c.value*t.duration;this.currentTime=e}),this.h.appendChild(this.c)}disconnectedCallback(){this.e.started()&&this.e.stop(),super.disconnectedCallback()}attributeChangedCallback(t,e,s){e!==s&&(t==="color-src"?this.clear().then(()=>{this.n=[this.v(s,0,!1)],this.a=[this.v(s,0,!0)],this.tt=this.n[0],this.et=this.a[0]}):t==="depth-src"?(this.o=[this.v(s,0,!1)],this.it=this.o[0]):t==="autoplay"?(this.X=this.hasAttribute("autoplay"),this.X&&this.e.play()):t==="loop"?this.V=this.hasAttribute("loop"):t==="muted"?(this.T=this.hasAttribute("muted"),this.e.setVolume(this.T?0:1),!this.T&&this.e.started()&&this.e.resumeContext()):t==="controls"?(this.z=this.hasAttribute("controls"),this.h.style.display=this.z?"flex":"none"):this.F())}async play(){await this.e.play()}async pause(){await this.e.pause()}async clear(){for(let t=0;t<this.n.length;t++)this.M(this.n[t]);for(let t=0;t<this.o.length;t++)this.M(this.o[t]);for(let t=0;t<this.a.length;t++)this.M(this.a[t]);this.e.setVideoTime(0),this.e.started()&&await this.e.stop()}enqueue(t,e,s){this.n.push(this.v(t,s,!1)),this.o.push(this.v(e,s,!1)),this.a.push(this.v(t,s,!0))}get paused(){return this.e.isPaused}get currentTime(){return this.e.getVideoTime()}set currentTime(t){let e=s=>{if(s.length==0)return;this.M(s[0]),s[0]=this.C(s[0],s[0].startTime);let i=s[0];i.demuxer!=null&&console.error("Demuxing not yet finished!");let n=Number.MAX_VALUE,h=-1;for(let a=0;a<i.chunks.length;a++){if(i.chunks[a].type!=="key")continue;let c=Math.abs(t-i.startTime+i.chunks[a].timestamp/1e6);c<n&&(n=c,h=a)}h<0||(i.curChunk=h)};this.e.setVideoTime(t),this.W=null,e(this.n),e(this.o),e(this.a)}get volume(){return this.e.volume}set volume(t){this.e.setVolume(t)}pt(t){if(this.e.started()){if(t.sampleRate!=this.e.sampleRate)throw new Error("Audio configs have mismatched sample rates!");if(t.numChannels!=this.e.numChannels)throw new Error("Audio configs have mismatched channel counts!")}else this.e.start(t?{sampleRate:t.sampleRate,numChannels:t.numChannels,volume:1}:{audioEnabled:!1}),this.T||this.e.resumeContext()}st(t,e){let s=e+t.timestamp/1e6,i=[];for(let n=0;n<t.numberOfChannels;n++){let h=new Float32Array(t.numberOfFrames);t.copyTo(h,{planeIndex:n,format:"f32-planar"}),i.push(h)}this.e.scheduleChunk(i,s)}v(t,e,s){let i={startTime:e,isAudio:s,duration:0,demuxer:null,decoder:null,chunks:[],frames:[],curChunk:0},n;return s?n=AudioDecoder:n=VideoDecoder,i.decoder=new n({output:h=>{s?this.st(h,i.startTime):i.frames.push(h)},error:h=>{console.error("Decoder encountered an error while decoding: ",h)}}),i.demuxer=new A(t,s,{onConfig:h=>{i.config=h,h?i.decoder?.configure(h):i.done=!0,s&&this.pt(h)},onChunk:h=>{i.chunks?.push(h),i.duration=Math.max(i.duration,(h.timestamp+h.duration)/1e6)},onEndOfStream:()=>{i.demuxer=null}}),i}C(t,e){let s={startTime:e,isAudio:t.isAudio,duration:t.duration,demuxer:null,decoder:null,config:t.config,chunks:t.chunks,frames:[],curChunk:0},i;return t.isAudio?i=AudioDecoder:i=VideoDecoder,s.decoder=new i({output:n=>{s.isAudio?this.st(n,s.startTime):s.frames.push(n)},error:n=>{console.error("Decoder encountered an error while decoding: ",n)}}),t.config?s.decoder.configure(t.config):s.done=!0,s}gt(){let t=!this.paused;this.p.textContent=t?"\u23F8":"\u25B6";let e=this.n[0];if(!e||!e.duration){this.c.value=0;return}let s=this.currentTime-e.startTime,i=Math.max(0,Math.min(1,s/e.duration));this.c.value=i}N(t){let e=(i,n)=>{let h=i[n];for(;h.curChunk<h.chunks.length;){let a=h.chunks[h.curChunk];if(h.startTime+a.timestamp/1e6>this.e.getVideoTime()+1)break;h.decoder.decode(a),h.curChunk++}if(h.curChunk>=h.chunks.length&&!h.demuxer&&h.decoder){let a=h.decoder;a.flush().then(()=>{a.close(),h.done=!0}),h.decoder=null}};for(let i=0;i<this.n.length;i++)e(this.n,i);for(let i=0;i<this.o.length;i++)e(this.o,i);for(let i=0;i<this.a.length;i++)this.a[i].config!=null&&e(this.a,i);let s=i=>i?i.done&&i.frames.length==1:!1;s(this.n[0])&&s(this.o[0])&&(this.n.shift(),this.o.shift(),this.ht=!0),this.a[0]?.done&&this.a.shift(),this.V&&this.n.length==0&&this.o.length==0&&this.a.length==0&&this.tt!=null&&this.it!=null&&this.et!=null&&(this.e.setVideoTime(0),this.n=[this.C(this.tt,0)],this.o=[this.C(this.it,0)],this.a=[this.C(this.et,0)]),this.z&&this.gt(),super.N(t)}H(){this.t=document.createElement("video"),this.t.style.display="block",this.t.classList.add("cover-video"),this.t.muted=this.T,this.t.autoplay=this.X,this.t.loop=this.V,this.t.src=this.getAttribute("color-src"),this.i.parentElement.appendChild(this.t)}Q(){let t=this.n[0],e=this.o[0];if(!t||!e)return;let s=this.e.getVideoTime(),i=this.W!=null?Math.abs(s-this.W):Number.MAX_VALUE,n=-1;for(let h=0;h<Math.min(t.frames.length,e.frames.length);h++){let a=Math.abs(s-(t.startTime+t.frames[h].timestamp/1e6));if(a<=i)i=a,n=h;else break}if(!(n<0)){this.ht&&(this.t.close(),this.l.close(),this.ht=!1),this.t=t.frames[n],this.l=e.frames[n],this.W=t.startTime+this.t.timestamp/1e6,this.t?.timestamp!==this.l?.timestamp&&console.error("Color and depth frames have mismatched PTS"),this.A("color",this.t),this.A("depth",this.l);for(let h=0;h<n;h++)t.frames.shift().close(),e.frames.shift().close()}}B(t){return t instanceof VideoFrame}g(t){return t?t.codedWidth:1}_(t){return t?t.codedHeight:1}M(t){t.decoder?.close(),t.decoder=null;for(let e=0;e<t.frames.length;e++)t.frames[e].close()}}b=u,customElements.define("rgbd-img",C),customElements.define("rgbd-video",b)}
|
|
82
|
+
`,this.P.appendChild(e),this.i=document.createElement("canvas"),this.i.style.width="100%",this.i.style.height="100%",this.i.style.objectFit="contain",this.i.setAttribute("role","img"),this.i.setAttribute("aria-label","3D image"),t.appendChild(this.i),this.p=document.createElement("button"),this.p.textContent="Enter VR",Object.assign(this.p.style,{position:"absolute",display:"none",top:"1%",right:"1%",color:"white",background:"rgba(0,0,0,0.4)",padding:"8px 8px",fontFamily:"monospace",fontSize:"20px",borderRadius:"8px",border:"1px solid white",backdropFilter:"blur(6px)",whiteSpace:"pre"}),t.appendChild(this.p),this.p.addEventListener("click",()=>{this.o?this.et():this.vt()})}connectedCallback(){this.U();let t;try{this.Et(),t=!1}catch{t=!0}window.addEventListener("resize",this.J),window.addEventListener("mousemove",this.Q),document.addEventListener("mouseleave",this.$),t?this.H():(this.w(),this.O=!0,this.k=performance.now(),this.A=requestAnimationFrame(this.v)),this.it()}disconnectedCallback(){this.O=!1,cancelAnimationFrame(this.A),window.removeEventListener("resize",this.J),this.i.removeEventListener("pointermove",this.Q),this.i.removeEventListener("pointerleave",this.$);try{this.o&&(this.o.end(),this.o=null,this.At=!1)}catch{}try{if(this.h){let t=this.h;this.S&&t.deleteProgram(this.S);for(let e in this.T)t.deleteTexture(this.T[e].tex)}}catch{}}setViewMatrix(t){this.Y=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.Z=t&&t.length===16?new Float32Array(t):null}get width(){return this.g(this.t)}get height(){return this._(this.t)}Et(){let t=this.i.getContext("webgl2",{antialias:!0,alpha:!1});if(!t)throw new Error("WebGL not supported");this.h=t;let e=this.bt(t,A,a);if(!e)return;this.S=e,t.useProgram(e);let i=this.st(t),s=this.st(t);this.T.color=i,this.T.depth=s,this.E("color",this.t),this.E("depth",this.d);let h=t.getUniformLocation(e,"u_colorImage"),n=t.getUniformLocation(e,"u_depthImage");t.uniform1i(h,0),t.uniform1i(n,1),this.f={uProjection:t.getUniformLocation(e,"u_projMat"),uView:t.getUniformLocation(e,"u_viewMat"),uImageSize:t.getUniformLocation(e,"u_imageSize"),uFocal:t.getUniformLocation(e,"u_focal"),uDepthMin:t.getUniformLocation(e,"u_depthMin"),uDepthMax:t.getUniformLocation(e,"u_depthMax"),uGridSegs:t.getUniformLocation(e,"u_grid"),uXr:t.getUniformLocation(e,"u_xr")}}ht(t=null){if(!this.h)return;let e=this.h;e.bindFramebuffer(e.FRAMEBUFFER,t),e.useProgram(this.S),e.clearColor(...this.s.BACKGROUND_COLOR,1),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.enable(e.DEPTH_TEST)}nt(t,e){if(!this.h)return;let i=this.h,s=this.g(this.t),h=this._(this.t),n=s/h,r=Math.max(1,Math.floor(this.s.GRID_SIZE)),c=Math.max(1,Math.round(r/n));i.uniform2f(this.f.uImageSize,s,h),i.uniform1f(this.f.uFocal,this.s.FOCAL_LENGTH),i.uniform1f(this.f.uDepthMin,this.s.DEPTH_MIN),i.uniform1f(this.f.uDepthMax,this.s.DEPTH_MAX),i.uniform2i(this.f.uGridSegs,r,c),i.uniform1ui(this.f.uXr,this.o?1:0),i.uniformMatrix4fv(this.f.uView,!1,t),i.uniformMatrix4fv(this.f.uProjection,!1,e),i.drawArrays(i.TRIANGLES,0,r*c*6)}F(t,e){if(!this.O)return;let i=t-this.k;this.k=t,this.rt(),this.m.hovered||(this.m.x=Math.sin(t*this.s.BOOMERANG_SPEED),this.m.y=Math.sin(t*this.s.BOOMERANG_SPEED*.5+Math.PI));let s=this.m.x*this.s.CAM_MAX_THETA+Math.PI,h=-this.m.y*this.s.CAM_MAX_PHI,n=this.m.hovered?this.s.CAM_RADIUS*.8:this.s.CAM_RADIUS;if(this.r.theta=this.G(s,this.r.theta,i),this.r.phi=this.G(h,this.r.phi,i),this.r.radius=this.G(n,this.r.radius,i),this.o){let r=e.session,c=e.getViewerPose(this.N);if(!c){r.requestAnimationFrame(this.v);return}let f=r.renderState.baseLayer;this.ht(f.framebuffer);for(let l of c.views){let d=f.getViewport(l);this.h.viewport(d.x,d.y,d.width,d.height);let g=new Float32Array(l.transform.inverse.matrix),M=new Float32Array(l.projectionMatrix);this.nt(g,M)}}else{let r=this.i.width/this.i.height,c=[this.r.radius*Math.cos(this.r.phi)*Math.sin(this.r.theta),this.r.radius*Math.sin(this.r.phi),this.s.CAM_RADIUS+this.r.radius*Math.cos(this.r.phi)*Math.cos(this.r.theta)],f=[0,0,this.s.CAM_RADIUS],l=[0,-1,0],d=this.Y||new Float32Array(this.Mt(c,f,l)),g=this.Z||new Float32Array(this.Tt(this.s.CAM_FOV,r,.1,100));this.ht(),this.nt(d,g)}this.o?this.A=e.session.requestAnimationFrame(this.v):this.A=requestAnimationFrame(this.v)}it(){this.tt&&navigator.xr&&navigator.xr.isSessionSupported?navigator.xr.isSessionSupported("immersive-vr").then(t=>{this.p.style.display=t?"block":"none"}).catch(()=>{this.p.style.display="none"}):this.p.style.display="none"}async vt(){if(!this.o)try{let t=await navigator.xr.requestSession("immersive-vr",{optionalFeatures:["local-floor","bounded-floor"]});this.h.makeXRCompatible&&await this.h.makeXRCompatible(),this.w();let e=new XRWebGLLayer(t,this.h);await t.updateRenderState({baseLayer:e});let i=await t.requestReferenceSpace("local");this.o=t,this.N=i,cancelAnimationFrame(this.A),t.addEventListener("end",()=>{this.et()}),t.requestAnimationFrame(this.v)}catch(t){console.warn("Unable to start XR session",t)}}async et(){if(this.o){try{await this.o.end()}catch{}this.o=null,this.N=null,this.w(),this.A=requestAnimationFrame(this.v)}}xt(t){let e=this.i.getBoundingClientRect();this.m.hovered=!0,this.m.x=(t.clientX-e.left)/e.width*2-1,this.m.y=(t.clientY-e.top)/e.height*2-1}_t(){this.m.hovered=!1}w(){let t=window.devicePixelRatio||1,e=this.i.parentElement;if(!e)return;let i=e.clientWidth,s=e.clientHeight,h=this.g(this.t)||1,n=this._(this.t)||1,r=h/n,c=i,f=c/r;f>s&&(f=s,c=f*r);let l=Math.max(1,Math.floor((this.o?i:c)*t)),d=Math.max(1,Math.floor((this.o?s:f)*t));this.i.width=l,this.i.height=d,this.h&&this.h.viewport(0,0,l,d)}U(){let t=this.s;if(this.hasAttribute("grid-size")&&(t.GRID_SIZE=parseInt(this.getAttribute("grid-size"))??t.GRID_SIZE),this.hasAttribute("focal-length")&&(t.FOCAL_LENGTH=parseFloat(this.getAttribute("focal-length"))??t.FOCAL_LENGTH),this.hasAttribute("depth-min")&&(t.DEPTH_MIN=parseFloat(this.getAttribute("depth-min"))??t.DEPTH_MIN),this.hasAttribute("depth-max")&&(t.DEPTH_MAX=parseFloat(this.getAttribute("depth-max"))??t.DEPTH_MAX),this.hasAttribute("cam-radius")&&(t.CAM_RADIUS=parseFloat(this.getAttribute("cam-radius"))??t.CAM_RADIUS),this.hasAttribute("cam-max-theta")&&(t.CAM_MAX_THETA=parseFloat(this.getAttribute("cam-max-theta"))??t.CAM_MAX_THETA),this.hasAttribute("cam-max-phi")&&(t.CAM_MAX_PHI=parseFloat(this.getAttribute("cam-max-phi"))??t.CAM_MAX_PHI),this.hasAttribute("cam-fov")&&(t.CAM_FOV=parseFloat(this.getAttribute("cam-fov"))??t.CAM_FOV),this.hasAttribute("cam-smoothness")&&(t.CAM_SMOOTHNESS=parseFloat(this.getAttribute("cam-smoothness"))??t.CAM_SMOOTHNESS),this.hasAttribute("boomerang-speed")&&(t.BOOMERANG_SPEED=parseFloat(this.getAttribute("boomerang-speed"))??t.BOOMERANG_SPEED),this.hasAttribute("background-color"))try{let e=this.getAttribute("background-color").split(",").map(Number);e.length===3&&(t.BACKGROUND_COLOR=e)}catch{}this.tt=this.hasAttribute("allow-xr"),this.it()}ot(t,e,i){let s=t.createShader(e);return t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(console.error(t.getShaderInfoLog(s)),t.deleteShader(s),null)}bt(t,e,i){let s=this.ot(t,t.VERTEX_SHADER,e),h=this.ot(t,t.FRAGMENT_SHADER,i);if(!s||!h)return null;let n=t.createProgram();return t.attachShader(n,s),t.attachShader(n,h),t.linkProgram(n),t.getProgramParameter(n,t.LINK_STATUS)?(t.deleteShader(s),t.deleteShader(h),n):(console.error(t.getProgramInfoLog(n)),t.deleteProgram(n),null)}st(t){let e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),{tex:e,width:0,height:0}}E(t,e){if(!this.h)return;let i=this.h,s=this.T[t];if(i.activeTexture(t==="color"?i.TEXTURE0:i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,s.tex),!this.B(e)){i.texImage2D(i.TEXTURE_2D,0,i.RGBA,1,1,0,i.RGBA,i.UNSIGNED_BYTE,new Uint8Array([0,0,0,0]));return}try{i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!1),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,e),(this.g(e)!=s.width||this._(e)!=s.height)&&(this.w(),s.width=this.g(e),s.height=this._(e))}catch{}}Tt(t,e,i,s){let h=1/Math.tan(t/2);return[h/e,0,0,0,0,h,0,0,0,0,(s+i)/(i-s),-1,0,0,2*s*i/(i-s),0]}Mt(t,e,i){function s(l){let d=Math.hypot(...l)||1;return l.map(g=>g/d)}function h(l,d){return[l[1]*d[2]-l[2]*d[1],l[2]*d[0]-l[0]*d[2],l[0]*d[1]-l[1]*d[0]]}function n(l,d){return l.map((g,M)=>g-d[M])}let r=s(n(t,e)),c=s(h(i,r)),f=h(r,c);return[c[0],f[0],r[0],0,c[1],f[1],r[1],0,c[2],f[2],r[2],0,-(c[0]*t[0]+c[1]*t[1]+c[2]*t[2]),-(f[0]*t[0]+f[1]*t[1]+f[2]*t[2]),-(r[0]*t[0]+r[1]*t[1]+r[2]*t[2]),1]}G(t,e,i){let s=(1-this.s.CAM_SMOOTHNESS)*i/16.67,h=Math.sign(t-e);return e+=(t-e)*s,Math.sign(t-e)!==h&&(e=t),e}H(){throw new Error("Must implement _createFallback")}rt(){}B(t){throw new Error("Must implement _isSourceReady")}g(t){throw new Error("Must implement _getSourceWidth")}_(t){throw new Error("Must implement _getSourceHeight")}}b=p;class m extends b{static get observedAttributes(){return["color-src","depth-src","grid-size","focal-length","depth-min","depth-max","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color","allow-xr"]}constructor(){super(),this.t=new Image,this.d=new Image,this.t.crossOrigin="anonymous",this.d.crossOrigin="anonymous",this.t.onload=()=>this.E("color",this.t),this.d.onload=()=>this.E("depth",this.d)}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.t.src=i||"":t==="depth-src"?this.d.src=i||"":this.U())}H(){this.t.style.display="block",this.t.classList.add("cover-img"),this.i.parentElement.appendChild(this.t)}B(t){return t&&t.complete&&t.naturalWidth>0}g(t){return t?t.width:1}_(t){return t?t.height:1}}y=m;class u extends b{static get observedAttributes(){return["color-src","depth-src","grid-size","focal-length","depth-min","depth-max","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color","allow-xr","autoplay","loop","muted","controls"]}constructor(){super(),this.n=[],this.a=[],this.c=[],this.X=!1,this.V=!1,this.C=!0,this.e=new E,this.e.pause(),this.W=!1,this.b=document.createElement("div"),this.b.classList.add("rgbd-controls"),Object.assign(this.b.style,{position:"absolute",bottom:"1%",left:"50%",transform:"translateX(-50%)",display:"none",alignItems:"center",justifyContent:"center",gap:"8px",background:"rgba(0, 0, 0, 0.4)",padding:"8px 8px",borderRadius:"8px",backdropFilter:"blur(6px)",boxSizing:"border-box",width:"50%",flexWrap:"wrap"}),this.shadowRoot.appendChild(this.b),this.R=document.createElement("button"),Object.assign(this.R.style,{border:"none",background:"transparent",color:"white",fontSize:"24px",cursor:"pointer",padding:"4px",flexShrink:"0"}),this.b.appendChild(this.R),this.R.addEventListener("click",()=>{this.paused?this.play():this.pause()}),this.l=document.createElement("input"),this.l.type="range",this.l.min="0",this.l.max="1",this.l.value="0",this.l.step="any",Object.assign(this.l.style,{flex:"1 1 auto",minWidth:"120px",maxWidth:"100%",cursor:"pointer",accentColor:"#fff"}),this.b.appendChild(this.l),this.l.addEventListener("input",()=>{let t=this.n[0];if(!t||!t.duration)return;let e=t.startTime+this.l.value*t.duration;this.currentTime=e})}disconnectedCallback(){this.e.started()&&this.e.stop(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.clear().then(()=>{this.n=[this.M(i,0,!1)],this.c=[this.M(i,0,!0)],this.at=this.n[0],this.ct=this.c[0]}):t==="depth-src"?(this.a=[this.M(i,0,!1)],this.ut=this.a[0]):t==="autoplay"?(this.X=this.hasAttribute("autoplay"),this.X&&this.e.play()):t==="loop"?this.V=this.hasAttribute("loop"):t==="muted"?(this.C=this.hasAttribute("muted"),this.e.setVolume(this.C?0:1),!this.C&&this.e.started()&&this.e.resumeContext()):t==="controls"?(this.W=this.hasAttribute("controls"),this.b.style.display=this.W?"flex":"none"):this.U())}async play(){await this.e.play()}async pause(){await this.e.pause()}async clear(){for(let t=0;t<this.n.length;t++)this.D(this.n[t]);for(let t=0;t<this.a.length;t++)this.D(this.a[t]);for(let t=0;t<this.c.length;t++)this.D(this.c[t]);this.e.setVideoTime(0),this.e.started()&&await this.e.stop()}enqueue(t,e,i){this.n.push(this.M(t,i,!1)),this.a.push(this.M(e,i,!1)),this.c.push(this.M(t,i,!0))}get paused(){return this.e.isPaused}get currentTime(){return this.e.getVideoTime()}set currentTime(t){let e=i=>{if(i.length==0)return;this.D(i[0]),i[0]=this.I(i[0],i[0].startTime);let s=i[0];s.demuxer!=null&&console.error("Demuxing not yet finished!");let h=Number.MAX_VALUE,n=-1;for(let r=0;r<s.chunks.length;r++){if(s.chunks[r].type!=="key")continue;let c=Math.abs(t-s.startTime+s.chunks[r].timestamp/1e6);c<h&&(h=c,n=r)}n<0||(s.curChunk=n)};this.e.setVideoTime(t),this.z=null,e(this.n),e(this.a),e(this.c)}get volume(){return this.e.volume}set volume(t){this.e.setVolume(t)}yt(t){if(this.e.started()){if(t.sampleRate!=this.e.sampleRate)throw new Error("Audio configs have mismatched sample rates!");if(t.numChannels!=this.e.numChannels)throw new Error("Audio configs have mismatched channel counts!")}else this.e.start(t?{sampleRate:t.sampleRate,numChannels:t.numChannels,volume:1}:{audioEnabled:!1}),this.C||this.e.resumeContext()}lt(t,e){let i=e+t.timestamp/1e6,s=[];for(let h=0;h<t.numberOfChannels;h++){let n=new Float32Array(t.numberOfFrames);t.copyTo(n,{planeIndex:h,format:"f32-planar"}),s.push(n)}this.e.scheduleChunk(s,i)}M(t,e,i){let s={startTime:e,isAudio:i,duration:0,demuxer:null,decoder:null,chunks:[],frames:[],curChunk:0},h;return i?h=AudioDecoder:h=VideoDecoder,s.decoder=new h({output:n=>{i?this.lt(n,s.startTime):s.frames.push(n)},error:n=>{console.error("Decoder encountered an error while decoding: ",n)}}),s.demuxer=new _(t,i,{onConfig:n=>{s.config=n,n?s.decoder?.configure(n):s.done=!0,i&&this.yt(n)},onChunk:n=>{s.chunks?.push(n),s.duration=Math.max(s.duration,(n.timestamp+n.duration)/1e6)},onEndOfStream:()=>{s.demuxer=null}}),s}I(t,e){let i={startTime:e,isAudio:t.isAudio,duration:t.duration,demuxer:null,decoder:null,config:t.config,chunks:t.chunks,frames:[],curChunk:0},s;return t.isAudio?s=AudioDecoder:s=VideoDecoder,i.decoder=new s({output:h=>{i.isAudio?this.lt(h,i.startTime):i.frames.push(h)},error:h=>{console.error("Decoder encountered an error while decoding: ",h)}}),t.config?i.decoder.configure(t.config):i.done=!0,i}wt(){let t=!this.paused;this.R.textContent=t?"\u23F8\uFE0F":"\u25B6\uFE0F";let e=this.n[0];if(!e||!e.duration){this.l.value=0;return}let i=this.currentTime-e.startTime,s=Math.max(0,Math.min(1,i/e.duration));this.l.value=s}F(t,e){let i=(h,n)=>{let r=h[n];for(;r.curChunk<r.chunks.length;){let c=r.chunks[r.curChunk];if(r.startTime+c.timestamp/1e6>this.e.getVideoTime()+1)break;r.decoder.decode(c),r.curChunk++}if(r.curChunk>=r.chunks.length&&!r.demuxer&&r.decoder){let c=r.decoder;c.flush().then(()=>{c.close(),r.done=!0}),r.decoder=null}};for(let h=0;h<this.n.length;h++)i(this.n,h);for(let h=0;h<this.a.length;h++)i(this.a,h);for(let h=0;h<this.c.length;h++)this.c[h].config!=null&&i(this.c,h);let s=h=>h?h.done&&h.frames.length==1:!1;s(this.n[0])&&s(this.a[0])&&(this.n.shift(),this.a.shift(),this.dt=!0),this.c[0]?.done&&this.c.shift(),this.V&&this.n.length==0&&this.a.length==0&&this.c.length==0&&this.at!=null&&this.ut!=null&&this.ct!=null&&(this.e.setVideoTime(0),this.n=[this.I(this.at,0)],this.a=[this.I(this.ut,0)],this.c=[this.I(this.ct,0)]),this.W&&this.wt(),super.F(t,e)}H(){this.t=document.createElement("video"),this.t.style.display="block",this.t.classList.add("cover-video"),this.t.muted=this.C,this.t.autoplay=this.X,this.t.loop=this.V,this.t.src=this.getAttribute("color-src"),this.i.parentElement.appendChild(this.t)}rt(){let t=this.n[0],e=this.a[0];if(!t||!e)return;let i=this.e.getVideoTime(),s=this.z!=null?Math.abs(i-this.z):Number.MAX_VALUE,h=-1;for(let n=0;n<Math.min(t.frames.length,e.frames.length);n++){let r=Math.abs(i-(t.startTime+t.frames[n].timestamp/1e6));if(r<=s)s=r,h=n;else break}if(!(h<0)){this.dt&&(this.t.close(),this.d.close(),this.dt=!1),this.t=t.frames[h],this.d=e.frames[h],this.z=t.startTime+this.t.timestamp/1e6,this.t?.timestamp!==this.d?.timestamp&&console.error("Color and depth frames have mismatched PTS"),this.E("color",this.t),this.E("depth",this.d);for(let n=0;n<h;n++)t.frames.shift().close(),e.frames.shift().close()}}B(t){return t instanceof VideoFrame}g(t){return t?t.codedWidth:1}_(t){return t?t.codedHeight:1}D(t){t.decoder?.close(),t.decoder=null;for(let e=0;e<t.frames.length;e++)t.frames[e].close()}}w=u,customElements.define("rgbd-img",y),customElements.define("rgbd-video",w)}
|