Recherche avancée
Autres articles (42)
-
Gestion générale des documents
13 mai 2011, parMédiaSPIP ne modifie jamais le document original mis en ligne.
Pour chaque document mis en ligne il effectue deux opérations successives : la création d’une version supplémentaire qui peut être facilement consultée en ligne tout en laissant l’original téléchargeable dans le cas où le document original ne peut être lu dans un navigateur Internet ; la récupération des métadonnées du document original pour illustrer textuellement le fichier ;
Les tableaux ci-dessous expliquent ce que peut faire MédiaSPIP (...) -
Des sites réalisés avec MediaSPIP
2 mai 2011, parCette page présente quelques-uns des sites fonctionnant sous MediaSPIP.
Vous pouvez bien entendu ajouter le votre grâce au formulaire en bas de page. -
HTML5 audio and video support
13 avril 2011, parMediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
For older browsers the Flowplayer flash fallback is used.
MediaSPIP allows for media playback on major mobile platforms with the above (...)
Sur d’autres sites (6218)
-
screen recording and video encoding with ffmpeg
2 septembre 2016, par Alexander M.1.we need to record screenshots into video with 2-3 fps. Quality - the minimum possible to make text on the screen readable, 256 colors. It is important to reduce the output video file size as much as possible.
2.we’ve made a lot of tests, and currently the most suitable way is to make screenshots every 300-500msec, save them in PNG, then run ffmpeg to encode to H.267 with these params :
ffmpeg -f image2 -i "C:\png5min\image%04d.png" -y -an -vcodec libx264 -preset veryfast -crf 30 "C:\output.mp4"3.is it the best way to get minimum output size with 2-3fps screencast ?
4.the output file plays very quickly, codec by default concerns that images represent 25fps. But they are 2fps actually.
Ok, but if we try to decrease the output frame rate, output file size increases for about twice !! (from 3mb to 6mb for a 3m:26s video). And if we set the output frame rate as 2 - video does not play frames at all or plays just 2 frames for 3mins... :-r 2 -f image2 -i "C:\png5min\image%04d.png" -y -an -vcodec libx264 -preset veryfast -crf 30 -r 2 "C:\image5min_2fps_crf30_test__R2-2.mp4"so, how can we just add some latency after each frame without increasing the output file size ???
-
YUV8_420P - AVFrame conversion hazard (only Y plan)
4 mai 2017, par FlowI’m working on a FFMPEG application. The goal is to convert a picture (YUV input format) to an AVFrame to be able to process it (by applying a specific filter) and then realize the invert conversion to redirect it to the output.
Although some filters as drawgrid or noise are perfectly working, filters which apply some "space transformation" (as a "crop" or a "hflip") seem to affect only over the Y component. The colors of the output pictures aren’t filtered which leads to an unsatisfying result.
I’m asking myself why I have such a result but I didn’t reach to find the problem origin.
Here is the part of cod which convert the YUV picture to an AVFrame :
unsigned int i = 0;
int number_common_channels = MIN(IMAGEFORMAT_COMPONENTS, AV_NUM_DATA_POINTERS);
// Transfer the image informations (width, height, pitch and data)
if ((av_im->width = yuv_im->width[0]) <= 0)
{
cu_printf(ERROR, "Width of destination picture null or negative");
return -1;
}
if((av_im->height = yuv_im->height[0]) <= 0)
{
cu_printf(ERROR, "Height of destination picture null or negative");
return -1;
}
for (i=0; i < number_common_channels; i++)
{
av_im->linesize[i] = yuv_im->pitch[i];
av_im->data[i] = yuv_im->data[i];
}If necessary, I can transmit you other parts of the cod where the problem could be. Thanks for your cooperation.
Flow.
EDIT 1 : After some researches, it would be possible the problem came from my function which initializes the filter graph. Actually, I used the FFMPEG example given on their website to make it and I deleted the options to the pixel format list because I thought it was useless. It’s possible this function and more precisely the av_opt_set_int_list could be the key, but I don’t reach to find a good example using it. Also, another function, av_opt_set_pixel_fmt was created in the last FFMPEG versions and this could be well to try using it, but I don’t know how to do. So please if someone has a good example with that, I’ll took it with hapiness.
EDIT 2 : The problem came from the way I copied my data back after the filter was applied. Closed.
-
FFmpeg-wasm unpredictable errors with next js
21 juillet, par hjtomiI use ffmpeg-wasm in next-js.


Whenever I execute an ffmpeg command it has a chance that it throws a runtime error "memory access out of bounds". In this case I created a page that has an file selection html element and a button that converts each image to
.jpegformat with the following command :

await ffmpeg.exec(['-i', originalFileName, '-q:v', '5', convertedFileName]);


I have tried the same process with different images, extensions, sizes, restarting the application, restarting the computer, different browsers, mobile/desktop and sometimes it works, sometimes it doesn't. I feel like there is something that is out of my control.


Maybe something that has to do with webassembly itself.


In each runtime it has a 50-50 chance that ffmpeg will work or not.


I have tried changing the target extension to different types.


I have tried changing the ffmpeg command entirely to make it do something else.


Writing the files to the virtual file system works as expected.


I am on windows 10 using next-js version 15.3.5 and ffmpeg version 0.12.10


'use client';

import * as React from 'react';
import { FFmpeg } from '@ffmpeg/ffmpeg'; // Import FFmpeg
import { fetchFile, toBlobURL } from '@ffmpeg/util'; // Import fetchFile

