@avaturn-live/web-sdk 0.0.21 → 0.1.0

package/dist/.vite/manifest.json

@@ -1,4 +1,10 @@
 {
+  "src/extra.ts": {
+    "file": "extra.cjs",
+    "name": "extra",
+    "src": "src/extra.ts",
+    "isEntry": true
+  },
   "src/main.ts": {
     "file": "main.cjs",
     "name": "main",

package/dist/extra.cjs

@@ -0,0 +1,48 @@
+"use strict";var G=Object.defineProperty;var x=t=>{throw TypeError(t)};var X=(t,r,e)=>r in t?G(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e;var R=(t,r,e)=>X(t,typeof r!="symbol"?r+"":r,e),C=(t,r,e)=>r.has(t)||x("Cannot "+e);var i=(t,r,e)=>(C(t,r,"read from private field"),e?e.call(t):r.get(t)),l=(t,r,e)=>r.has(t)?x("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(t):r.set(t,e),h=(t,r,e,a)=>(C(t,r,"write to private field"),a?a.call(t,e):r.set(t,e),e),d=(t,r,e)=>(C(t,r,"access private method"),e);const k=`
+precision mediump float;
+
+// our textures
+uniform sampler2D u_frame;
+
+// data
+uniform float u_premultipliedAlpha;
+
+// the texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+void main() {
+  // Calculate the coordinates for the color and alpha
+  vec2 colorCoord = vec2(v_texCoord.x, v_texCoord.y * 0.5);
+  vec2 alphaCoord = vec2(v_texCoord.x, 0.5 + v_texCoord.y * 0.5);
+
+  vec4 color = texture2D(u_frame, colorCoord);
+  float alpha = texture2D(u_frame, alphaCoord).r;
+
+  gl_FragColor = vec4(color.rgb * mix(alpha, 1.0, u_premultipliedAlpha), alpha);
+}
+`,B=`
+precision mediump float;
+attribute vec2 a_position;
+uniform mat3 u_matrix;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(u_matrix * vec3(a_position, 1), 1);
+
+  // because we're using a unit quad we can just use
+  // the same data for our texcoords.
+  v_texCoord = a_position;
+}
+`;function P(t,r,e){const a=t.createShader(e);if(!a)throw Error("Unable to create shader");if(t.shaderSource(a,r),t.compileShader(a),!t.getShaderParameter(a,t.COMPILE_STATUS)){const o=t.getShaderInfoLog(a);throw t.deleteShader(a),Error(o||"unknown error")}return a}function N(t,r){const e=t.createProgram();if(!e)throw Error("Unable to create program");for(const a of r)t.attachShader(e,a);if(t.linkProgram(e),!t.getProgramParameter(e,t.LINK_STATUS)){const a=t.getProgramInfoLog(e);throw t.deleteProgram(e),Error(a||"unknown error")}return e}const L=new WeakMap;function O(t){const r={antialias:!1,powerPreference:"low-power",depth:!1,premultipliedAlpha:!0},e=t.getContext("webgl2",r)??t.getContext("webgl",r);if(!e)throw Error("Couldn't create GL context");const a=P(e,k,e.FRAGMENT_SHADER),o=P(e,B,e.VERTEX_SHADER),c=N(e,[a,o]);e.useProgram(c);const g=e.getAttribLocation(c,"a_position"),U=e.getUniformLocation(c,"u_frame");e.uniform1i(U,0);const D=e.getUniformLocation(c,"u_matrix");L.set(e,e.getUniformLocation(c,"u_premultipliedAlpha")),S(e,!1);const I=e.createBuffer(),F=new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]);e.bindBuffer(e.ARRAY_BUFFER,I),e.bufferData(e.ARRAY_BUFFER,F,e.STATIC_DRAW),e.enableVertexAttribArray(g),e.vertexAttribPointer(g,2,e.FLOAT,!1,0,0),e.uniformMatrix3fv(D,!1,[2,0,0,0,-2,0,-1,1,1]);const M=e.createTexture();return e.bindTexture(e.TEXTURE_2D,M),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e}function S(t,r){t.uniform1f(L.get(t),r?1:0)}function H(t,r){const e=t.canvas,a=r.videoWidth,o=Math.floor(r.videoHeight/2);(e.width!==a||e.height!==o)&&(e.width=a,e.height=o,t.viewport(0,0,a,o)),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,r),t.drawArrays(t.TRIANGLES,0,6)}const w=new CSSStyleSheet;w.replaceSync(`
+  :host {
+    display: inline-block;
+    height: auto;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    object-fit: cover;
+    height: 100%;
+  }
+`);function W(t){return!t.paused&&!t.ended&&t.readyState>2}var v,u,n,p,E,A,T,_,s,f,m,b;class y extends HTMLElement{constructor(){super();l(this,s);l(this,v,this.attachShadow({mode:"closed"}));l(this,u,document.createElement("canvas"));l(this,n,null);l(this,p,null);l(this,E,0);l(this,A,()=>{if(i(this,p)){if(!i(this,n)){i(this,u).remove(),h(this,u,document.createElement("canvas")),i(this,v).append(i(this,u));try{h(this,n,O(i(this,u)))}catch{console.warn("<avaturn-video> Couldn't create GL context")}if(!i(this,n))return;S(i(this,n),this.premultipliedAlpha)}H(i(this,n),i(this,p)),h(this,E,requestAnimationFrame(i(this,A)))}});l(this,T,{videoPlaying:!1,intersecting:!1,connected:!1});l(this,_,!1);l(this,m,null);i(this,v).adoptedStyleSheets=[w],i(this,v).append(i(this,u)),new IntersectionObserver(([e])=>{d(this,s,f).call(this,{intersecting:e.isIntersecting})}).observe(this),new MutationObserver(()=>{this.firstElementChild!==i(this,p)&&d(this,s,b).call(this,this.firstElementChild)}).observe(this,{childList:!0}),d(this,s,b).call(this,this.firstElementChild)}connectedCallback(){d(this,s,f).call(this,{connected:!0})}disconnectedCallback(){d(this,s,f).call(this,{connected:!1})}attributeChangedCallback(e,a,o){if(e==="premultipliedalpha"){if(!i(this,n))return;S(i(this,n),o!==null)}}get premultipliedAlpha(){return this.hasAttribute("premultipliedalpha")}set premultipliedAlpha(e){e?this.setAttribute("premultipliedalpha",""):this.removeAttribute("premultipliedalpha")}}v=new WeakMap,u=new WeakMap,n=new WeakMap,p=new WeakMap,E=new WeakMap,A=new WeakMap,T=new WeakMap,_=new WeakMap,s=new WeakSet,f=function(e){Object.assign(i(this,T),e),!i(this,_)&&(h(this,_,!0),queueMicrotask(()=>{var g;h(this,_,!1);const{videoPlaying:a,connected:o,intersecting:c}=i(this,T);if(cancelAnimationFrame(i(this,E)),!o||!a||!c){i(this,n)&&((g=i(this,n).getExtension("WEBGL_lose_context"))==null||g.loseContext(),h(this,n,null));return}h(this,E,requestAnimationFrame(i(this,A)))}))},m=new WeakMap,b=function(e){if(i(this,m)&&i(this,m).abort(),e&&!(e instanceof HTMLVideoElement)){console.warn("<avaturn-video> Child must be a <video>"),h(this,p,null),d(this,s,f).call(this,{videoPlaying:!1});return}if(h(this,p,e),!e){d(this,s,f).call(this,{videoPlaying:!1});return}e.autoplay&&setTimeout(()=>{e.play()},0);const a=()=>{d(this,s,f).call(this,{videoPlaying:W(e)})};a(),h(this,m,new AbortController);const o=i(this,m).signal;for(const c of["playing","stalled","emptied","ended","pause"])e.addEventListener(c,a,{signal:o})},R(y,"observedAttributes",["premultipliedalpha"]);customElements.define("avaturn-video",y);

package/dist/extra.d.ts

@@ -0,0 +1,21 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "avaturn-video": StackedAlphaVideo;
+    }
+}
+declare class StackedAlphaVideo extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _: string, newValue: string): void;
+    get premultipliedAlpha(): boolean;
+    /**
+     * Set whether the source video uses premultiplied alpha.
+     *
+     * Set this to `true` if semi-transparent areas or outlines look too dark.
+     */
+    set premultipliedAlpha(value: boolean);
+}
+export {};

package/dist/extra.js

@@ -0,0 +1,221 @@
+var G = Object.defineProperty;
+var x = (t) => {
+  throw TypeError(t);
+};
+var X = (t, r, e) => r in t ? G(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var R = (t, r, e) => X(t, typeof r != "symbol" ? r + "" : r, e), C = (t, r, e) => r.has(t) || x("Cannot " + e);
+var i = (t, r, e) => (C(t, r, "read from private field"), e ? e.call(t) : r.get(t)), l = (t, r, e) => r.has(t) ? x("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, e), h = (t, r, e, a) => (C(t, r, "write to private field"), a ? a.call(t, e) : r.set(t, e), e), d = (t, r, e) => (C(t, r, "access private method"), e);
+const k = `
+precision mediump float;
+
+// our textures
+uniform sampler2D u_frame;
+
+// data
+uniform float u_premultipliedAlpha;
+
+// the texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+void main() {
+  // Calculate the coordinates for the color and alpha
+  vec2 colorCoord = vec2(v_texCoord.x, v_texCoord.y * 0.5);
+  vec2 alphaCoord = vec2(v_texCoord.x, 0.5 + v_texCoord.y * 0.5);
+
+  vec4 color = texture2D(u_frame, colorCoord);
+  float alpha = texture2D(u_frame, alphaCoord).r;
+
+  gl_FragColor = vec4(color.rgb * mix(alpha, 1.0, u_premultipliedAlpha), alpha);
+}
+`, B = `
+precision mediump float;
+attribute vec2 a_position;
+uniform mat3 u_matrix;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(u_matrix * vec3(a_position, 1), 1);
+
+  // because we're using a unit quad we can just use
+  // the same data for our texcoords.
+  v_texCoord = a_position;
+}
+`;
+function P(t, r, e) {
+  const a = t.createShader(e);
+  if (!a)
+    throw Error("Unable to create shader");
+  if (t.shaderSource(a, r), t.compileShader(a), !t.getShaderParameter(a, t.COMPILE_STATUS)) {
+    const o = t.getShaderInfoLog(a);
+    throw t.deleteShader(a), Error(o || "unknown error");
+  }
+  return a;
+}
+function N(t, r) {
+  const e = t.createProgram();
+  if (!e)
+    throw Error("Unable to create program");
+  for (const a of r)
+    t.attachShader(e, a);
+  if (t.linkProgram(e), !t.getProgramParameter(e, t.LINK_STATUS)) {
+    const a = t.getProgramInfoLog(e);
+    throw t.deleteProgram(e), Error(a || "unknown error");
+  }
+  return e;
+}
+const L = /* @__PURE__ */ new WeakMap();
+function O(t) {
+  const r = {
+    antialias: !1,
+    powerPreference: "low-power",
+    depth: !1,
+    premultipliedAlpha: !0
+  }, e = t.getContext("webgl2", r) ?? t.getContext("webgl", r);
+  if (!e)
+    throw Error("Couldn't create GL context");
+  const a = P(e, k, e.FRAGMENT_SHADER), o = P(e, B, e.VERTEX_SHADER), c = N(e, [a, o]);
+  e.useProgram(c);
+  const g = e.getAttribLocation(c, "a_position"), U = e.getUniformLocation(c, "u_frame");
+  e.uniform1i(U, 0);
+  const D = e.getUniformLocation(c, "u_matrix");
+  L.set(e, e.getUniformLocation(c, "u_premultipliedAlpha")), S(e, !1);
+  const I = e.createBuffer(), F = new Float32Array([
+    0,
+    0,
+    1,
+    0,
+    0,
+    1,
+    0,
+    1,
+    1,
+    0,
+    1,
+    1
+  ]);
+  e.bindBuffer(e.ARRAY_BUFFER, I), e.bufferData(e.ARRAY_BUFFER, F, e.STATIC_DRAW), e.enableVertexAttribArray(g), e.vertexAttribPointer(g, 2, e.FLOAT, !1, 0, 0), e.uniformMatrix3fv(D, !1, [2, 0, 0, 0, -2, 0, -1, 1, 1]);
+  const M = e.createTexture();
+  return e.bindTexture(e.TEXTURE_2D, M), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST), e;
+}
+function S(t, r) {
+  t.uniform1f(L.get(t), r ? 1 : 0);
+}
+function H(t, r) {
+  const e = t.canvas, a = r.videoWidth, o = Math.floor(r.videoHeight / 2);
+  (e.width !== a || e.height !== o) && (e.width = a, e.height = o, t.viewport(0, 0, a, o)), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, r), t.drawArrays(t.TRIANGLES, 0, 6);
+}
+const w = new CSSStyleSheet();
+w.replaceSync(`
+  :host {
+    display: inline-block;
+    height: auto;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    object-fit: cover;
+    height: 100%;
+  }
+`);
+function W(t) {
+  return !t.paused && !t.ended && t.readyState > 2;
+}
+var v, u, n, p, E, A, T, _, s, f, m, b;
+class y extends HTMLElement {
+  constructor() {
+    super();
+    l(this, s);
+    l(this, v, this.attachShadow({ mode: "closed" }));
+    l(this, u, document.createElement("canvas"));
+    l(this, n, null);
+    l(this, p, null);
+    l(this, E, 0);
+    l(this, A, () => {
+      if (i(this, p)) {
+        if (!i(this, n)) {
+          i(this, u).remove(), h(this, u, document.createElement("canvas")), i(this, v).append(i(this, u));
+          try {
+            h(this, n, O(i(this, u)));
+          } catch {
+            console.warn("<avaturn-video> Couldn't create GL context");
+          }
+          if (!i(this, n))
+            return;
+          S(i(this, n), this.premultipliedAlpha);
+        }
+        H(i(this, n), i(this, p)), h(this, E, requestAnimationFrame(i(this, A)));
+      }
+    });
+    l(this, T, {
+      videoPlaying: !1,
+      intersecting: !1,
+      connected: !1
+    });
+    l(this, _, !1);
+    l(this, m, null);
+    i(this, v).adoptedStyleSheets = [w], i(this, v).append(i(this, u)), new IntersectionObserver(([e]) => {
+      d(this, s, f).call(this, { intersecting: e.isIntersecting });
+    }).observe(this), new MutationObserver(() => {
+      this.firstElementChild !== i(this, p) && d(this, s, b).call(this, this.firstElementChild);
+    }).observe(this, {
+      childList: !0
+    }), d(this, s, b).call(this, this.firstElementChild);
+  }
+  connectedCallback() {
+    d(this, s, f).call(this, { connected: !0 });
+  }
+  disconnectedCallback() {
+    d(this, s, f).call(this, { connected: !1 });
+  }
+  attributeChangedCallback(e, a, o) {
+    if (e === "premultipliedalpha") {
+      if (!i(this, n))
+        return;
+      S(i(this, n), o !== null);
+    }
+  }
+  get premultipliedAlpha() {
+    return this.hasAttribute("premultipliedalpha");
+  }
+  /**
+   * Set whether the source video uses premultiplied alpha.
+   *
+   * Set this to `true` if semi-transparent areas or outlines look too dark.
+   */
+  set premultipliedAlpha(e) {
+    e ? this.setAttribute("premultipliedalpha", "") : this.removeAttribute("premultipliedalpha");
+  }
+}
+v = new WeakMap(), u = new WeakMap(), n = new WeakMap(), p = new WeakMap(), E = new WeakMap(), A = new WeakMap(), T = new WeakMap(), _ = new WeakMap(), s = new WeakSet(), f = function(e) {
+  Object.assign(i(this, T), e), !i(this, _) && (h(this, _, !0), queueMicrotask(() => {
+    var g;
+    h(this, _, !1);
+    const { videoPlaying: a, connected: o, intersecting: c } = i(this, T);
+    if (cancelAnimationFrame(i(this, E)), !o || !a || !c) {
+      i(this, n) && ((g = i(this, n).getExtension("WEBGL_lose_context")) == null || g.loseContext(), h(this, n, null));
+      return;
+    }
+    h(this, E, requestAnimationFrame(i(this, A)));
+  }));
+}, m = new WeakMap(), b = function(e) {
+  if (i(this, m) && i(this, m).abort(), e && !(e instanceof HTMLVideoElement)) {
+    console.warn("<avaturn-video> Child must be a <video>"), h(this, p, null), d(this, s, f).call(this, { videoPlaying: !1 });
+    return;
+  }
+  if (h(this, p, e), !e) {
+    d(this, s, f).call(this, { videoPlaying: !1 });
+    return;
+  }
+  e.autoplay && setTimeout(() => {
+    e.play();
+  }, 0);
+  const a = () => {
+    d(this, s, f).call(this, { videoPlaying: W(e) });
+  };
+  a(), h(this, m, new AbortController());
+  const o = i(this, m).signal;
+  for (const c of ["playing", "stalled", "emptied", "ended", "pause"])
+    e.addEventListener(c, a, { signal: o });
+}, R(y, "observedAttributes", ["premultipliedalpha"]);
+customElements.define("avaturn-video", y);

package/dist/gl-helpers.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Get a GL context for a canvas.
+ * This only needs to be done once per canvas.
+ */
+export declare function setupGLContext(canvas: HTMLCanvasElement | OffscreenCanvas): WebGLRenderingContext | WebGL2RenderingContext;
+/**
+ * Set whether the source video uses premultiplied alpha.
+ *
+ * Set this to `true` if semi-transparent areas or outlines look too dark.
+ */
+export declare function setPremultipliedAlpha(context: WebGLRenderingContext | WebGL2RenderingContext, premultipliedAlpha: boolean): void;
+/**
+ * Draw a stacked-alpha video frame to a GL context.
+ */
+export declare function drawVideo(context: WebGLRenderingContext | WebGL2RenderingContext, video: HTMLVideoElement): void;