Recherche avancée

Sur d’autres sites (7004)

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

  


• Using ffmpeg to merge video segments created by the MediaRecorder API

  10 avril 2023, par Dario Cimmino

  I am recording a live video from a webcam using mediarecorder API un chunks of 3 seconds :

  


  startButton.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({
    video: {
        width: 1280,
        height: 720,
        frameRate: { ideal: 30, max: 30 }
    }
})
    .then(stream => {
        video.srcObject = stream;
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        mediaRecorder.ondataavailable = async (event) => {
            const blob = new Blob([event.data], { type: 'video/mp4' });
            const formData = new FormData();
            formData.append('segment', blob, `segment${segmentNumber}.mp4`);

            // When a new video segment is ready
            fetch('http://localhost:3000/upload', {
                method: 'POST',
                body: formData
            })
                .then((response) => response.text())
                .then((result) => {
                    console.log('Upload result:', result);
                })
                .catch((error) => {
                    console.error('Error uploading video segment:', error);
                });
            //Upload data to mysql
            fetch('upload.php', {
                method: 'POST',
                body: formData
            })
                .then(response => response.text())
                .then(result => {
                    console.log('Upload result to MYSQL:', result);
                })
                .catch(error => {
                    console.error('Error uploading video segment to MYSQL:', error);
                });
            segmentNumber++;
        };

        mediaRecorder.start(3000);
    })
    .catch(error => {
        console.error('Error accessing camera:', error);
    });


  


  }) ;

  


  I am left with only the first segment playable, as is expected.

  


  How ever when the recording stops, i'd like to merge all those segments recorded using ffmpeg (or any other) with the help of my nodeJs server.

  


  I am having difficulty understand the parsing of mp4 files.

  


  if I try the command :

  


  ffmpeg -i segment1.mp4 -i segment2.mp4 -i segment3.mp4  out.mp4


  


  I get the following error :

  


      ffmpeg version N-110223-gb18a9c2971-20230410 Copyright (c) 2000-2023 the FFmpeg developers
  built with gcc 12.2.0 (crosstool-NG 1.25.0.152_89671bf)
  configuration: --prefix=/ffbuild/prefix --pkg-config-flags=--static --pkg-config=pkg-config --cross-prefix=x86_64-w64-mingw32- --arch=x86_64 --target-os=mingw32 --enable-gpl --enable-version3 --disable-debug --disable-w32threads --enable-pthreads --enable-iconv --enable-libxml2 --enable-zlib --enable-libfreetype --enable-libfribidi --enable-gmp --enable-lzma --enable-fontconfig --enable-libvorbis --enable-opencl --disable-libpulse --enable-libvmaf --disable-libxcb --disable-xlib --enable-amf --enable-libaom --enable-libaribb24 --enable-avisynth --enable-chromaprint --enable-libdav1d --enable-libdavs2 --disable-libfdk-aac --enable-ffnvcodec --enable-cuda-llvm --enable-frei0r --enable-libgme --enable-libkvazaar --enable-libass --enable-libbluray --enable-libjxl --enable-libmp3lame --enable-libopus --enable-librist --enable-libssh --enable-libtheora --enable-libvpx --enable-libwebp --enable-lv2 --disable-libmfx --enable-libvpl --enable-openal --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenh264 --enable-libopenjpeg --enable-libopenmpt --enable-librav1e --enable-librubberband --enable-schannel --enable-sdl2 --enable-libsoxr --enable-libsrt --enable-libsvtav1 --enable-libtwolame --enable-libuavs3d --disable-libdrm --disable-vaapi --enable-libvidstab --enable-vulkan --enable-libshaderc --enable-libplacebo --enable-libx264 --enable-libx265 --enable-libxavs2 --enable-libxvid --enable-libzimg --enable-libzvbi --extra-cflags=-DLIBTWOLAME_STATIC --extra-cxxflags= --extra-ldflags=-pthread --extra-ldexeflags= --extra-libs=-lgomp --extra-version=20230410
  libavutil      58.  6.100 / 58.  6.100
  libavcodec     60.  9.100 / 60.  9.100
  libavformat    60.  4.101 / 60.  4.101
  libavdevice    60.  2.100 / 60.  2.100
  libavfilter     9.  5.100 /  9.  5.100
  libswscale      7.  2.100 /  7.  2.100
  libswresample   4. 11.100 /  4. 11.100
  libpostproc    57.  2.100 / 57.  2.100
Input #0, matroska,webm, from 'segment1.mp4':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
  Stream #0:0(eng): Video: h264 (Constrained Baseline), yuv420p(progressive), 1280x720 [SAR 1:1 DAR 16:9], 30.30 fps, 30 tbr, 1k tbn (default)
