Recherche avancée

Sur d’autres sites (7845)

• set MediaRecorder to record 1 frame every N seconds

  19 août 2022, par The Blind Hawk

  Summary

  


  I have a version of my code already working on Chrome and Edge, but I need some fixes for it to work on Safari.
  
My objective is to record around 25 minutes and download a timelapse version of the recording.
  
final product requirements :

  


  speed: 3fps
length: ~25s

(I need to record one frame every 20 seconds for 25 mins)


  


  this.secondStream settings :

  


  this.secondStream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {width: 430, height: 430, facingMode: "user"}
});


  


  My code for IOS so far :

  


          startIOSVideoRecording: function() {
            console.log("setting up recorder");
            var self = this;
            this.data = [];

            if (MediaRecorder.isTypeSupported('video/mp4')) {
                // IOS does not support webm, so I will be using mp4
                var options = {mimeType: 'video/mp4', videoBitsPerSecond : 1000000};
            } else {
                console.log("ERROR: mp4 is not supported, trying to default to webm");
                var options = {mimeType: 'video/webm'};
            }
            console.log("options settings:");
            console.log(options);

            this.recorder = new MediaRecorder(this.secondStream, options);

            this.recorder.ondataavailable = function(evt) {
                if (evt.data && evt.data.size > 0) {
                    self.data.push(evt.data);
                    console.log('chunk size: ' + evt.data.size);
                }
            }

            this.recorder.onstop = function(evt) {
                console.log('recorder stopping');
                var blob = new Blob(self.data, {type: "video/mp4"});
                self.download(blob, "mp4");
                self.sendMail(videoBlob);
            }

            console.log("finished setup, starting")
            this.recorder.start(1200);

            function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}

            async function looper() {
                // I am trying to pick one second every 20 more or less
                await sleep(500);
                self.recorder.pause();
                await sleep(18000);
                self.recorder.resume();
                looper();
            }
            looper();
        },


  


  Issues

  


  Only one call to getUserMedia()

  


  I am already using this.secondstream elsewhere, and I need the settings to stay as they are for the other functionality.
  
On Chrome and Edge, I could just call getUserMedia() again with different settings, and the issue would be solved, but on IOS calling getUserMedia() a second time kills the first stream.
  
The settings that I was planning to use (works for Chrome and Edge) :

  


  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: { 
        width: 360, height: 240, facingMode: "user", 
        frameRate: { min:0, ideal: 0.05, max:0.1 } 
    },
}


  


  The timelapse library I am using does not support mp4 (ffmpeg as alternative ?)

  


  I am forced to use mp4 on IOS apparently, but this does not allow me to use the library I was relying on so I need an alternative.
  
I am thinking of using ffmpeg but cannot find any documentation to make it interact with the blob before the download.
  
I do not want to edit the video after downloading it, but I want to be able to download the already edited version, so no terminal commands.

  


  MediaRecorder pause and resume are not ideal

  


  On Chrome and Edge I would keep one frame every 20 seconds by setting the frameRate to 0.05, but this does not seem to work on IOS for two reasons.
  
First one is related to the first issue of not being able to change the settings of getUserMedia() without destroying the initial stream in the first place.
  
And even after changing the settings, It seems that setting the frame rate below 1 is not supported on IOS. Maybe I wrote something else wrong, but I was not able to open the downloaded file.
  
Therefore I tried relying on pausing and resuming the MediaRecorder, but this brings forth another two issues :
  
I am currently saving 1 second every 20 seconds and not 1 frame every 20 seconds, and I cannot find any workarounds.
  
Pause and Resume take a little bit of time, making the code unreliable, as I sometimes pick 2/20 seconds instead of 1/20, and I have no reliability that the loop is actually running every 20 seconds (might be 18 might be 25).

  


