// app.js

const express = require('express');
const app = express();
const http = require('http');
const fs = require('fs');
const bodyParser = require('body-parser');
const server = http.createServer(app);

// Increase the server's payload size limit
app.use(express.json({ limit: '10mb' }));
app.use(express.urlencoded({ limit: '10mb', extended: true }));

const port = 3000;

// Create a MySQL connection
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root@123',
  database: 'abc',
});

// Connect to the MySQL server
connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL server');
});

// Set up the Express app
app.use(express.static('public'));

app.post('/capture-frame', (req, res) => {
  const frameData = req.body.frameData;
  const framePath = `public/frame_${Date.now()}.png`;
  const base64Data = frameData.replace(/^data:image\/png;base64,/, '');

  fs.writeFile(framePath, base64Data, 'base64', (err) => {
    if (err) throw err;
    console.log('Frame captured and saved as', framePath);
  });

  res.sendStatus(200);
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

 

////////////////

 

<!-- public/video.html -->

<!DOCTYPE html>
<html>
<head>
   <title>Video App</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
   <video id="videoPlayer" controls style="width: 400px; height: 300px;">
       <source src="your_video.mp4" type="video/mp4"> <!-- Replace 'your_video.mp4' with the actual video source -->
   </video>
   <button id="captureBtn">Capture Frame</button>
   <script>
       $(document).ready(function () {
           // AJAX request to capture the current frame
           $('#captureBtn').click(function () {
               const videoPlayer = document.getElementById('videoPlayer');
               const canvas = document.createElement('canvas');
               canvas.width = videoPlayer.videoWidth;
               canvas.height = videoPlayer.videoHeight;
               const context = canvas.getContext('2d');
               context.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
               const frameData = canvas.toDataURL();
               $.ajax({
                   url: '/capture-frame',
                   method: 'POST',
                   data: { frameData },
                   success: function (response) {
                       console.log('Frame captured successfully');
                   },
                   error: function (xhr, status, error) {
                       console.error(error);
                   }
               });
           });
       });
   </script>
</body>
</html>