Recherche avancée

Médias (0)

Mot : - Tags -/metadatas

Aucun média correspondant à vos critères n’est disponible sur le site.

Autres articles (43)

  • Other interesting software

    13 avril 2011, par

    We don’t claim to be the only ones doing what we do ... and especially not to assert claims to be the best either ... What we do, we just try to do it well and getting better ...
    The following list represents softwares that tend to be more or less as MediaSPIP or that MediaSPIP tries more or less to do the same, whatever ...
    We don’t know them, we didn’t try them, but you can take a peek.
    Videopress
    Website : http://videopress.com/
    License : GNU/GPL v2
    Source code : (...)

  • Les formats acceptés

    28 janvier 2010, par

    Les commandes suivantes permettent d’avoir des informations sur les formats et codecs gérés par l’installation local de ffmpeg :
    ffmpeg -codecs ffmpeg -formats
    Les format videos acceptés en entrée
    Cette liste est non exhaustive, elle met en exergue les principaux formats utilisés : h264 : H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10 m4v : raw MPEG-4 video format flv : Flash Video (FLV) / Sorenson Spark / Sorenson H.263 Theora wmv :
    Les formats vidéos de sortie possibles
    Dans un premier temps on (...)

  • Ajouter notes et légendes aux images

    7 février 2011, par

    Pour pouvoir ajouter notes et légendes aux images, la première étape est d’installer le plugin "Légendes".
    Une fois le plugin activé, vous pouvez le configurer dans l’espace de configuration afin de modifier les droits de création / modification et de suppression des notes. Par défaut seuls les administrateurs du site peuvent ajouter des notes aux images.
    Modification lors de l’ajout d’un média
    Lors de l’ajout d’un média de type "image" un nouveau bouton apparait au dessus de la prévisualisation (...)

Sur d’autres sites (7141)

  • FFmpeg Wasm, error while creating video from canvas

    12 octobre 2023, par NineCattoRules

    I'm using ffmpeg.wasm in my Next.JS app.

    


    Here my specs :

    


    "@ffmpeg/ffmpeg": "^0.12.5",
