Arsenal

Title: Record of Revenge with Arsenal and MediaStream Recording API

Level: Intermediate (Secure context required: https:// or http://localhost)

Description:

Inspired by Nicolas Cage’s intense and vengeful role in Arsenal, this project uses the MediaStream Recording API to create a web application that allows users to record audio and video. The application captures the themes of revenge and family dynamics, enabling users to create recordings that can be played back or downloaded. This project demonstrates the practical use of the MediaStream Recording API to capture media, reflecting the film’s intense and dramatic atmosphere.

Features:

• Media Recording: Use the MediaStream Recording API to record audio and video.
• Playback and Download: Provide controls for playing back the recordings and downloading them.
• Thematic Design: Reflect the intensity and drama of Arsenal through the application’s design and interactions.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Record of Revenge with Arsenal and MediaStream Recording API</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #1c1c1c;
        color: #f0f0f0;
        text-align: center;
        padding: 50px;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #2e2e2e;
        border: 1px solid #444;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    h1 {
        margin-bottom: 20px;
        color: #ff6347;
    }
    video {
        width: 100%;
        max-width: 600px;
        border-radius: 10px;
        border: 2px solid #444;
    }
    button {
        padding: 10px 20px;
        margin: 20px 10px;
        border-radius: 5px;
        border: none;
        font-size: 16px;
        background-color: #007bff;
        color: white;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
    .controls {
        margin-top: 20px;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>Record of Revenge</h1>
        <p>Record and playback audio and video inspired by Arsenal.</p>

        <video id="video" controls></video>
        <br>
        <div class="controls">
            <button id="startButton">Start Recording</button>
            <button id="stopButton" disabled>Stop Recording</button>
            <button id="playButton" disabled>Play</button>
            <button id="downloadButton" disabled>Download</button>
        </div>
    </div>
<script>
    let mediaRecorder;
    let recordedBlobs;
    const video = document.getElementById('video');
    const startButton = document.getElementById('startButton');
    const stopButton = document.getElementById('stopButton');
    const playButton = document.getElementById('playButton');
    const downloadButton = document.getElementById('downloadButton');

    startButton.addEventListener('click', async () => {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        video.srcObject = stream;
        recordedBlobs = [];
        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                recordedBlobs.push(event.data);
            }
        };

        mediaRecorder.start();
        startButton.disabled = true;
        stopButton.disabled = false;
    });

    stopButton.addEventListener('click', () => {
        mediaRecorder.stop();
        stopButton.disabled = true;
        playButton.disabled = false;
        downloadButton.disabled = false;
    });

    playButton.addEventListener('click', () => {
        const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
        video.src = window.URL.createObjectURL(superBuffer);
        video.controls = true;
        video.play();
    });

    downloadButton.addEventListener('click', () => {
        const blob = new Blob(recordedBlobs, { type: 'video/webm' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'recording.webm';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    });
</script>
</body>
</html>

References:

• Arsenal (2017) - Wikipedia
• MediaStream Recording API - MDN Web Docs

Project Overview:

This project captures the intense and vengeful atmosphere of Arsenal using the MediaStream Recording API to enable users to record audio and video. Users can create recordings, play them back, and download them, reflecting the film’s themes of revenge and family dynamics. The application demonstrates the practical use of the MediaStream Recording API for capturing media, providing an engaging and interactive experience. Embrace the intensity and determination of Nicolas Cage’s character to master the use of the MediaStream Recording API in web development. Praise Cage!