fix: improvements from recordings 25.04.2025

Author: danieldanielecki

README.md

@@ -4330,7 +4330,7 @@ function handleFile(event) {
 
 [^115]CodeSandbox: File API.
 
-[^115]:[CodeSandbox: File API](https://69c6jw.csb.app/), last access: October 6, 2024.
+[^115]:[CodeSandbox: File API](https://69c6jw.csb.app/), last access: April 25, 2025.
 
 - The code above demonstrates how to use the File API to read the contents of a file selected by the user.
 - When a file is selected using the `<input type="file">` element, the `onchange` event is triggered, calling the `handleFile()` function.
@@ -4347,6 +4347,10 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true })
   .then(function(stream) {
     const videoElement = document.createElement("video");
     videoElement.srcObject = stream;
+    videoElement.height = 240;
+    videoElement.width = 320;
+    videoElement.controls = true;
+    videoElement.muted = false;
     document.body.appendChild(videoElement);
   })
   .catch(function(error) {
@@ -4359,7 +4363,7 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true })
 
 [^116]CodeSandbox: WebRTC API.
 
-[^116]:[CodeSandbox: WebRTC API](https://8kfdt8.csb.app/), last access: October 7, 2024.
+[^116]:[CodeSandbox: WebRTC API](https://8kfdt8.csb.app/), last access: April 25, 2025.
 
 - The code above demonstrates how to use the WebRTC API to access the user's audio and video devices and display a live video stream in the browser.
 - The `getUserMedia()` method is called on the `mediaDevices` object to request access to the user's microphone and camera.
@@ -4370,14 +4374,14 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true })
 The Media Capture and Streams API enables web applications to capture audio, video, and images from the user's device using the device's built-in camera and microphone. This API provides methods for accessing media devices, capturing media streams, and recording audio and video. It also allows for advanced features such as real-time audio and video processing and manipulation. The Media Capture and Streams API empowers developers to create rich multimedia experiences directly within the browser.
 
 ```html
-<input type="file" accept="image/*" capture="camera">
+<input type="file" accept="image/*" capture>
 ```
 
 [![Edit 117-Media Capture and Streams API](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/117-media-capture-and-streams-api-4s97wh)
 
 [^117]CodeSandbox: Media Capture and Streams API.
 
-[^117]:[CodeSandbox: Media Capture and Streams API](https://4s97wh.csb.app/), last access: October 7, 2024.
+[^117]:[CodeSandbox: Media Capture and Streams API](https://4s97wh.csb.app/), last access: April 25, 2025.
 
 - The code above demonstrates how to use the Media Capture API to enable image capture from the device's camera.
 - The `<input>` element has the `type` attribute set to `file` to create a file input control.

__extra-resources/file-api.md

@@ -0,0 +1,9 @@
+# File API and Related Topics
+
+During the recording, I mentioned the **File API** class and referred to the MDN documentation for the `<input type="file">` element. You can read more about it here: [MDN Docs - `<input type="file>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file).
+
+Additionally, I demonstrated the `<pre>` HTML tag, which is useful for displaying preformatted text. You can find more details on this tag at [W3Schools - `<pre>` Tag](https://www.w3schools.com/tags/tag_pre.asp).
+
+We also explored the `FileReader` API, specifically the `readAsDataURL` method, which allows you to convert an image to Base64 format. For more information, check out: [MDN Docs - FileReader.readAsDataURL](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL).
+
+Finally, we reviewed the Base64-encoded image using the [Base64 Guru](https://base64.guru/) website.

__extra-resources/file-api.pdf

@@ -0,0 +1,10 @@
+# Media Capture and Streams API - Additional Resources
+
+Here are some useful documentation links we visited during the recording. Feel free to explore and experiment with the options:
+
+1. [MDN: HTML Attribute Reference - `accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept)
+2. [MDN: HTML Attribute Reference - `capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/capture)
+
+Additionally, we referred to a popular Stack Overflow discussion where it was clarified that the `capture` attribute does not require the value `"camera"`:
+
+- [Stack Overflow: HTML5 Input Type File Accept Image Capture Camera Display as Image](https://stackoverflow.com/questions/23916566/html5-input-type-file-accept-image-capture-camera-display-as-image-rat)

__extra-resources/media-capture-streams-api.md

@@ -0,0 +1,3 @@
+# WebRTC API
+
+[Learn more about the WebRTC API and how to play with different settings using `getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia). This link provides detailed documentation and examples to help you explore the API further.

__extra-resources/media-capture-streams-api.pdf

@@ -3113,12 +3113,16 @@ <h1>Welcome to My Website</h1>
 
 ### WebRTC API <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
 
-```html[|1|11|1,11|2|3|7|3,7|4|5|6|8|10|8,10|9]
+```html[|1|15|1,15|2|3|11|3,11|4|5|10|12|14|12,14|13]
 <script>
   navigator.mediaDevices.getUserMedia({ audio: true, video: true })
     .then(function (stream) {
       const videoElement = document.createElement("video");
       videoElement.srcObject = stream;
+      videoElement.height = 240;
+      videoElement.width = 320;
+      videoElement.controls = true;
+      videoElement.muted = false;
       document.body.appendChild(videoElement);
     })
     .catch(function (error) {
@@ -3139,7 +3143,7 @@ <h1>Welcome to My Website</h1>
 <input
   type="file"
   accept="image/*"
-  capture="camera"
+  capture
 >
 ```