Recherche avancée
Autres articles (43)
-
Other interesting software
13 avril 2011, parWe 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, parLes 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, parPour 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 NineCattoRulesI'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 :


'use client'

import React, { useEffect, useRef, useState } from 'react';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

const CanvasVideoRecorder = () => {
 const canvasRef = useRef(null);
 const videoChunksRef = useRef([]);
 const ffmpegRef = useRef(new FFmpeg({ log: true }));
 const [loaded, setLoaded] = useState(false);
 const [videoUrl, setVideoUrl] = useState(null);

 const load = async () => {
 await ffmpegRef.current.load({
 coreURL: '/js/ffmpeg-core.js',
 wasmURL: '/js/ffmpeg-core.wasm',
 });
 setLoaded(true);
 };

 useEffect(() => {
 const ctx = canvasRef.current.getContext('2d');
 function drawFrame(timestamp) {
 ctx.fillStyle = `rgb(${(Math.sin(timestamp / 500) * 128) + 128}, 0, 0)`;
 ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
 requestAnimationFrame(drawFrame);
 }
 requestAnimationFrame(drawFrame);
 }, []);

 const startRecording = async () => {
 const videoStream = canvasRef.current.captureStream(30);
 const videoRecorder = new MediaRecorder(videoStream, { mimeType: 'video/webm' });

 videoRecorder.ondataavailable = (event) => {
 if (event.data.size > 0) {
 videoChunksRef.current.push(event.data);
 }
 };

 videoRecorder.start();
 setTimeout(() => videoRecorder.stop(), 5000);

 videoRecorder.onstop = async () => {
 try {
 await ffmpegRef.current.writeFile('recorded.webm', await fetchFile(new Blob(videoChunksRef.current, { type: 'video/webm' })));

 await ffmpegRef.current.exec('-y', '-i', 'recorded.webm', '-an', '-c:v', 'copy', 'output_copy.webm');

 const data = await ffmpegRef.current.readFile('output_copy.webm');
 const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/webm' }));

 setVideoUrl(url);
 } catch (error) {
 console.error("Error during processing:", error);
 }
 };
 };

 return (
 <div>
 <canvas ref="{canvasRef}" width="640" height="480"></canvas>

 {loaded ? (
 <>

 <button>Start Recording</button>
 {videoUrl && <video controls="controls" src="{videoUrl}"></video>}
 >
 ) : (
 <button>Load FFmpeg</button>
 )}
 </div>
 );
};

export default CanvasVideoRecorder;


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


ErrnoError: FS error


This error occurs when I do this :


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


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

-
create a timelapse video using MediaRecorder API ( and ffmpeg ? )
24 août 2022, par The Blind HawkSummary


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.secondstreamelsewhere, and I need the settings to stay as they are for the other functionality.

On Chrome and Edge, I could just callgetUserMedia()again with different settings, and the issue would be solved, but on IOS callinggetUserMedia()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 usingffmpegbut 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 ofgetUserMedia()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);
 }


-
How to use Docker FFMPEG and HLS on my website [closed]
13 septembre 2023, par NormalUserI want to use a Docker container to convert an mkv video to an HLS "video". This is my command for it :


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


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


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


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


Syndiquer tout le site