• Converting DAV to MP4 and OGG

  25 avril, par mackowiakp

  I want to prepare WEB page containing films from security camera recorders. Each recorder transmit video files in DAV format so each film is converted to MP4 format by script, using such syntax :

  



  ffmpeg -y -i movie.dav -vcodec libx264 -crf 24 movie.mp4


  



  So I included in HTMLv5 code such entry :

  



   <video width="320" height="240">&#xA;  <source src="movie.mp4" type="video/mp4">&#xA;</source></video> &#xA;

  



  It works correctly with Chrome but not with Firefox. For proper work in FF it is necessary add link to OGG file. So correct HTMLv5 syntax for both browsers should look like this :

  



   <video width="320" height="240">&#xA;  <source src="movie.mp4" type="video/mp4">&#xA;  <source src="movie.ogg" type="video/ogg">&#xA;</source></source></video>&#xA;

  



  Can anybody help me to pass correct ffmpeg syntax to create OGG file ?

  



  Output from console after using -movflags +faststart options

  



  [maciek@piotr MMM]$ ../ffmpeg-2.4.2-64bit-static/ffmpeg -movflags +faststart -y -i   04.24.23-04.24.38\[M\]\[@0\]\[0\].dav -vcodec libx264 -crf 24 10.mp4
ffmpeg version 2.4.2-   http://johnvansickle.com/ffmpeg/    Copyright (c) 2000-2014 the FFmpeg developers
  built on Oct  9 2014 07:24:56 with gcc 4.8 (Debian 4.8.3-11)
  configuration: --enable-gpl --enable-version3 --disable-shared --disable-debug --enable-runtime-cpudetect --enable-libmp3lame --enable-libx264 --enable-libx265 --enable- libwebp --enable-libspeex --enable-libvorbis --enable-libvpx --enable-libfreetype --enable-fontconfig --enable-libxvid --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-gray --enable-libopenjpeg --enable-libopus --disable-ffserver --enable-libass --enable-gnutls --cc=gcc-4.8
  libavutil      54.  7.100 / 54.  7.100
  libavcodec     56.  1.100 / 56.  1.100
  libavformat    56.  4.101 / 56.  4.101
  libavdevice    56.  0.100 / 56.  0.100
  libavfilter     5.  1.100 /  5.  1.100
  libswscale      3.  0.100 /  3.  0.100
  libswresample   1.  1.100 /  1.  1.100
  libpostproc    53.  0.100 / 53.  0.100
Option movflags not found.


  


• Converting DAV to MP4 and OGG

  27 mars 2015, par mackowiakp

  I want to prepare WEB page containing films from security camera recorders. Each recorder transmit video files in DAV format so each film is converted to MP4 format by script, using such syntax :

  ffmpeg -y -i movie.dav -vcodec libx264 -crf 24 movie.mp4

  So I included in HTMLv5 code such entry :

   <video width="320" height="240">
  
    <source src="movie.mp4" type="video/mp4">
  
  </source></video> 

  It works correctly with Chrome but not with Firefox. For proper work in FF it is necessary add link to OGG file. So correct HTMLv5 syntax for both browsers should look like this :

   <video width="320" height="240">
  
    <source src="movie.mp4" type="video/mp4">
  
    <source src="movie.ogg" type="video/ogg">
  
  </source></source></video>

  Can anybody help me to pass correct ffmpeg syntax to create OGG file ?

  Output from console after using -movflags +faststart options

  [maciek@piotr MMM]$ ../ffmpeg-2.4.2-64bit-static/ffmpeg -movflags +faststart -y -i   04.24.23-04.24.38\[M\]\[@0\]\[0\].dav -vcodec libx264 -crf 24 10.mp4
  
  ffmpeg version 2.4.2-   http://johnvansickle.com/ffmpeg/    Copyright (c) 2000-2014 the FFmpeg developers
  
    built on Oct  9 2014 07:24:56 with gcc 4.8 (Debian 4.8.3-11)
  
    configuration: --enable-gpl --enable-version3 --disable-shared --disable-debug --enable-runtime-cpudetect --enable-libmp3lame --enable-libx264 --enable-libx265 --enable- libwebp --enable-libspeex --enable-libvorbis --enable-libvpx --enable-libfreetype --enable-fontconfig --enable-libxvid --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-gray --enable-libopenjpeg --enable-libopus --disable-ffserver --enable-libass --enable-gnutls --cc=gcc-4.8
  
    libavutil      54.  7.100 / 54.  7.100
  
    libavcodec     56.  1.100 / 56.  1.100
  
    libavformat    56.  4.101 / 56.  4.101
  
    libavdevice    56.  0.100 / 56.  0.100
  
    libavfilter     5.  1.100 /  5.  1.100
  
    libswscale      3.  0.100 /  3.  0.100
  
    libswresample   1.  1.100 /  1.  1.100
  
    libpostproc    53.  0.100 / 53.  0.100
  
  Option movflags not found.