[mov,mp4,m4a,3gp,3g2,mj2 @ 000001d93cf25fc0] Format mov,mp4,m4a,3gp,3g2,mj2 detected only with low score of 1, misdetection possible!
[mov,mp4,m4a,3gp,3g2,mj2 @ 000001d93cf25fc0] moov atom not found
segment2.mp4: Invalid data found when processing input


  


  any help or inputs are appreciated. THanks !

  


• Is there a way to work with fluent-ffmpeg library for audio encoding (webm to wav/mp3) in Angular 2+ ?

  24 avril 2019, par binarysynthesis

  So i’m using Browser media objects to record audio using microphone for speech to text transcription. The recorded media gives me a blob/file which is in webm format. I want to convert the blob/file to wav or mp3 format which will be sent to AWS S3 Storage from where i intend to use the AWS Transcribe (Speech to Text) service to pick up the file and produce a transcript of the speech. AWS Transcribe doesn’t support webm format due to which i need to encode the audio on the client side to either wav or mp3. I’m trying to use the fluent-ffmpeg (third-party) [https://www.npmjs.com/package/fluent-ffmpeg] npm library to accomplish that but i keep getting the following error in the Typescript compiler when building using ng serve. I have already tried using the RecorderJS and the WebAudioRecoderJS npm libraries and i get the same ’Module not found’ error. -

  ERROR in ./node_modules/fluent-ffmpeg/index.js
  
  Module not found: Error: Can't resolve './lib-cov/fluent-ffmpeg' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/ffprobe.js
  
  Module not found: Error: Can't resolve 'child_process' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/processor.js
  
  Module not found: Error: Can't resolve 'child_process' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/utils.js
  
  Module not found: Error: Can't resolve 'child_process' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/recipes.js
  
  Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/capabilities.js
  
  Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/processor.js
  
  Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/isexe/index.js
  
  Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\isexe'
  
  ERROR in ./node_modules/isexe/windows.js
  
  Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\isexe'
  
  ERROR in ./node_modules/isexe/mode.js
  
  Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\isexe'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/utils.js
  
  Module not found: Error: Can't resolve 'os' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/recipes.js
  
  Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
  
  Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/capabilities.js
  
  Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/processor.js
  
  Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/options/misc.js
  
  Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib\options'
  
  ERROR in ./node_modules/which/which.js
  
  Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\which'
  
  ERROR in ./node_modules/fluent-ffmpeg/lib/recipes.js
  
  Module not found: Error: Can't resolve 'stream' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
  
  i ｢wdm｣: Failed to compile.

  I am using Angular 7.2.0 and TypeScript 3.2.4.
  I have also installed the type definitions for fluent-ffmpeg [https://www.npmjs.com/package/@types/fluent-ffmpeg] within the node_modules to specify the typings for TypeScript.
  Below is my angular component file where i have implemented the audio recording functionality in the Browser -

  /// <reference types="@types/dom-mediacapture-record"></reference>
  
  import { Component } from '@angular/core';
  
  import * as aws from 'aws-sdk';
  
  import * as TranscribeService from 'aws-sdk/clients/transcribeservice';
  
  import * as Ffmpeg from 'fluent-ffmpeg';
  
  
  
  @Component({
  
    selector: 'app-root',
  
    templateUrl: './app.component.html',
  
    styleUrls: ['./app.component.css']
  
  })
  
  export class AppComponent {
  
  
  
    speechToText() {
  
  
  
      console.log(Ffmpeg);     
  
  
  
      // Begin streaming audio
  
      navigator.mediaDevices.getUserMedia({ audio: true })
  
        .then(stream => {
  
          const mediaRecorder = new MediaRecorder(stream);
  
          // Start recording audio
  
          mediaRecorder.start();
  
  
  
          const audioChunks = [];
  
          // When recording starts
  
          mediaRecorder.addEventListener("dataavailable", event => {
  
            audioChunks.push((<any>event).data);
  
          });
  
  
  
  
  
          // When recording stops
  
          mediaRecorder.addEventListener("stop", () => {
  
            const audioBlob = new Blob(audioChunks, { type: 'audio/webm;codecs=opus' });
  
            const audioFile = new File([audioBlob], 'outputAudioFile');
  
            const audioUrl = URL.createObjectURL(audioBlob);
  
  
  
  </any>

  I’m not posting the entire component code as the rest is part of the AWS SDK and is irrelevant to the problem statement. I need to convert the audioBlob or the audioFile which are currently in the webm format to wav or mp3 for uploading to the AWS services. How can i achieve that in Angular using the ffmpeg library ? I’m open to other solutions as well and not just ffmpeg to get the job done on the client side.