Recherche avancée

Sur d’autres sites (9174)

• how to receive livestream chats from different platforms using rtmp ?

  30 avril 2024, par rutujp78

  I want to create StreamYard clone, I knew till the part where we can start the livestream for multiple platform at once using RTMP links and ffmpeg, but I want to know to receive chats from platform.

  


  I did livestream on YT and Insta but not able to figure out the chats part.

  


  import http from 'http'
import path from 'path'
import { spawn } from 'child_process'
import express from 'express'
import { Server as SocketIO } from 'socket.io'

const app = express();
const server = http.createServer(app);
const io = new SocketIO(server)

const options = [
    '-i',
    '-',
    '-c:v', 'libx264',
    '-preset', 'ultrafast',
    '-tune', 'zerolatency',
    '-r', `${25}`,
    '-g', `${25 * 2}`,
    '-keyint_min', 25,
    '-crf', '25',
    '-pix_fmt', 'yuv420p',
    '-sc_threshold', '0',
    '-profile:v', 'main',
    '-level', '3.1',
    '-c:a', 'aac',
    '-b:a', '128k',
    '-ar', 128000 / 4,
    '-f', 'flv',
    `yt-rtmp link`,
];

const ffmpegProcess = spawn('ffmpeg', options);

ffmpegProcess.stdout.on('data', (data) => {
    console.log(`ffmpeg stdout: ${data}`);
});

ffmpegProcess.stderr.on('data', (data) => {
    console.error(`ffmpeg stderr: ${data}`);
});

ffmpegProcess.on('close', (code) => {
    console.log(`ffmpeg process exited with code ${code}`);
});



app.use(express.static(path.resolve('./public')))


io.on('connection', socket => {
    console.log('Socket Connected', socket.id);
    socket.on('binarystream', stream => {
        console.log('Binary Stream Incommming...')
        ffmpegProcess.stdin.write(stream, (err) => {
            console.log('Err', err)
        })
    })
})

server.listen(3000, () => console.log(`HTTP Server is runnning on PORT 3000`))


  


• How to create video from a stream webcam and canvas ?

  1er mai 2024, par Stefdelec

  I am trying to generate a video on browser from different cut :
Slide : stream from canvas
Video : stream from webcam

  


  I just want to allow user to download the video edit with
slide1 + video1 + slide2 + video2 + slide3 + video3.

  


  Here is my code :

  


  const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const webcam = document.getElementById('webcam');
const videoPlayer = document.createElement('video');
videoPlayer.controls = true;
document.body.appendChild(videoPlayer);
const videoWidth = 640;
const videoHeight = 480;
let keepAnimating = true;
const frameRate=30;
// Attempt to get webcam access
function setupWebcam() {
 const constraints = {
        video: {
             frameRate: frameRate,
            width: videoWidth,  
            height: videoHeight 
        }
    };
  navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
      webcam.srcObject = stream;
      webcam.addEventListener('loadedmetadata', () => {
        recordSegments();
        console.log('Webcam feed is now displayed');
      });
    })
    .catch(err => {
      console.error("Error accessing webcam:", err);
      alert('Could not access the webcam. Please ensure permissions are granted and try again.');
    });
}


