CLIPPING FRONTEND BACKEND EXAMPLE

-------------------------------------------------------------------------
-------------------------------------------------------------------------
FRONT END BELOW FOR CLIPPING FEATURE
-------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clip Your Stream</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #clipSection { margin: 20px 0; }
    </style>
</head>
<body>

<h1>Clip Your Live Stream</h1>
<video id="liveStream" width="640" height="360" controls>
    <source src="your_live_stream_url" type="video/mp4">
    Your browser does not support the video tag.
</video>

<div id="clipSection">
    <label for="startTime">Start Time (seconds):</label>
    <input type="number" id="startTime" min="0" required>
    <label for="endTime">End Time (seconds):</label>
    <input type="number" id="endTime" min="1" required>
    <button id="clipButton">Create Clip</button>
</div>

<script>
    document.getElementById('clipButton').addEventListener('click', async () => {
        const startTime = document.getElementById('startTime').value;
        const endTime = document.getElementById('endTime').value;

        const response = await fetch('/api/clip', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ startTime, endTime })
        });

        if (response.ok) {
            const result = await response.json();
            alert(`Clip created: ${result.clipUrl}`);
        } else {
            alert('Error creating clip.');
        }
    });
</script>

</body>
</html>
-------------------------------------------------------------------------
-------------------------------------------------------------------------
BACKEND FOR CLIPPING FEATURE
-------------------------------------------------------------------------
const express = require('express');
const bodyParser = require('body-parser');
const ffmpeg = require('fluent-ffmpeg');
const path = require('path');
const fs = require('fs');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use(express.static('public')); // Serve static files from the 'public' directory

app.post('/api/clip', (req, res) => {
    const { startTime, endTime } = req.body;

    // Path to your live stream video
    const inputVideo = 'path/to/your_live_stream.mp4';
    const outputVideo = `clipped_${startTime}-${endTime}.mp4`;

    ffmpeg(inputVideo)
        .setStartTime(startTime)
        .setDuration(endTime - startTime)
        .output(path.join(__dirname, outputVideo))
        .on('end', () => {
            res.json({ clipUrl: `/${outputVideo}` });
        })
        .on('error', (err) => {
            console.error('Error: ' + err.message);
            res.status(500).send('Error processing video.');
        })
        .run();
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});