export default function Page() {
 const [files, setFiles] = React.useState([]);
 const [error, setError] = React.useState<string null="null">(null);

 // FFmpeg related states and ref
 const ffmpegRef = React.useRef<ffmpeg null="null">(null);
 const [ffmpegLoaded, setFFmpegLoaded] = React.useState(false);
 const [isConvertingImages, setIsConvertingImages] = React.useState(false);
 const [videoGenerationProgress, setVideoGenerationProgress] = React.useState<string>('');

 // --- Load FFmpeg on component mount ---
 React.useEffect(() => {
 const loadFFmpeg = async () => {
 const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.10/dist/umd";
 try {
 const ffmpeg = new FFmpeg();
 // Set up logging for FFmpeg progress
 ffmpeg.on('log', ({ message }) => {
 if (message.includes('frame=')) {
 setVideoGenerationProgress(message);
 }
 });
 await ffmpeg.load({
 coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
 wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
 });
 ffmpegRef.current = ffmpeg;
 setFFmpegLoaded(true);
 console.log('FFmpeg loaded successfully!');
 } catch (err) {
 console.error('Failed to load FFmpeg:', err);
 setError('Failed to load video processing tools.');
 }
 };

 loadFFmpeg();
 }, []);

 // --- Internal file selection logic ---
 const handleFileChange = (e: React.ChangeEvent<htmlinputelement>) => {
 if (e.target.files && e.target.files.length > 0) {
 const newFiles = Array.from(e.target.files).filter(file => file.type.startsWith('image/')); // Only accept images
 setFiles(newFiles);
 setError(null);
 }
 };

 // --- Handle Image conversion ---
 const handleConvertImages = async () => {
 if (!ffmpegLoaded || !ffmpegRef.current) {
 setError('FFmpeg is not loaded yet. Please wait.');
 return;
 }
 if (files.length === 0) {
 setError('Please select images first to generate a video.');
 return;
 }

 setIsConvertingImages(true);
 setError(null);
 setVideoGenerationProgress('');

 try {
 const ffmpeg = ffmpegRef.current;
 const targetExtension = 'jpeg'; // <--- Define your target extension here (e.g., 'png', 'webp')
 const convertedImageNames: string[] = [];

 // Convert all uploaded images to the target format
 for (let i = 0; i < files.length; i++) {
 const file = files[i];
 // Give the original file a unique name in FFmpeg's VFS
 const originalFileName = `original_image_${String(i).padStart(3, '0')}.${file.name.split('.').pop()}`;
 // Define the output filename with the target extension
 const convertedFileName = `converted_image_${String(i).padStart(3, '0')}.${targetExtension}`;
 convertedImageNames.push(convertedFileName);

 // Write the original file data to FFmpeg's virtual file system
 await ffmpeg.writeFile(`${originalFileName}`, await fetchFile(file));
 console.log(`Wrote original ${originalFileName} to FFmpeg FS`);

 setVideoGenerationProgress(`Converting ${file.name} to ${targetExtension.toUpperCase()}...`);

 await ffmpeg.exec(['-i', originalFileName, '-q:v', '5', convertedFileName]); // <------

 console.log(`Converted ${originalFileName} to ${convertedFileName}`);

 // Delete the original file from VFS to free up memory
 await ffmpeg.deleteFile(originalFileName);
 console.log(`Deleted original ${originalFileName} from FFmpeg FS`);
 }

 setFiles([]);

 setVideoGenerationProgress(`All images converted to ${targetExtension.toUpperCase()}.`);
 } catch (err) {
 console.error('Error converting images:', err);
 setError(`Failed to convert images: ${err instanceof Error ? err.message : String(err)}`);
 } finally {
 setIsConvertingImages(false);
 }
 };

 return (
 <div classname="min-h-screen bg-gray-100 flex items-center justify-center p-4 relative overflow-hidden">
 <div classname="bg-white p-8 rounded-lg shadow-xl w-full max-w-md z-10 relative"> {/* Ensure content is above overlay */}
 <h2 classname="text-2xl font-semibold text-gray-800 mb-6 text-center">Select your images</h2>

 {/* Regular File Input Area (still needed for click-to-select) */}
 > document.getElementById('file-input')?.click()}
 >
 
 
 <svg classname="mx-auto h-12 w-12 text-gray-400" fill="none" viewbox="0 0 24 24" stroke="currentColor">
 <path strokelinecap="round" strokelinejoin="round" strokewidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
 </svg>
 <p classname="mt-2 text-sm text-gray-600">
 <span classname="font-medium text-blue-600">Click to select</span>
 </p>
 <p classname="text-xs text-gray-500">Supports multiple formats</p>
 </div>

 {/* Selected Files Display */}
 {files.length > 0 && (
 <div data-testid="selected-files-display" classname="selected-files-display mt-4 p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-800">
 <p classname="font-semibold mb-2">Selected Files ({files.length}):</p>
 <ul classname="max-h-40 overflow-y-auto">
 {files.map((file) => (
 <li key="{file.name}" classname="flex items-center justify-between py-1">
 <span>{file.name}</span>
 </li>
 ))}
 </ul>
 </div>
 )}

 {/* Error Message */}
 {error && (
 <div classname="mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-800">
 {error}
 </div>
 )}

 {/* Image conversion Progress/Status */}
 {isConvertingImages && (
 <div classname="mt-4 p-3 bg-purple-50 border border-purple-200 rounded-md text-sm text-purple-800 text-center">
 <p classname="font-semibold">Converting images</p>
 <p classname="text-xs mt-1">{videoGenerationProgress}</p>
 </div>
 )}
 {!ffmpegLoaded && (
 <div classname="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md text-sm text-yellow-800 text-center">
 Loading video tools (FFmpeg)... Please wait.
 </div>
 )}

 {/* Convert images button */}
 
 Convert images
 
 </div>
 
 );
}
</htmlinputelement></string></ffmpeg></string>

The next js page above


Syndiquer tout le site
