diff --git a/package.json b/package.json
index e57223c54..5e7f25e0b 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.14.199",
"@types/node": "^20.0.0",
+ "@types/qrcode": "^1.5.5",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@types/sdp-transform": "^2.4.5",
@@ -92,6 +93,7 @@
"postcss-preset-env": "^10.0.0",
"posthog-js": "^1.29.0",
"prettier": "^3.0.0",
+ "qrcode": "^1.5.4",
"react": "18",
"react-dom": "18",
"react-i18next": "^15.0.0",
diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index 0dd66420b..6581274a6 100644
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -107,6 +107,7 @@
"mute_microphone_button_label": "Mute microphone",
"participant_count_one": "{{count, number}}",
"participant_count_other": "{{count, number}}",
+ "qr_code": "QR Code",
"rageshake_button_error_caption": "Retry sending logs",
"rageshake_request_modal": {
"body": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
diff --git a/src/QrCode.module.css b/src/QrCode.module.css
new file mode 100644
index 000000000..500490bff
--- /dev/null
+++ b/src/QrCode.module.css
@@ -0,0 +1,21 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.qrCode img {
+ max-width: 100%;
+ image-rendering: pixelated;
+ border-radius: var(--cpd-space-4x);
+}
diff --git a/src/QrCode.test.tsx b/src/QrCode.test.tsx
new file mode 100644
index 000000000..6537076d5
--- /dev/null
+++ b/src/QrCode.test.tsx
@@ -0,0 +1,34 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, test } from "vitest";
+import { render, configure } from "@testing-library/react";
+
+import { QrCode } from "./QrCode";
+
+configure({
+ defaultHidden: true,
+});
+
+describe("QrCode", () => {
+ test("renders", async () => {
+ const { container, findByRole } = render(
+ ,
+ );
+ (await findByRole("img")) as HTMLImageElement;
+ expect(container.firstChild).toMatchSnapshot();
+ });
+});
diff --git a/src/QrCode.tsx b/src/QrCode.tsx
new file mode 100644
index 000000000..515234abb
--- /dev/null
+++ b/src/QrCode.tsx
@@ -0,0 +1,57 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, useEffect, useState } from "react";
+import { toDataURL } from "qrcode";
+import classNames from "classnames";
+import { t } from "i18next";
+
+import styles from "./QrCode.module.css";
+
+interface Props {
+ data: string;
+ className?: string;
+}
+
+export const QrCode: FC = ({ data, className }) => {
+ const [url, setUrl] = useState(null);
+
+ useEffect(() => {
+ let isCancelled = false;
+
+ toDataURL(data, { errorCorrectionLevel: "L" })
+ .then((url) => {
+ if (!isCancelled) {
+ setUrl(url);
+ }
+ })
+ .catch((reason) => {
+ if (!isCancelled) {
+ setUrl(null);
+ }
+ });
+
+ return (): void => {
+ isCancelled = true;
+ };
+ }, [data]);
+
+ return (
+
+ {url &&
}
+
+
+