@insitue/sdk 0.1.10 → 0.1.12
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/capture-only.js
CHANGED
|
@@ -1641,16 +1641,6 @@ async function toCanvas(node, options = {}) {
|
|
|
1641
1641
|
}
|
|
1642
1642
|
|
|
1643
1643
|
// src/capture.ts
|
|
1644
|
-
function crossOrigin(url) {
|
|
1645
|
-
if (!url || url.startsWith("data:") || url.startsWith("blob:")) {
|
|
1646
|
-
return false;
|
|
1647
|
-
}
|
|
1648
|
-
try {
|
|
1649
|
-
return new URL(url, location.href).origin !== location.origin;
|
|
1650
|
-
} catch {
|
|
1651
|
-
return false;
|
|
1652
|
-
}
|
|
1653
|
-
}
|
|
1654
1644
|
var IMAGE_PLACEHOLDER = "data:image/svg+xml;base64," + (typeof btoa !== "undefined" ? btoa(
|
|
1655
1645
|
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#e8e8e8"/><path d="M0 0 L32 32 M32 0 L0 32" stroke="#b0b0b0" stroke-width="1.5"/></svg>'
|
|
1656
1646
|
) : "");
|
|
@@ -1681,26 +1671,12 @@ async function renderViewportCrop(cropRect, pixelRatio) {
|
|
|
1681
1671
|
out.height = Math.max(1, Math.round(cropRect.height * pixelRatio));
|
|
1682
1672
|
const ctx = out.getContext("2d");
|
|
1683
1673
|
if (!ctx) return { dataUrl: null, failedImages };
|
|
1684
|
-
const drawnImgs = drawAbsoluteImagesOnto(
|
|
1685
|
-
ctx,
|
|
1686
|
-
cropRect,
|
|
1687
|
-
pixelRatio,
|
|
1688
|
-
failedImages
|
|
1689
|
-
);
|
|
1690
1674
|
const fullCanvas = await toCanvas(document.documentElement, {
|
|
1691
1675
|
pixelRatio,
|
|
1692
1676
|
cacheBust: true,
|
|
1693
1677
|
backgroundColor,
|
|
1694
1678
|
imagePlaceholder: IMAGE_PLACEHOLDER,
|
|
1695
|
-
filter: (n2) =>
|
|
1696
|
-
if (n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]")) {
|
|
1697
|
-
return false;
|
|
1698
|
-
}
|
|
1699
|
-
if (n2 instanceof HTMLImageElement && drawnImgs.has(n2)) {
|
|
1700
|
-
return false;
|
|
1701
|
-
}
|
|
1702
|
-
return true;
|
|
1703
|
-
}
|
|
1679
|
+
filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]"))
|
|
1704
1680
|
});
|
|
1705
1681
|
const sx = window.scrollX;
|
|
1706
1682
|
const sy = window.scrollY;
|
|
@@ -1715,73 +1691,115 @@ async function renderViewportCrop(cropRect, pixelRatio) {
|
|
|
1715
1691
|
out.width,
|
|
1716
1692
|
out.height
|
|
1717
1693
|
);
|
|
1694
|
+
const drawnImgs = await drawAbsoluteImagesOnto(
|
|
1695
|
+
ctx,
|
|
1696
|
+
cropRect,
|
|
1697
|
+
pixelRatio,
|
|
1698
|
+
failedImages
|
|
1699
|
+
);
|
|
1700
|
+
void drawnImgs;
|
|
1718
1701
|
if (looksBlankUniform(ctx, out.width, out.height)) {
|
|
1719
1702
|
return { dataUrl: null, failedImages };
|
|
1720
1703
|
}
|
|
1721
1704
|
detectUnrenderedImages(ctx, cropRect, out, pixelRatio, failedImages);
|
|
1722
1705
|
return { dataUrl: out.toDataURL("image/png"), failedImages };
|
|
1723
1706
|
}
|
|
1724
|
-
function drawAbsoluteImagesOnto(ctx, cropRect, pixelRatio, failedImages) {
|
|
1707
|
+
async function drawAbsoluteImagesOnto(ctx, cropRect, pixelRatio, failedImages) {
|
|
1725
1708
|
const drawn = /* @__PURE__ */ new Set();
|
|
1726
1709
|
const imgs = Array.from(
|
|
1727
1710
|
document.querySelectorAll("img")
|
|
1728
1711
|
).filter(
|
|
1729
1712
|
(img) => !img.closest?.("#insitu-root, [data-insitu-layer]")
|
|
1730
1713
|
);
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
source.
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
dest.y,
|
|
1765
|
-
dest.w,
|
|
1766
|
-
dest.h
|
|
1714
|
+
const PER_IMAGE_TIMEOUT_MS = 3e3;
|
|
1715
|
+
await Promise.allSettled(
|
|
1716
|
+
imgs.map(async (img) => {
|
|
1717
|
+
const r3 = img.getBoundingClientRect();
|
|
1718
|
+
if (r3.width <= 0 || r3.height <= 0) return;
|
|
1719
|
+
const cs = getComputedStyle(img);
|
|
1720
|
+
if (cs.position !== "absolute" && cs.position !== "fixed") return;
|
|
1721
|
+
if (r3.right < cropRect.x || r3.left > cropRect.x + cropRect.width || r3.bottom < cropRect.y || r3.top > cropRect.y + cropRect.height) {
|
|
1722
|
+
return;
|
|
1723
|
+
}
|
|
1724
|
+
const src = img.currentSrc || img.src;
|
|
1725
|
+
if (!src) return;
|
|
1726
|
+
const usesFreshLoad = !src.startsWith("data:") && !src.startsWith("blob:");
|
|
1727
|
+
let source;
|
|
1728
|
+
if (usesFreshLoad) {
|
|
1729
|
+
try {
|
|
1730
|
+
source = await loadFresh(src, PER_IMAGE_TIMEOUT_MS);
|
|
1731
|
+
} catch {
|
|
1732
|
+
failedImages.add(img);
|
|
1733
|
+
return;
|
|
1734
|
+
}
|
|
1735
|
+
} else {
|
|
1736
|
+
if (!img.complete || img.naturalWidth === 0) {
|
|
1737
|
+
failedImages.add(img);
|
|
1738
|
+
return;
|
|
1739
|
+
}
|
|
1740
|
+
source = img;
|
|
1741
|
+
}
|
|
1742
|
+
const objFit = computeObjectFitSource(
|
|
1743
|
+
{ naturalWidth: source.naturalWidth, naturalHeight: source.naturalHeight },
|
|
1744
|
+
r3.width,
|
|
1745
|
+
r3.height,
|
|
1746
|
+
cs.objectFit || "fill"
|
|
1767
1747
|
);
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1748
|
+
const dest = {
|
|
1749
|
+
x: (r3.left - cropRect.x) * pixelRatio,
|
|
1750
|
+
y: (r3.top - cropRect.y) * pixelRatio,
|
|
1751
|
+
w: r3.width * pixelRatio,
|
|
1752
|
+
h: r3.height * pixelRatio
|
|
1753
|
+
};
|
|
1754
|
+
try {
|
|
1755
|
+
ctx.drawImage(
|
|
1756
|
+
source,
|
|
1757
|
+
objFit.sx,
|
|
1758
|
+
objFit.sy,
|
|
1759
|
+
objFit.sw,
|
|
1760
|
+
objFit.sh,
|
|
1761
|
+
dest.x,
|
|
1762
|
+
dest.y,
|
|
1763
|
+
dest.w,
|
|
1764
|
+
dest.h
|
|
1765
|
+
);
|
|
1766
|
+
drawn.add(img);
|
|
1767
|
+
} catch {
|
|
1768
|
+
failedImages.add(img);
|
|
1769
|
+
}
|
|
1770
|
+
})
|
|
1771
|
+
);
|
|
1773
1772
|
return drawn;
|
|
1774
1773
|
}
|
|
1775
|
-
function
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1774
|
+
function loadFresh(url, timeoutMs) {
|
|
1775
|
+
return new Promise((resolve, reject) => {
|
|
1776
|
+
const img = new Image();
|
|
1777
|
+
img.crossOrigin = "anonymous";
|
|
1778
|
+
const timer = setTimeout(() => {
|
|
1779
|
+
img.src = "";
|
|
1780
|
+
reject(new Error("timeout"));
|
|
1781
|
+
}, timeoutMs);
|
|
1782
|
+
img.onload = async () => {
|
|
1783
|
+
clearTimeout(timer);
|
|
1784
|
+
try {
|
|
1785
|
+
await img.decode();
|
|
1786
|
+
} catch {
|
|
1787
|
+
}
|
|
1788
|
+
resolve(img);
|
|
1789
|
+
};
|
|
1790
|
+
img.onerror = () => {
|
|
1791
|
+
clearTimeout(timer);
|
|
1792
|
+
reject(new Error("load failed"));
|
|
1793
|
+
};
|
|
1794
|
+
img.src = url;
|
|
1795
|
+
});
|
|
1796
|
+
}
|
|
1797
|
+
function computeObjectFitSource(natural, dw, dh, fit) {
|
|
1798
|
+
const nw = natural.naturalWidth;
|
|
1799
|
+
const nh = natural.naturalHeight;
|
|
1781
1800
|
if (!nw || !nh || !dw || !dh) {
|
|
1782
1801
|
return { sx: 0, sy: 0, sw: nw || 1, sh: nh || 1 };
|
|
1783
1802
|
}
|
|
1784
|
-
const fit = cs.objectFit || "fill";
|
|
1785
1803
|
if (fit === "fill") {
|
|
1786
1804
|
return { sx: 0, sy: 0, sw: nw, sh: nh };
|
|
1787
1805
|
}
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
setCaptureSettings,
|
|
12
12
|
stopDisplayMedia,
|
|
13
13
|
y
|
|
14
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-6QESDKMV.js";
|
|
15
15
|
|
|
16
16
|
// src/capture-only.ts
|
|
17
17
|
var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";
|
|
@@ -362,8 +362,8 @@ function CaptureOnlyApp(props) {
|
|
|
362
362
|
k("span", {}, ""),
|
|
363
363
|
k(
|
|
364
364
|
"span",
|
|
365
|
-
{ title: `@insitue/sdk@${"0.1.
|
|
366
|
-
`InSitue \xB7 v${"0.1.
|
|
365
|
+
{ title: `@insitue/sdk@${"0.1.12"}` },
|
|
366
|
+
`InSitue \xB7 v${"0.1.12"}`
|
|
367
367
|
)
|
|
368
368
|
]
|
|
369
369
|
)
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
mountCaptureOnly
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-QD5ORBG3.js";
|
|
4
4
|
import {
|
|
5
5
|
mountInSitue
|
|
6
|
-
} from "./chunk-
|
|
7
|
-
import "./chunk-
|
|
6
|
+
} from "./chunk-BOHPIOZ6.js";
|
|
7
|
+
import "./chunk-6QESDKMV.js";
|
|
8
8
|
|
|
9
9
|
// src/InSitue.tsx
|
|
10
10
|
import { useEffect } from "react";
|
|
@@ -52,7 +52,7 @@ function InSitueCapture({
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
// src/index.ts
|
|
55
|
-
var SDK_VERSION = "0.1.
|
|
55
|
+
var SDK_VERSION = "0.1.12";
|
|
56
56
|
export {
|
|
57
57
|
InSitue,
|
|
58
58
|
InSitueCapture,
|
package/dist/overlay.js
CHANGED
package/package.json
CHANGED