Recherche avancée

Sur d’autres sites (5237)

• How to decode and play the .h264 video from amazon s3 server in android ?

  7 mai 2015, par Ashok

  I have .h264 videos in server, how to decode that video and playing in android ?

  I am using the FFMPEG to play those videos but in FFMPEG sample it takes
  the video from SD-card and successfully play’s the video. I am using the
  surface view to play those videos. My question is how to play .h264 video from amazon s3 server in android ?

  Thanks in advance.

• Layout/UI tweaks, click anywhere to play, minor code cleanup, "real" (not Ex-)canvas + spectrum ish works in IE 9

  2 janvier 2011, par Scott Schiller

  m demo/360-player/360player-visualization.css m demo/360-player/360player.css m demo/360-player/canvas-visualization.html m demo/360-player/script/360player.js Layout/UI tweaks, click anywhere to play, minor code cleanup, "real" (not Ex-)canvas + spectrum ish works in IE (...)

• 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.