Recherche avancée
Autres articles (97)
-
Les autorisations surchargées par les plugins
27 avril 2010, parMediaspip core
autoriser_auteur_modifier() afin que les visiteurs soient capables de modifier leurs informations sur la page d’auteurs -
Participer à sa documentation
10 avril 2011La documentation est un des travaux les plus importants et les plus contraignants lors de la réalisation d’un outil technique.
Tout apport extérieur à ce sujet est primordial : la critique de l’existant ; la participation à la rédaction d’articles orientés : utilisateur (administrateur de MediaSPIP ou simplement producteur de contenu) ; développeur ; la création de screencasts d’explication ; la traduction de la documentation dans une nouvelle langue ;
Pour ce faire, vous pouvez vous inscrire sur (...) -
Contribute to a better visual interface
13 avril 2011MediaSPIP is based on a system of themes and templates. Templates define the placement of information on the page, and can be adapted to a wide range of uses. Themes define the overall graphic appearance of the site.
Anyone can submit a new graphic theme or template and make it available to the MediaSPIP community.
Sur d’autres sites (6603)
-
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


-
pixfmt : add P010 pixel format
8 décembre 2015, par Hendrik Leppkespixfmt : add P010 pixel format
P010 is the 10-bit variant of NV12 (planar luma, packed chroma), using two
bytes per component to store 10-bit data plus 6-bit zeroes in the LSBs.Signed-off-by : Anton Khirnov <anton@khirnov.net>
-
Can't use latest FFMpeg-PHP because my newly installed FFProbe does not support loglevel and quiet
20 septembre 2016, par Richard Mcfriend OluwamuyiwaPlease I just installed ffmpeg and ffmpeg-php using brew install on my OS X 10.10 but i can’t use the FFMpeg-PHP because my FFProbe does not support
'-loglevel'and'quiet'options.I get this error from
Fatal error: Uncaught Symfony\Component\Process\Exception\RuntimeException: The process has been signaled with signal "5"I just installed it tonight using
brew install ffmpeg ....My composer.son is
{
"require": {
"php-ffmpeg/php-ffmpeg": "~0.5"
}
}And I just installed the Composer too using the instruction on their website. And when I run composer, I get version 1.2.1 which is the latest.
I am trying to run the FFMpeg demo code :
require __DIR__ . '/vendor/autoload.php';
$ffmpeg = FFMpeg\FFMpeg::create(array(
'ffmpeg.binaries' => '/usr/local/bin/ffmpeg',
'ffprobe.binaries' => '/usr/local/bin/ffprobe',
'timeout' => 3600, // The timeout for the underlying process
'ffmpeg.threads' => 12, // The number of threads that FFMpeg should use
));
$video = $ffmpeg->open('video.mp4');
$video
->filters()
->resize(new FFMpeg\Coordinate\Dimension(320, 240))
->synchronize();
$video
->frame(FFMPeg\Coordinate\TimeCode::fromSeconde(10))
->save('frame.jpg');
$video
->save(new FFMpeg\Format\Video\X265(), 'ff-video-x264.mpg')
->save(new FFMpeg\Format\Video\WMV(), 'ff-video-wmv.wmv')
->save(new FFMpeg\Format\Video\WebM(), 'ff-video-webm.webm');Any help is appreciated. I really need it working for a project.
Syndiquer tout le site
