feat: enable camera for video extenstion and microphone for recording (#1493)

Noticed that the video extension and the sound recording need an
attribute adding on the scratch iframe.

Without this you get violations in the console for the camera - or the
microphone can not connect
<img width="953" height="567" alt="camera-violation"
src="https://github.com/user-attachments/assets/a9fd5dab-ae92-4b42-a985-efc0a91b019a"
/>

<img width="1475" height="761" alt="microphone-not-work"
src="https://github.com/user-attachments/assets/5dabb389-3b2f-4535-b94f-23b59c41fc4b"
/>

Simple fix here should get it working, so the user should be accessed
for permission to connect liek in the following images.


<img width="1317" height="973" alt="video-set-up"
src="https://github.com/user-attachments/assets/07d51ac9-522b-4f5a-bac4-fcb3bf483948"
/>


<img width="1151" height="893" alt="microphone-set-up"
src="https://github.com/user-attachments/assets/e5448223-d945-4093-97ba-7af93449405e"
/>

Author: DNR500

src/components/Editor/Project/ScratchContainer.jsx

@@ -124,6 +124,7 @@ export default function ScratchContainer() {
           className="scratch-container__iframe"
           src={iframeSrcUrl}
           title={"Scratch"}
+          allow="camera; microphone"
           style={{
             width: "100%",
             minWidth: `${SCRATCH_MIN_WIDTH}px`,

src/components/Editor/Project/ScratchContainer.test.js

@@ -137,6 +137,9 @@ describe("ScratchContainer", () => {
     );
     expect(viewport).toHaveClass("scratch-container__viewport");
     expect(iframe).toBeInTheDocument();
+    const allow = iframe.getAttribute("allow") ?? "";
+    expect(allow).toEqual(expect.stringContaining("camera"));
+    expect(allow).toEqual(expect.stringContaining("microphone"));
     expect(iframe).toHaveStyle({
       minWidth: "1024px",
     });