Vampires Kiss

Project Title: “Nightly Narratives: A Vampire’s Stream”

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

Description:

“Vampire’s Kiss,” starring Nicolas Cage as Peter Loew, is a film about a man descending into madness, believing himself to be turning into a vampire. Drawing inspiration from this theme of transformation and illusion, “Nightly Narratives: A Vampire’s Stream” is a web application that lets users create and share their own gothic-style narratives through live video streaming, enhanced with real-time video effects that give a supernatural appearance.

Leveraging the Media Capture and Streams API, this application allows users to capture video from their webcams, apply various filters (like grayscale, sepia, or even more eerie effects), and stream this content live to a dedicated channel where others can watch and interact. This project creates a platform for storytelling and role-playing, inviting users to immerse themselves in a vampiric persona akin to Peter Loew’s.

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>Nightly Narratives: A Vampire's Stream</title>
<style>
    body {
        font-family: 'Gothic A1', sans-serif;
        background-color: #0a0b0e;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .video-container {
        text-align: center;
    }

    button {
        background-color: #720026;
        border: none;
        color: white;
        padding: 10px 20px;
        margin-top: 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
</style>
</head>
<body>
    <div class="video-container">
        <video id="video" autoplay></video>
        <button id="startButton">Start Your Transformation</button>
    </div>
<script>
    document.getElementById('startButton').addEventListener('click', async function() {
        const video = document.getElementById('video');
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            video.srcObject = stream;
        } catch (error) {
            console.error('Error accessing the camera: ', error);
        }
    });

    // Placeholder for adding video effects - additional library or custom shaders could be used here
</script>
</body>
</html>

References:

• Film: Vampire’s Kiss (1988)
• API: Media Capture and Streams API Documentation

This application not only provides a platform for creative expression and gothic fantasy but also brings to life the haunting descent of “Vampire’s Kiss” through modern web technology, allowing users to explore their darker, theatrical sides in a controlled and immersive environment.