Recherche avancée

Sur d’autres sites (8340)

• create a timelapse video using MediaRecorder API ( and ffmpeg ? )

  24 août 2022, par The Blind Hawk

  Summary

  


  I have a version of my code already working on Chrome and Edge (Mac Windows and Android), but I need some fixes for it to work on IOS (Safari/Chrome).
  
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).

  


  My working code for other platforms

  


  This is my code for the other platforms, hope it helps !
  
Quick note : you will need to give it a bit of time between setup and start.
  
The timelapse library is here

  


  
        setupVideoRecording: function() {
            let video  = { 
                width: 360, height: 240, facingMode: "user", 
                frameRate: { min:0, ideal: 0.05, max:0.1 } 
            };
            navigator.mediaDevices.getUserMedia({
                audio: false,
                video: video,
            }).then((stream) => {
                // this is a video element
                const recVideo = document.getElementById('self-recorder');
                recVideo.muted = true;
                recVideo.autoplay = true;
                recVideo.srcObject = stream;
                recVideo.play();
            });
        },

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

            var video = document.getElementById('self-recorder');

            if (MediaRecorder.isTypeSupported('video/webm; codecs=vp9')) {
                var options = {mimeType: 'video/webm; codecs=vp9'};
            } else  if (MediaRecorder.isTypeSupported('video/webm')) {
                var options = {mimeType: 'video/webm'};
            }
            console.log("options settings:");
            console.log(options);

            this.recorder = new MediaRecorder(video.captureStream(), options);

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

            this.recorder.onstop = function(evt) {
                console.log('recorder stopping');
                timelapse(self.data, 3, function(blob) {
                    self.download(blob, "webm");
                });
            }

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


  


• Anomalie #4097 (En cours) : bug HTTPS dans la fonction url_de_base() sur certains serveurs mal con...

  14 février 2018, par Pierre-Aurélien Georges

  Bonjour,

  voici le contexte : le serveur web de mon hébergeur est mal configuré (et je n’ai malheureusement pas réussi à leur faire corriger le problème). Le site web [1] est accessible aussi bien en HTTP qu’en HTTPS, mais en allant sur /ecrire/ ?exec=info je vois que le serveur ne renseigne ni la variable $_SERVER[’HTTPS’] ni la variable $_SERVER["SCRIPT_URI"], et à vrai dire lorsque je compare sur ce serveur un phpinfo() en HTTP et un phpinfo() en HTTPS je vois qu’il y n’a strictement AUCUNE différence entre les deux, et qu’il est donc totalement impossible de savoir (côté serveur) si la requête a été faite en HTTP ou en HTTPS.

  Dans ce contexte bien précis, le code de la fonction url_de_base() situé dans /ecrire/inc/utils.php pose problème, car il se base sur le contenu de ces deux variables $_SERVER[’HTTPS’] et $_SERVER["SCRIPT_URI"] pour choisir entre HTTP et HTTPS et il ne tient absolument pas compte du contenu du champ META, ce qui dans mon cas est bien dommage car j’y ai mis l’url en https:...

  La conséquence de tout ceci est qu’en HTTPS cela entraîne des problèmes d’affichage d’images et de CSS qui ne sont pas bien appliqués, cf. [2]. Sur ce forum, vous verrez que je ne suis pas le seul à avoir affaire à un serveur mal configuré de la sorte, et que nous sommes plusieurs à avoir ce même problème. La solution de bricolage donnée par un des participants du forum est de rajouter dans /config/mes_options.php les deux lignes suivantes :
  

  $_SERVER[’HTTPS’] = "on" ;
  $_SERVER[’SERVER_PORT’]=’443’ ;
  

  
  Ca fonctionne, certes, et c’est donc ce que j’ai fait pour mon site, mais c’est vraiment du bricolage et c’était pas évident de trouver cette astuce !

  Pour faire plus propre et plus simple, serait-il possible à l’avenir de modifier le code de url_de_base() pour qu’en l’absence de ces deux variables $_SERVER[’HTTPS’] et $_SERVER["SCRIPT_URI"], la fonction aille regarder dans META si c’est du http ou du https qui y est renseigné (au lieu de mettre forcément du http) ? En effet, lorsque META commence par "https://" ça veut dire que le serveur gère le HTTPS, et donc s’il ne renseigne pas les variables HTTPS et SCRIPT_URI et bien dans le doute mieux vaut générer des url de base en "https://" plutôt qu’en "http://" car si cette url de base se retrouve mentionnée au sein d’un fichier html ou css, et que le fichier en question est demandé en HTTP, ce n’est pas grave s’il contient des ressources en HTTPS, alors que le contraire pose problème (ne pas mettre de ressources en HTTP au sein d’une page en HTTPS !)