// Function to continuously draw on the canvas
function animateCanvas(content) {
  if (!keepAnimating) {
    console.log("keepAnimating", keepAnimating);
    return;
  }; // Stop the animation when keepAnimating is false

  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous drawings
  ctx.fillStyle = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.5)`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#000';
  ctx.font = '48px serif';
  ctx.fillText(content + ' ' + new Date().toLocaleTimeString(), 50, 100);

  // Request the next frame
  requestAnimationFrame(() => animateCanvas(content));
}


// Initialize recording segments array
const recordedSegments = [];
// Modified startRecording to manage animation
function startRecording(stream, duration = 5000, content) {
  const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
  const data = [];

  recorder.ondataavailable = e => data.push(e.data);


  // Start animating the canvas
  keepAnimating = true;
  animateCanvas(content);
  recorder.start();
  return new Promise((resolve) => {
    // Automatically stop recording after 'duration' milliseconds
    setTimeout(() => {
      recorder.stop();
      // Stop the animation when recording stops
      keepAnimating = false;
    }, duration);

    recorder.onstop = () => {
      const blob = new Blob(data, { type: 'video/webm' });
      recordedSegments.push(blob);
       keepAnimating = true;
      resolve(blob);
    };
  });
}

// Sequence to record segments
async function recordSegments() {
  // Record canvas with dynamic content
  await startRecording(canvas.captureStream(frameRate), 2000, 'Canvas Draw 1').then(() => console.log('Canvas 1 recorded'));

      await startRecording(webcam.srcObject,3000).then(() => console.log('Webcam 1 recorded'));

          await startRecording(webcam.srcObject).then(() => console.log('Webcam 1 recorded'));
  mergeAndDownloadVideo();
}

function downLoadVideo(blob){
 const url = URL.createObjectURL(blob);

  // Create an anchor element and trigger a download
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'merged-video.webm';
  document.body.appendChild(a);
  a.click();

  // Clean up by revoking the Blob URL and removing the anchor element after the download
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}
function mergeAndDownloadVideo() {
  console.log("recordedSegments length", recordedSegments.length);
  // Create a new Blob from all recorded video segments
  const superBlob = new Blob(recordedSegments, { type: 'video/webm' });
  
  downLoadVideo(superBlob)

  // Create a URL for the superBlob
 
}

// Start the process by setting up the webcam first
setupWebcam();


  


  You can find it here : https://jsfiddle.net/Sulot/nmqf6wdj/25/

  


  I am unable to have one "slide" + webcam video + "slide" + webcam video.

  


  It merges only the first 2 segments, but not the other. I tried with ffmpeg browser side.

  


• HTTP Live video streaming using ffmpeg using NODEJS via Socket.IO

  4 avril 2024, par dintel

  I can't transmit the webcam to the server and to the website. Before, I was able to transmit the webcam (I don't remember how), but I only see frames continuously sent in cmd and don't see anything at localhost:3000 or 127.0.0.1:3000.
I installed socket.io, ffmpeg and nodejs path
And when i try this one, everything fine on udp, but to server and website is impossible.
ffplay udp ://127.0.0.1:23000
ffmpeg -f dshow -framerate 30 -video_size 640x480 -i video="Integrated Camera" -vcodec mpeg4 -f mpegts udp ://127.0.0.1:23000

  


  My server.js code :

  


  
const http = require('http');
const fs = require('fs');
const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html'});
  fs.readFile(__dirname + '/index.html', (err, data) => {
    if (err) {
      res.writeHead(404);
      res.end(JSON.stringify(err));
      return;
    }
    res.writeHead(200);
    res.end(data);
  });
});
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

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

const spawn = require('child_process').spawn;

const ffmpeg = spawn('ffmpeg', [
  '-f', 'dshow',
  '-i', 'video="Integrated Camera"', // i'm sure this is my webcam window
  '-vcodec', 'libx264',
  '-preset', 'veryfast',
  '-tune', 'zerolatency',
  '-f', 'hls',
  '-hls_time', '2',
  '-hls_list_size', '6',
  '-hls_flags', 'delete_segments',
  '-hls_segment_filename', 'public/hls/stream%03d.ts',
  'public/hls/index.m3u8'
]);

ffmpeg.stderr.on('data', (data) => {
  console.error(`ffmpeg error: ${data}`);
});
`


  


  My index.html :

  


  &#xA;&#xA;&#xA;  &#xA;  &#xA;  &#xA;&#xA;&#xA;  <video width="640" height="480" controls="controls"></video>&#xA;  <code class="echappe-js">&lt;script src='http://stackoverflow.com/socket.io/socket.io.js'&gt;&lt;/script&gt;&#xA;  &lt;script&gt;&amp;#xA;    const socket = io();&amp;#xA;&amp;#xA;    const video = document.getElementById(&amp;#x27;videoPlayer&amp;#x27;);&amp;#xA;    const stream = new MediaStream();&amp;#xA;&amp;#xA;    video.srcObject = stream;&amp;#xA;    video.play();&amp;#xA;&amp;#xA;    socket.on(&amp;#x27;stream&amp;#x27;, (data) =&gt; {&amp;#xA;      const byteArray = new Uint8Array(data);&amp;#xA;      const blob = new Blob([byteArray], { type: &amp;#x27;video/mp4&amp;#x27; });&amp;#xA;      const url = window.URL.createObjectURL(blob);&amp;#xA;&amp;#xA;      const reader = new FileReader();&amp;#xA;      reader.readAsDataURL(blob);&amp;#xA;      reader.onloadend = () =&gt; {&amp;#xA;        video.src = reader.result;&amp;#xA;      };&amp;#xA;    });&amp;#xA;  &lt;/script&gt;&#xA;&#xA;&#xA;`&#xA; `&#xA;