"@ffmpeg/util": "^0.12.0",
"next": "^13.0.6",
"react": "^18.2.0",


    


    I want to simply record a 5s video from a canvas, so I tried :

    


    &#x27;use client&#x27;&#xA;&#xA;import React, { useEffect, useRef, useState } from &#x27;react&#x27;;&#xA;import { FFmpeg } from &#x27;@ffmpeg/ffmpeg&#x27;;&#xA;import { fetchFile } from &#x27;@ffmpeg/util&#x27;;&#xA;&#xA;const CanvasVideoRecorder = () => {&#xA;    const canvasRef = useRef(null);&#xA;    const videoChunksRef = useRef([]);&#xA;    const ffmpegRef = useRef(new FFmpeg({ log: true }));&#xA;    const [loaded, setLoaded] = useState(false);&#xA;    const [videoUrl, setVideoUrl] = useState(null);&#xA;&#xA;    const load = async () => {&#xA;        await ffmpegRef.current.load({&#xA;            coreURL: &#x27;/js/ffmpeg-core.js&#x27;,&#xA;            wasmURL: &#x27;/js/ffmpeg-core.wasm&#x27;,&#xA;        });&#xA;        setLoaded(true);&#xA;    };&#xA;&#xA;    useEffect(() => {&#xA;        const ctx = canvasRef.current.getContext(&#x27;2d&#x27;);&#xA;        function drawFrame(timestamp) {&#xA;            ctx.fillStyle = `rgb(${(Math.sin(timestamp / 500) * 128) &#x2B; 128}, 0, 0)`;&#xA;            ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);&#xA;            requestAnimationFrame(drawFrame);&#xA;        }&#xA;        requestAnimationFrame(drawFrame);&#xA;    }, []);&#xA;&#xA;    const startRecording = async () => {&#xA;        const videoStream = canvasRef.current.captureStream(30);&#xA;        const videoRecorder = new MediaRecorder(videoStream, { mimeType: &#x27;video/webm&#x27; });&#xA;&#xA;        videoRecorder.ondataavailable = (event) => {&#xA;            if (event.data.size > 0) {&#xA;                videoChunksRef.current.push(event.data);&#xA;            }&#xA;        };&#xA;&#xA;        videoRecorder.start();&#xA;        setTimeout(() => videoRecorder.stop(), 5000);&#xA;&#xA;        videoRecorder.onstop = async () => {&#xA;            try {&#xA;                await ffmpegRef.current.writeFile(&#x27;recorded.webm&#x27;, await fetchFile(new Blob(videoChunksRef.current, { type: &#x27;video/webm&#x27; })));&#xA;&#xA;                await ffmpegRef.current.exec(&#x27;-y&#x27;, &#x27;-i&#x27;, &#x27;recorded.webm&#x27;, &#x27;-an&#x27;, &#x27;-c:v&#x27;, &#x27;copy&#x27;, &#x27;output_copy.webm&#x27;);&#xA;&#xA;                const data = await ffmpegRef.current.readFile(&#x27;output_copy.webm&#x27;);&#xA;                const url = URL.createObjectURL(new Blob([data.buffer], { type: &#x27;video/webm&#x27; }));&#xA;&#xA;                setVideoUrl(url);&#xA;            } catch (error) {&#xA;                console.error("Error during processing:", error);&#xA;            }&#xA;        };&#xA;    };&#xA;&#xA;    return (&#xA;        <div>&#xA;            <canvas ref="{canvasRef}" width="640" height="480"></canvas>&#xA;&#xA;            {loaded ? (&#xA;                &lt;>&#xA;&#xA;                    <button>Start Recording</button>&#xA;                    {videoUrl &amp;&amp; <video controls="controls" src="{videoUrl}"></video>}&#xA;                >&#xA;            ) : (&#xA;                <button>Load FFmpeg</button>&#xA;            )}&#xA;        </div>&#xA;    );&#xA;};&#xA;&#xA;export default CanvasVideoRecorder;&#xA;

    &#xA;

    I don't know why but it catch an error :

    &#xA;

    ErrnoError: FS error&#xA;

    &#xA;

    This error occurs when I do this :

    &#xA;

    await ffmpegRef.current.exec(&#x27;-y&#x27;, &#x27;-i&#x27;, &#x27;recorded.webm&#x27;, &#x27;-an&#x27;, &#x27;-c:v&#x27;, &#x27;copy&#x27;, &#x27;output_copy.webm&#x27;);&#xA;const data = await ffmpegRef.current.readFile(&#x27;output_copy.webm&#x27;);&#xA;

    &#xA;

    The recorded.webm file is written correctly and I can read it, ffmpegRef.current is well defined, so what's wrong with my logic, why the exec command doesn't work ?

    &#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;

  • How to use Docker FFMPEG and HLS on my website [closed]

    13 septembre 2023, par NormalUser

    I want to use a Docker container to convert an mkv video to an HLS "video". This is my command for it :

    &#xA;

    docker run --rm \&#xA;  -v /mnt:/config \&#xA;  linuxserver/ffmpeg \&#xA;  -i "/config/test.mkv" \&#xA;  -c:v copy \&#xA;  -c:a copy \&#xA;  -sn \&#xA;  -f hls \&#xA;  -hls_list_size 0 \&#xA;  /config/hls/output.m3u8&#xA;

    &#xA;

    when i run this command everything is created correctly, with VLC i can use the m3u8 file only Video.js says "The media could not be loaded, either because the server or network failed or because the format is not supported". I have also set the audio codec and video codec to AAC and 264 for testing but it didn't work any better.&#xA;Ich nutze Video.js und wenn ich auf einem anderen Rechner wo ich kein docker nutzen muss geht m3u8 im web aber nicht bei vlc mit diesem befehl.

    &#xA;

    ffmpeg -i input.mkv -c:v h264 -master_pl_name master.m3u8 -hls_time 10 -hls_list_size 0 -f hls -map 0 -c:a aac -b:a 128k -strict -2 -vf "subtitles=input.mkv" -map a -map v -map s -var_stream_map "a:0,v:0,s:0 a:1,v:1 s:1" test/stream_%v.m3u8&#xA;

    &#xA;

    auf die verzeichnisse braucht ihr kein rücksicht nehmen die habe ich verändert

    &#xA;