The send, the draft and the screenshots take the session's row lock, so an autosave or a paste during a send waits for it and then sees it, and two sends cannot open two issues. A save keeps the delivery's progress; a failed edit that shows the screenshots is finished by the retry; an answer that is not the tracker's API (a redirect, a proxy page) is refused, not a crash that loses the issue's record. Only an attempt that opened an issue counts toward the pace. Screenshots: deleting one after the send is refused, a user's storage is capped across sessions, new sessions and zip exports are paced, images are stored uncompressed in the zip. One liveness rule, one session view, one image type table. Logging: a session's elevation is tracked apart from the user's own, so the browser's own requests (no header) no longer lower the floor a session needs; Stop ends it at once. Composer: an image pasted anywhere is taken; what is still unsaved is saved on close, and "saved" is shown only when it is; the draft is held while it is sent; a failed screenshot read says so instead of reading as none; focus moves to what stays; the preview follows the text size. Pill: the step prompt and a running Stop survive the pill moving between hosts, the prompt keeps the dialog's Tab trap, the toast region lets clicks through, other tabs hear of a Start or Stop, the last seconds are sent before the cap, a capture with no frame is an error.
74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
// One screenshot of this tab, for a debug session (E16 D5).
|
|
//
|
|
// Through the Screen Capture API with the current tab preferred: the browser asks every time (there
|
|
// is no silent capture on the web, by design), the user can pick something else or cancel, and one
|
|
// frame is taken before the track is stopped at once — nothing keeps recording.
|
|
//
|
|
// A cancelled or refused picker is `null`, not an error: it is the user saying no. Measured in the
|
|
// desktop app's Chromium (2026-09-19): refused capture rejects with `NotAllowedError` — the same
|
|
// name Chrome gives a cancelled picker. A tab that WAS shared but gave no frame is an error, though:
|
|
// the user said yes, and a silent nothing would read as a screenshot taken.
|
|
//
|
|
// The frame is read through a <video> and a canvas rather than `ImageCapture.grabFrame`, which
|
|
// Firefox and Safari lack.
|
|
|
|
/** Whether this browser can capture a tab at all (iOS Safari cannot — the button is not shown). */
|
|
export function canCaptureTab(): boolean {
|
|
return typeof navigator !== "undefined" && !!navigator.mediaDevices?.getDisplayMedia;
|
|
}
|
|
|
|
/** Ask for this tab and return one PNG frame of it, or null when the user did not share. Throws
|
|
* `NoFrameError` when the shared tab gave no frame. */
|
|
export async function captureTab(): Promise<Blob | null> {
|
|
let stream: MediaStream;
|
|
try {
|
|
stream = await navigator.mediaDevices.getDisplayMedia({
|
|
video: { displaySurface: "browser" },
|
|
audio: false,
|
|
// Chromium hints: offer THIS tab first, and nothing that would record the whole screen.
|
|
preferCurrentTab: true,
|
|
selfBrowserSurface: "include",
|
|
surfaceSwitching: "exclude",
|
|
monitorTypeSurfaces: "exclude",
|
|
} as DisplayMediaStreamOptions);
|
|
} catch (err) {
|
|
if (
|
|
err instanceof DOMException &&
|
|
(err.name === "NotAllowedError" || err.name === "AbortError")
|
|
)
|
|
return null;
|
|
throw err;
|
|
}
|
|
try {
|
|
return await firstFrame(stream);
|
|
} finally {
|
|
for (const track of stream.getTracks()) track.stop();
|
|
}
|
|
}
|
|
|
|
class NoFrameError extends Error {
|
|
constructor() {
|
|
super("the shared tab gave no frame");
|
|
this.name = "NoFrameError";
|
|
}
|
|
}
|
|
|
|
async function firstFrame(stream: MediaStream): Promise<Blob> {
|
|
const video = document.createElement("video");
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.srcObject = stream;
|
|
await video.play();
|
|
// The first frame can arrive a beat after `play` resolves; wait until it has a size.
|
|
for (let i = 0; i < 20 && !video.videoWidth; i++) await new Promise((r) => setTimeout(r, 50));
|
|
if (!video.videoWidth) throw new NoFrameError();
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
canvas.getContext("2d")?.drawImage(video, 0, 0);
|
|
video.srcObject = null;
|
|
const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"));
|
|
if (!blob) throw new NoFrameError();
|
|
return blob;
|
|
}
|