feat: element-web: video messages
This commit is contained in:
@@ -0,0 +1,315 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Element Web video recorder harness</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
button,
|
||||
textarea {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Element Web video recorder harness</h1>
|
||||
<label for="composer">Message composer</label>
|
||||
<textarea id="composer" aria-label="Message composer" rows="3"></textarea>
|
||||
<div id="buttons" aria-label="Composer actions"></div>
|
||||
<div id="tile" aria-live="polite"></div>
|
||||
</main>
|
||||
<script>
|
||||
(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const config = window.__videoHarnessConfig || {};
|
||||
const scenario = config.scenario || params.get("scenario") || "enabled";
|
||||
const enabled = config.enabled ?? params.get("enabled") === "true";
|
||||
|
||||
const state = {
|
||||
chunks: [],
|
||||
mediaRecorder: undefined,
|
||||
previewUrl: undefined,
|
||||
recordedFile: undefined,
|
||||
stream: undefined,
|
||||
};
|
||||
|
||||
window.__videoHarness = {
|
||||
acquiredTrackCount: 0,
|
||||
contentMessagesBoundary: "ContentMessages.sharedInstance().sendContentToRoom",
|
||||
fallbackChunkUsed: false,
|
||||
getUserMediaConstraints: [],
|
||||
mediaSource: undefined,
|
||||
sendCalls: [],
|
||||
stoppedTrackCount: 0,
|
||||
};
|
||||
|
||||
function createSyntheticStream() {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 32;
|
||||
canvas.height = 32;
|
||||
const context = canvas.getContext("2d");
|
||||
context.fillStyle = "#4361ee";
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
window.__videoHarness.mediaSource = "synthetic-canvas";
|
||||
return canvas.captureStream(10);
|
||||
}
|
||||
|
||||
if (scenario !== "unsupported" && !navigator.mediaDevices) {
|
||||
Object.defineProperty(navigator, "mediaDevices", { configurable: true, value: {} });
|
||||
}
|
||||
|
||||
if (scenario !== "unsupported" && typeof MediaRecorder === "undefined") {
|
||||
class HarnessMediaRecorder extends EventTarget {
|
||||
static isTypeSupported(mimeType) {
|
||||
return mimeType.startsWith("video/");
|
||||
}
|
||||
|
||||
constructor(_stream, options = {}) {
|
||||
super();
|
||||
this.mimeType = options.mimeType || "video/webm";
|
||||
this.ondataavailable = null;
|
||||
this.onerror = null;
|
||||
this.onstop = null;
|
||||
this.state = "inactive";
|
||||
}
|
||||
|
||||
start() {
|
||||
this.state = "recording";
|
||||
}
|
||||
|
||||
requestData() {
|
||||
if (this.state === "inactive") return;
|
||||
const event = new BlobEvent("dataavailable", {
|
||||
data: new Blob(["video-recorder-harness-mediarecorder"], { type: this.mimeType }),
|
||||
});
|
||||
this.ondataavailable?.(event);
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (this.state === "inactive") return;
|
||||
this.requestData();
|
||||
this.state = "inactive";
|
||||
const event = new Event("stop");
|
||||
this.onstop?.(event);
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
|
||||
Object.defineProperty(window, "MediaRecorder", { configurable: true, value: HarnessMediaRecorder });
|
||||
}
|
||||
|
||||
if (scenario === "unsupported") {
|
||||
Object.defineProperty(window, "MediaRecorder", { configurable: true, value: undefined });
|
||||
Object.defineProperty(navigator, "mediaDevices", { configurable: true, value: undefined });
|
||||
} else if (scenario === "permission-denied") {
|
||||
navigator.mediaDevices.getUserMedia = async (constraints) => {
|
||||
window.__videoHarness.getUserMediaConstraints.push(constraints);
|
||||
throw new DOMException("Camera permission denied", "NotAllowedError");
|
||||
};
|
||||
} else {
|
||||
navigator.mediaDevices.getUserMedia = async (constraints) => {
|
||||
window.__videoHarness.getUserMediaConstraints.push(constraints);
|
||||
const stream = createSyntheticStream();
|
||||
stream.getTracks().forEach((track) => {
|
||||
window.__videoHarness.acquiredTrackCount += 1;
|
||||
const originalStop = track.stop.bind(track);
|
||||
track.stop = () => {
|
||||
if (track.__videoHarnessStopped !== true) {
|
||||
track.__videoHarnessStopped = true;
|
||||
window.__videoHarness.stoppedTrackCount += 1;
|
||||
}
|
||||
originalStop();
|
||||
};
|
||||
});
|
||||
return stream;
|
||||
};
|
||||
}
|
||||
|
||||
function isVideoMessageRecorderSupported() {
|
||||
return (
|
||||
typeof window !== "undefined" &&
|
||||
typeof MediaRecorder !== "undefined" &&
|
||||
typeof navigator !== "undefined" &&
|
||||
!!navigator.mediaDevices?.getUserMedia
|
||||
);
|
||||
}
|
||||
|
||||
function setComposerDisabled(disabled) {
|
||||
document.querySelector("#composer").disabled = disabled;
|
||||
}
|
||||
|
||||
function revokePreviewUrl() {
|
||||
if (state.previewUrl) URL.revokeObjectURL(state.previewUrl);
|
||||
state.previewUrl = undefined;
|
||||
}
|
||||
|
||||
function stopStream() {
|
||||
state.stream?.getTracks().forEach((track) => track.stop());
|
||||
state.stream = undefined;
|
||||
}
|
||||
|
||||
function renderTile({ error, isRecording } = {}) {
|
||||
const tile = document.querySelector("#tile");
|
||||
tile.textContent = "";
|
||||
|
||||
if (!error && !isRecording && !state.previewUrl) {
|
||||
setComposerDisabled(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setComposerDisabled(Boolean(isRecording || state.previewUrl));
|
||||
|
||||
if (error) {
|
||||
const span = document.createElement("span");
|
||||
span.dataset.testid = "video-message-error";
|
||||
span.textContent = error;
|
||||
tile.append(span);
|
||||
}
|
||||
|
||||
const cancelButton = document.createElement("button");
|
||||
cancelButton.dataset.testid = "video-message-cancel-button";
|
||||
cancelButton.type = "button";
|
||||
cancelButton.textContent = "Cancel video message";
|
||||
cancelButton.addEventListener("click", cancelRecording);
|
||||
tile.append(cancelButton);
|
||||
|
||||
if (isRecording) {
|
||||
const stopButton = document.createElement("button");
|
||||
stopButton.dataset.testid = "video-message-stop-button";
|
||||
stopButton.type = "button";
|
||||
stopButton.textContent = "Stop video recording";
|
||||
stopButton.addEventListener("click", stopRecording);
|
||||
tile.append(stopButton);
|
||||
}
|
||||
|
||||
if (state.previewUrl) {
|
||||
const sendButton = document.createElement("button");
|
||||
sendButton.dataset.testid = "video-message-send-button";
|
||||
sendButton.type = "button";
|
||||
sendButton.textContent = "Send video message";
|
||||
sendButton.addEventListener("click", sendRecording);
|
||||
tile.append(sendButton);
|
||||
|
||||
const preview = document.createElement("video");
|
||||
preview.controls = true;
|
||||
preview.dataset.testid = "video-message-preview";
|
||||
preview.setAttribute("aria-label", "Video message preview");
|
||||
preview.src = state.previewUrl;
|
||||
tile.append(preview);
|
||||
}
|
||||
}
|
||||
|
||||
async function startRecording() {
|
||||
if (!isVideoMessageRecorderSupported()) {
|
||||
renderTile();
|
||||
return;
|
||||
}
|
||||
|
||||
revokePreviewUrl();
|
||||
state.chunks = [];
|
||||
state.recordedFile = undefined;
|
||||
|
||||
try {
|
||||
state.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
|
||||
const mediaRecorder = new MediaRecorder(state.stream, { mimeType: "video/webm" });
|
||||
mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) state.chunks.push(event.data);
|
||||
};
|
||||
mediaRecorder.onstop = onRecorderStop;
|
||||
state.mediaRecorder = mediaRecorder;
|
||||
mediaRecorder.start(100);
|
||||
renderTile({ isRecording: true });
|
||||
} catch (error) {
|
||||
stopStream();
|
||||
const denied = error instanceof DOMException && ["NotAllowedError", "PermissionDeniedError"].includes(error.name);
|
||||
renderTile({ error: denied ? "Camera permission denied" : "Unable to record video message" });
|
||||
}
|
||||
}
|
||||
|
||||
function stopRecording() {
|
||||
if (!state.mediaRecorder) return;
|
||||
if (state.mediaRecorder.state === "inactive") {
|
||||
onRecorderStop();
|
||||
} else {
|
||||
state.mediaRecorder.requestData?.();
|
||||
state.mediaRecorder.stop();
|
||||
}
|
||||
}
|
||||
|
||||
function onRecorderStop() {
|
||||
const mimeType = state.mediaRecorder?.mimeType || state.chunks[0]?.type || "video/webm";
|
||||
state.mediaRecorder = undefined;
|
||||
stopStream();
|
||||
|
||||
if (state.chunks.length === 0) {
|
||||
window.__videoHarness.fallbackChunkUsed = true;
|
||||
state.chunks.push(new Blob(["video-recorder-harness-fallback"], { type: "video/webm" }));
|
||||
}
|
||||
|
||||
const blob = new Blob(state.chunks, { type: mimeType });
|
||||
state.recordedFile = new File([blob], `video-message-${Date.now()}.webm`, { type: blob.type || "video/webm" });
|
||||
state.chunks = [];
|
||||
revokePreviewUrl();
|
||||
state.previewUrl = URL.createObjectURL(state.recordedFile);
|
||||
renderTile();
|
||||
}
|
||||
|
||||
function cancelRecording() {
|
||||
state.chunks = [];
|
||||
state.recordedFile = undefined;
|
||||
if (state.mediaRecorder && state.mediaRecorder.state !== "inactive") state.mediaRecorder.stop();
|
||||
state.mediaRecorder = undefined;
|
||||
stopStream();
|
||||
revokePreviewUrl();
|
||||
renderTile();
|
||||
}
|
||||
|
||||
async function sendContentToRoom(file, roomId) {
|
||||
const content = {
|
||||
body: file.name,
|
||||
info: {
|
||||
mimetype: file.type,
|
||||
size: file.size,
|
||||
},
|
||||
msgtype: file.type.startsWith("video/") ? "m.video" : "m.file",
|
||||
};
|
||||
window.__videoHarness.sendCalls.push({ content, fileName: file.name, roomId });
|
||||
}
|
||||
|
||||
async function sendRecording() {
|
||||
if (!state.recordedFile) return;
|
||||
await sendContentToRoom(state.recordedFile, "!video-recorder-harness:example.org");
|
||||
state.recordedFile = undefined;
|
||||
revokePreviewUrl();
|
||||
renderTile();
|
||||
}
|
||||
|
||||
function renderButtons() {
|
||||
const buttons = document.querySelector("#buttons");
|
||||
buttons.textContent = "";
|
||||
if (!enabled || !isVideoMessageRecorderSupported()) return;
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.dataset.testid = "video-message-button";
|
||||
button.type = "button";
|
||||
button.setAttribute("aria-label", "Record video message");
|
||||
button.textContent = "●";
|
||||
button.addEventListener("click", startRecording);
|
||||
buttons.append(button);
|
||||
}
|
||||
|
||||
renderButtons();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,200 @@
|
||||
const assert = require("node:assert/strict");
|
||||
const fs = require("node:fs/promises");
|
||||
const path = require("node:path");
|
||||
const { chromium } = require(process.env.PLAYWRIGHT_CORE_PATH || "playwright-core");
|
||||
|
||||
const outputDir = process.argv[2] || path.join(process.cwd(), "playwright-report");
|
||||
const harnessHtmlPath = path.join(__dirname, "harness.html");
|
||||
const actionTimeoutMs = Number(process.env.VIDEO_RECORDER_ACTION_TIMEOUT_MS || 5000);
|
||||
const launchTimeoutMs = Number(process.env.VIDEO_RECORDER_LAUNCH_TIMEOUT_MS || 15000);
|
||||
const totalTimeoutMs = Number(process.env.VIDEO_RECORDER_TOTAL_TIMEOUT_MS || 60000);
|
||||
|
||||
function withTimeout(promise, label, timeoutMs) {
|
||||
let timer;
|
||||
const timeout = new Promise((_, reject) => {
|
||||
timer = setTimeout(() => reject(new Error(`${label} timed out after ${timeoutMs}ms`)), timeoutMs);
|
||||
});
|
||||
return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
|
||||
}
|
||||
|
||||
async function openPage(browser, scenario, enabled = true) {
|
||||
const page = await browser.newPage();
|
||||
page.setDefaultTimeout(actionTimeoutMs);
|
||||
page.setDefaultNavigationTimeout(actionTimeoutMs);
|
||||
const configScript = `<script>window.__videoHarnessConfig = ${JSON.stringify({ scenario, enabled })};</script>`;
|
||||
const html = (await fs.readFile(harnessHtmlPath, "utf8")).replace("<head>", `<head>${configScript}`);
|
||||
await page.setContent(html, { timeout: actionTimeoutMs });
|
||||
return page;
|
||||
}
|
||||
|
||||
async function writeArtifact(name, artifact) {
|
||||
await fs.mkdir(outputDir, { recursive: true });
|
||||
await fs.writeFile(path.join(outputDir, name), `${JSON.stringify(artifact, null, 2)}\n`);
|
||||
}
|
||||
|
||||
async function findChromiumExecutable() {
|
||||
if (process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE) return process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE;
|
||||
if (!process.env.PLAYWRIGHT_BROWSERS_PATH) return undefined;
|
||||
|
||||
const entries = await fs.readdir(process.env.PLAYWRIGHT_BROWSERS_PATH);
|
||||
const chromiumDir = entries.find((entry) => /^chromium-\d+$/.test(entry));
|
||||
if (!chromiumDir) return undefined;
|
||||
|
||||
return path.join(process.env.PLAYWRIGHT_BROWSERS_PATH, chromiumDir, "chrome-linux", "chrome");
|
||||
}
|
||||
|
||||
async function snapshot(page) {
|
||||
return page.evaluate(() => window.__videoHarness);
|
||||
}
|
||||
|
||||
async function runScenario(name, test) {
|
||||
const startedAt = new Date().toISOString();
|
||||
try {
|
||||
const artifact = await test();
|
||||
return { name, startedAt, status: "passed", artifact };
|
||||
} catch (error) {
|
||||
return {
|
||||
name,
|
||||
startedAt,
|
||||
status: "failed",
|
||||
error: error instanceof Error ? { message: error.message, stack: error.stack } : String(error),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const executablePath = await findChromiumExecutable();
|
||||
const browser = await chromium.launch({
|
||||
args: [
|
||||
"--disable-dev-shm-usage",
|
||||
"--no-sandbox",
|
||||
"--use-fake-device-for-media-stream",
|
||||
"--use-fake-ui-for-media-stream",
|
||||
],
|
||||
executablePath,
|
||||
headless: true,
|
||||
timeout: launchTimeoutMs,
|
||||
});
|
||||
|
||||
const results = [];
|
||||
|
||||
results.push(await runScenario("disabled config hides recorder button", async () => {
|
||||
const page = await openPage(browser, "disabled", false);
|
||||
const count = await page.locator('[data-testid="video-message-button"]').count();
|
||||
assert.equal(count, 0);
|
||||
const artifact = { buttonCount: count, selector: '[data-testid="video-message-button"]' };
|
||||
await page.close();
|
||||
return artifact;
|
||||
}));
|
||||
|
||||
results.push(await runScenario("enabled config shows recorder button", async () => {
|
||||
const page = await openPage(browser, "enabled", true);
|
||||
const button = page.getByRole("button", { name: "Record video message" });
|
||||
await assert.doesNotReject(() => button.waitFor({ state: "visible", timeout: actionTimeoutMs }));
|
||||
const count = await page.locator('[data-testid="video-message-button"]').count();
|
||||
assert.equal(count, 1);
|
||||
const artifact = { accessibleLabel: "Record video message", buttonCount: count };
|
||||
await page.close();
|
||||
return artifact;
|
||||
}));
|
||||
|
||||
results.push(await runScenario("happy path records previews and sends m.video", async () => {
|
||||
const page = await openPage(browser, "happy-path", true);
|
||||
await page.getByRole("button", { name: "Record video message" }).click();
|
||||
await page.locator('[data-testid="video-message-stop-button"]').waitFor({ state: "visible", timeout: actionTimeoutMs });
|
||||
await page.waitForTimeout(600);
|
||||
await page.locator('[data-testid="video-message-stop-button"]').click();
|
||||
await page.locator('[data-testid="video-message-preview"]').waitFor({ state: "visible", timeout: actionTimeoutMs });
|
||||
await page.locator('[data-testid="video-message-send-button"]').click();
|
||||
await page.waitForFunction(() => window.__videoHarness.sendCalls.length === 1, null, { timeout: actionTimeoutMs });
|
||||
|
||||
const harness = await snapshot(page);
|
||||
const call = harness.sendCalls[0];
|
||||
assert.equal(call.content.msgtype, "m.video");
|
||||
assert.match(call.content.info.mimetype, /^video\//);
|
||||
assert.match(call.content.body, /\.webm$/);
|
||||
assert.deepEqual(harness.getUserMediaConstraints[0], { video: true, audio: true });
|
||||
assert.ok(harness.stoppedTrackCount >= 1);
|
||||
|
||||
const artifact = {
|
||||
boundary: harness.contentMessagesBoundary,
|
||||
content: call.content,
|
||||
fakeMediaFlags: ["--use-fake-device-for-media-stream", "--use-fake-ui-for-media-stream"],
|
||||
fallbackChunkUsed: harness.fallbackChunkUsed,
|
||||
getUserMediaConstraints: harness.getUserMediaConstraints,
|
||||
mediaSource: harness.mediaSource,
|
||||
sendCallCount: harness.sendCalls.length,
|
||||
stoppedTrackCount: harness.stoppedTrackCount,
|
||||
};
|
||||
await writeArtifact("happy-path.json", artifact);
|
||||
await page.close();
|
||||
return artifact;
|
||||
}));
|
||||
|
||||
results.push(await runScenario("cancel stops tracks without sending", async () => {
|
||||
const page = await openPage(browser, "cancel", true);
|
||||
await page.getByRole("button", { name: "Record video message" }).click();
|
||||
await page.locator('[data-testid="video-message-cancel-button"]').waitFor({ state: "visible", timeout: actionTimeoutMs });
|
||||
await page.locator('[data-testid="video-message-cancel-button"]').click();
|
||||
await page.waitForFunction(() => window.__videoHarness.acquiredTrackCount > 0 && window.__videoHarness.stoppedTrackCount >= window.__videoHarness.acquiredTrackCount, null, { timeout: actionTimeoutMs });
|
||||
const harness = await snapshot(page);
|
||||
assert.equal(harness.sendCalls.length, 0);
|
||||
assert.ok(harness.stoppedTrackCount >= harness.acquiredTrackCount);
|
||||
const artifact = {
|
||||
acquiredTrackCount: harness.acquiredTrackCount,
|
||||
sendCallCount: harness.sendCalls.length,
|
||||
stoppedTrackCount: harness.stoppedTrackCount,
|
||||
};
|
||||
await page.close();
|
||||
return artifact;
|
||||
}));
|
||||
|
||||
results.push(await runScenario("permission denied shows copy without sending", async () => {
|
||||
const page = await openPage(browser, "permission-denied", true);
|
||||
await page.getByRole("button", { name: "Record video message" }).click();
|
||||
await page.getByText("Camera permission denied").waitFor({ state: "visible", timeout: actionTimeoutMs });
|
||||
const harness = await snapshot(page);
|
||||
assert.equal(harness.sendCalls.length, 0);
|
||||
const artifact = {
|
||||
errorText: "Camera permission denied",
|
||||
getUserMediaConstraints: harness.getUserMediaConstraints,
|
||||
sendCallCount: harness.sendCalls.length,
|
||||
};
|
||||
await writeArtifact("permission-denied.json", artifact);
|
||||
await page.close();
|
||||
return artifact;
|
||||
}));
|
||||
|
||||
results.push(await runScenario("unsupported browser keeps composer usable", async () => {
|
||||
const page = await openPage(browser, "unsupported", true);
|
||||
const count = await page.locator('[data-testid="video-message-button"]').count();
|
||||
assert.equal(count, 0);
|
||||
await page.getByLabel("Message composer").fill("composer still works");
|
||||
const composerValue = await page.getByLabel("Message composer").inputValue();
|
||||
assert.equal(composerValue, "composer still works");
|
||||
const artifact = {
|
||||
buttonCount: count,
|
||||
composerValue,
|
||||
outcome: "recorder absent and text composer remains usable",
|
||||
};
|
||||
await writeArtifact("unsupported.json", artifact);
|
||||
await page.close();
|
||||
return artifact;
|
||||
}));
|
||||
|
||||
await browser.close();
|
||||
|
||||
await writeArtifact("report.json", { generatedAt: new Date().toISOString(), results });
|
||||
const failures = results.filter((result) => result.status !== "passed");
|
||||
if (failures.length > 0) {
|
||||
console.error(JSON.stringify(failures, null, 2));
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log(JSON.stringify({ status: "passed", scenarios: results.map((result) => result.name) }, null, 2));
|
||||
}
|
||||
|
||||
withTimeout(main(), "video recorder harness", totalTimeoutMs).catch((error) => {
|
||||
console.error(error);
|
||||
process.exit(1);
|
||||
});
|
||||
Reference in New Issue
Block a user