Recherche avancée

Médias (1)

Mot : - Tags -/illustrator

Autres articles (67)

  • Amélioration de la version de base

    13 septembre 2013

    Jolie sélection multiple
    Le plugin Chosen permet d’améliorer l’ergonomie des champs de sélection multiple. Voir les deux images suivantes pour comparer.
    Il suffit pour cela d’activer le plugin Chosen (Configuration générale du site > Gestion des plugins), puis de configurer le plugin (Les squelettes > Chosen) en activant l’utilisation de Chosen dans le site public et en spécifiant les éléments de formulaires à améliorer, par exemple select[multiple] pour les listes à sélection multiple (...)

  • Menus personnalisés

    14 novembre 2010, par

    MediaSPIP utilise le plugin Menus pour gérer plusieurs menus configurables pour la navigation.
    Cela permet de laisser aux administrateurs de canaux la possibilité de configurer finement ces menus.
    Menus créés à l’initialisation du site
    Par défaut trois menus sont créés automatiquement à l’initialisation du site : Le menu principal ; Identifiant : barrenav ; Ce menu s’insère en général en haut de la page après le bloc d’entête, son identifiant le rend compatible avec les squelettes basés sur Zpip ; (...)

  • Le plugin : Gestion de la mutualisation

    2 mars 2010, par

    Le plugin de Gestion de mutualisation permet de gérer les différents canaux de mediaspip depuis un site maître. Il a pour but de fournir une solution pure SPIP afin de remplacer cette ancienne solution.
    Installation basique
    On installe les fichiers de SPIP sur le serveur.
    On ajoute ensuite le plugin "mutualisation" à la racine du site comme décrit ici.
    On customise le fichier mes_options.php central comme on le souhaite. Voilà pour l’exemple celui de la plateforme mediaspip.net :
    < ?php (...)