• Anomalie #4189 (Nouveau) : extraire_multi mélange un /li /ul final avec le de langue ajouté...

  5 octobre 2018, par jluc -

  Quand la langue de la chaîne n’est pas la langue désirée,
  extraire_multi appelle code_echappement qui insère

  au début, ok,
  mais qui colle aussi un

  immédiatement à la fin.

  En général c’est OK, mais pas quand la dernière ligne du texte est le dernier item d’une énumération,
  car alors ce ajouté est pris comme partie prenante de cette dernière ligne par l’appel suivant à propre,
  et le HTML qui sort de ce |propre sera mal emboité car il finira par au lieu de

  Cf #4187

  Dans le cas où le texte se termine par une liste, il faut insérer \n\n pour s’assurer que le /div ajouté par code_echappement reste en dehors de la liste.

  Cf simulation avec https://zone.spip.net/trac/spip-zone/changeset/111853/spip-zone

  Et pour corriger, dans le corps de extraire_multi (https://core.spip.net/projects/spip/repository/entry/spip/ecrire/inc/filtres.php#L1595 ),
  il faut insérer 2 fins de lignes quand ça se termine par /ul,
  entre les 2 lignes suivantes :
  

  <span class="CodeRay">    <span class="local-variable">$mode</span> = <span class="predefined">preg_match</span>(<span class="string"><span class="delimiter">'</span><span class="content">,span><span class="delimiter">'</span></span> . _BALISES_BLOCS . <span class="string"><span class="delimiter">'</span><span class="content">)[>[:space:]],iS</span><span class="delimiter">'</span></span>, <span class="local-variable">$trad_propre</span>) ? <span class="string"><span class="delimiter">'</span><span class="content">div</span><span class="delimiter">'</span></span> : <span class="string"><span class="delimiter">'</span><span class="content">span</span><span class="delimiter">'</span></span>;
      <span class="local-variable">$trad</span> = code_echappement(<span class="local-variable">$trad</span>, <span class="string"><span class="delimiter">'</span><span class="content">multi</span><span class="delimiter">'</span></span>, <span class="predefined-constant">false</span>, <span class="local-variable">$mode</span>);
  </span></span>
  Télécharger

  Ce qui donne :
  

  <span class="CodeRay">    <span class="local-variable">$mode</span> = <span class="predefined">preg_match</span>(<span class="string"><span class="delimiter">'</span><span class="content">,span><span class="delimiter">'</span></span> . _BALISES_BLOCS . <span class="string"><span class="delimiter">'</span><span class="content">)[>[:space:]],iS</span><span class="delimiter">'</span></span>, <span class="local-variable">$trad_propre</span>) ? <span class="string"><span class="delimiter">'</span><span class="content">div</span><span class="delimiter">'</span></span> : <span class="string"><span class="delimiter">'</span><span class="content">span</span><span class="delimiter">'</span></span>;
      <span class="keyword">if</span> (<span class="local-variable">$mode</span>==<span class="string"><span class="delimiter">'</span><span class="content">div</span><span class="delimiter">'</span></span> <span class="keyword">and</span> (<span class="predefined">substr</span>(<span class="predefined">rtrim</span>(<span class="local-variable">$trad_propre</span>), -<span class="integer">5</span>)==<span class="string"><span class="delimiter">'</span><span class="content"></span><span class="delimiter">'</span></span>)
          <span class="local-variable">$trad</span> .= <span class="string"><span class="delimiter">"</span><span class="char">\n</span><span class="char">\n</span><span class="delimiter">"</span></span>;
      <span class="local-variable">$trad</span> = code_echappement(<span class="local-variable">$trad</span>, <span class="string"><span class="delimiter">'</span><span class="content">multi</span><span class="delimiter">'</span></span>, <span class="predefined-constant">false</span>, <span class="local-variable">$mode</span>);
  </span></span>
  Télécharger