Sur d’autres sites (9953)

  • Unrecognized option 'crf'

    6 septembre 2022, par Arjit Kaushal

    I am trying compress video using ffmpeg but i am facing errors in the command.&#xA;Although it runs perfectly fine on my linux terminal.( ffmpeg -i input.avi -vcodec libx264 -crf 24 output.avi).

    &#xA;

    my code :

    &#xA;

    void _compress() {&#xA;        if (_videoModel == null) return;&#xA;        String inputPath = _videoModel!.originalCachePath;&#xA;        String outputPath = _videoModel!.editCachePath;&#xA;    &#xA;        FFmpegKit.execute("-i $inputPath -vcodec libx264 -crf 24 -y $outputPath")&#xA;            .then((session) async {&#xA;          final returnCode = await session.getReturnCode();&#xA;          if (ReturnCode.isSuccess(returnCode)) {&#xA;            Navigator.pushNamed(context, PreviewPage.routeName,&#xA;                arguments: _videoModel);&#xA;          } else if (ReturnCode.isCancel(returnCode)) {&#xA;            print("compress cancel");&#xA;          } else {&#xA;            print("compress error : $returnCode");&#xA;            FFmpegKitConfig.enableLogCallback((log){&#xA;              final message = log.getMessage();&#xA;              print(message);&#xA;            });&#xA;    &#xA;    &#xA;          }&#xA;        });&#xA;      }&#xA;

    &#xA;

    I am facing the following errors :&#xA;Unrecognized option 'crf',&#xA;I/flutter (31056) : Error splitting the argument list,&#xA;Option not found.

    &#xA;

  • Video streaming to YouTube using JavaScript and Java

    28 septembre 2020, par user1597121

    I'm trying to stream live video from a user's browser to YouTube Live. I already have the following working :

    &#xA;

      &#xA;
    1. Capture video from the webcam using navigator.mediaDevices.getUserMedia
    2. &#xA;

    3. Send video data to the server via WebSocket by periodically invoking this function :
    4. &#xA;

    &#xA;

    function getFrame(video)&#xA;{&#xA;    var canvas = document.createElement(&#x27;canvas&#x27;);&#xA;    canvas.width = video.videoWidth;&#xA;    canvas.height = video.videoHeight;&#xA;    canvas.getContext(&#x27;2d&#x27;).drawImage(video, 0, 0);&#xA;&#xA;    return canvas.toDataURL(&#x27;image/png&#x27;, 1);&#xA;}&#xA;

    &#xA;

      &#xA;
    1. Creating a live broadcast and stream on YouTube via their API and receiving the RTMP info where they expect the video stream to be sent.
    2. &#xA;

    &#xA;

    This is where I seem to be stuck. I'm not sure how to send the video data from my Java server to YouTube's RTMP endpoint. I've looked into using Red5 or ffmpeg, but haven't been able to find an example where the data is continually being sent via WebSocket. Rather, there's always some "stream" that is being redirected to YouTube, coming in on a dedicated port, or perhaps from a pre-recorded video file.

    &#xA;

    I have very limited knowledge of how video streaming works, so that's presumably making things more difficult than they should be. I'd really appreciate some help with getting this figured out. Thank you !

    &#xA;

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

    24 août 2022, par The Blind Hawk

    Summary

    &#xA;

    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).
    &#xA;My objective is to record around 25 minutes and download a timelapse version of the recording.
    &#xA;final product requirements :

    &#xA;

    speed: 3fps&#xA;length: ~25s&#xA;&#xA;(I need to record one frame every 20 seconds for 25 mins)&#xA;

    &#xA;

    this.secondStream settings :

    &#xA;

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

    &#xA;

    My code for IOS so far :

    &#xA;

            startIOSVideoRecording: function() {&#xA;            console.log("setting up recorder");&#xA;            var self = this;&#xA;            this.data = [];&#xA;&#xA;            if (MediaRecorder.isTypeSupported(&#x27;video/mp4&#x27;)) {&#xA;                // IOS does not support webm, so I will be using mp4&#xA;                var options = {mimeType: &#x27;video/mp4&#x27;, videoBitsPerSecond : 1000000};&#xA;            } else {&#xA;                console.log("ERROR: mp4 is not supported, trying to default to webm");&#xA;                var options = {mimeType: &#x27;video/webm&#x27;};&#xA;            }&#xA;            console.log("options settings:");&#xA;            console.log(options);&#xA;&#xA;            this.recorder = new MediaRecorder(this.secondStream, options);&#xA;&#xA;            this.recorder.ondataavailable = function(evt) {&#xA;                if (evt.data &amp;&amp; evt.data.size > 0) {&#xA;                    self.data.push(evt.data);&#xA;                    console.log(&#x27;chunk size: &#x27; &#x2B; evt.data.size);&#xA;                }&#xA;            }&#xA;&#xA;            this.recorder.onstop = function(evt) {&#xA;                console.log(&#x27;recorder stopping&#x27;);&#xA;                var blob = new Blob(self.data, {type: "video/mp4"});&#xA;                self.download(blob, "mp4");&#xA;                self.sendMail(videoBlob);&#xA;            }&#xA;&#xA;            console.log("finished setup, starting")&#xA;            this.recorder.start(1200);&#xA;&#xA;            function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}&#xA;&#xA;            async function looper() {&#xA;                // I am trying to pick one second every 20 more or less&#xA;                await sleep(500);&#xA;                self.recorder.pause();&#xA;                await sleep(18000);&#xA;                self.recorder.resume();&#xA;                looper();&#xA;            }&#xA;            looper();&#xA;        },&#xA;

    &#xA;

    Issues

    &#xA;

    Only one call to getUserMedia()

    &#xA;

    I am already using this.secondstream elsewhere, and I need the settings to stay as they are for the other functionality.
    &#xA;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.
    &#xA;The settings that I was planning to use (works for Chrome and Edge) :

    &#xA;

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

    &#xA;

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

    &#xA;

    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.
    &#xA;I am thinking of using ffmpeg but cannot find any documentation to make it interact with the blob before the download.
    &#xA;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.

    &#xA;

    MediaRecorder pause and resume are not ideal

    &#xA;

    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.
    &#xA;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.
    &#xA;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.
    &#xA;Therefore I tried relying on pausing and resuming the MediaRecorder, but this brings forth another two issues :
    &#xA;I am currently saving 1 second every 20 seconds and not 1 frame every 20 seconds, and I cannot find any workarounds.
    &#xA;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).

    &#xA;

    My working code for other platforms

    &#xA;

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

    &#xA;

    &#xA;        setupVideoRecording: function() {&#xA;            let video  = { &#xA;                width: 360, height: 240, facingMode: "user", &#xA;                frameRate: { min:0, ideal: 0.05, max:0.1 } &#xA;            };&#xA;            navigator.mediaDevices.getUserMedia({&#xA;                audio: false,&#xA;                video: video,&#xA;            }).then((stream) => {&#xA;                // this is a video element&#xA;                const recVideo = document.getElementById(&#x27;self-recorder&#x27;);&#xA;                recVideo.muted = true;&#xA;                recVideo.autoplay = true;&#xA;                recVideo.srcObject = stream;&#xA;                recVideo.play();&#xA;            });&#xA;        },&#xA;&#xA;        startVideoRecording: function() {&#xA;            console.log("setting up recorder");&#xA;            var self = this;&#xA;            this.data = [];&#xA;&#xA;            var video = document.getElementById(&#x27;self-recorder&#x27;);&#xA;&#xA;            if (MediaRecorder.isTypeSupported(&#x27;video/webm; codecs=vp9&#x27;)) {&#xA;                var options = {mimeType: &#x27;video/webm; codecs=vp9&#x27;};&#xA;            } else  if (MediaRecorder.isTypeSupported(&#x27;video/webm&#x27;)) {&#xA;                var options = {mimeType: &#x27;video/webm&#x27;};&#xA;            }&#xA;            console.log("options settings:");&#xA;            console.log(options);&#xA;&#xA;            this.recorder = new MediaRecorder(video.captureStream(), options);&#xA;&#xA;            this.recorder.ondataavailable = function(evt) {&#xA;                self.data.push(evt.data);&#xA;                console.log(&#x27;chunk size: &#x27; &#x2B; evt.data.size);&#xA;            }&#xA;&#xA;            this.recorder.onstop = function(evt) {&#xA;                console.log(&#x27;recorder stopping&#x27;);&#xA;                timelapse(self.data, 3, function(blob) {&#xA;                    self.download(blob, "webm");&#xA;                });&#xA;            }&#xA;&#xA;            console.log("finished setup, starting");&#xA;            this.recorder.start(40000);&#xA;        }&#xA;

    &#xA;