Recherche avancée
Médias (1)
-
Rennes Emotion Map 2010-11
19 octobre 2011, par
Mis à jour : Juillet 2013
Langue : français
Type : Texte
Autres articles (58)
-
Personnaliser en ajoutant son logo, sa bannière ou son image de fond
5 septembre 2013, parCertains thèmes prennent en compte trois éléments de personnalisation : l’ajout d’un logo ; l’ajout d’une bannière l’ajout d’une image de fond ;
-
Publier sur MédiaSpip
13 juin 2013Puis-je poster des contenus à partir d’une tablette Ipad ?
Oui, si votre Médiaspip installé est à la version 0.2 ou supérieure. Contacter au besoin l’administrateur de votre MédiaSpip pour le savoir -
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 (7772)
-
Is there a way to improve video fetching speed when using FFmpeg for trimming ?
14 janvier 2024, par OtisI have a React component that uses the @ffmpeg/ffmpeg library to trim videos. The trimming process involves fetching a video file from a URL and then using FFmpeg to perform the actual trim. I've noticed that when I execute the trimVideo function on a new URL for the first time, it takes a considerable amount of time to fetch the file. However, on subsequent executions with the same URL, it executes in less than 5 seconds.


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


export default function TrimVideo() {
 const [loaded, setLoaded] = useState(false);
 const [isLoading, setIsLoading] = useState(false);
 const [trimmedBlobUrl, setTrimmedBlobUrl] = useState('');
 const [progress, setProgress] = useState<any>(0);
 const ffmpegRef = useRef<any>(new FFmpeg());
 const videoRef = useRef<any>(null);
 const messageRef = useRef<any>(null);

 const [exporting, setExporting] = useState(false);

 const onlineVideoUrl =
 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

 const loadFFmpeg = async () => {
 setIsLoading(true);

 const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd';
 const ffmpeg = ffmpegRef.current;

 ffmpeg.on('log', ({ message }: any) => {
 if (messageRef.current) messageRef.current.innerHTML = message;
 });

 // Load FFmpeg core and wasm files
 await ffmpeg.load({
 coreURL: await toBlobURL(
 `${baseURL}/ffmpeg-core.js`,
 'text/javascript',
 ),
 wasmURL: await toBlobURL(
 `${baseURL}/ffmpeg-core.wasm`,
 'application/wasm',
 ),
 });

 setLoaded(true);
 setIsLoading(false);
 };

 useEffect(() => {
 loadFFmpeg();
 }, []);

 const trimVideo = async () => {
 const ffmpeg = ffmpegRef.current;
 setExporting(true);
 setProgress(0);

 const trimStart = 1;
 const trimEnd = 40;
 const trimmedVideo = trimEnd - trimStart;


 try {
 console.log('Fetching Video...');
 await ffmpeg.writeFile(
 'myFile.mp4',
 await fetchFile(onlineVideoUrl),
 );
 console.log('Executing FFMPEG...');
 await ffmpeg.exec([
 '-ss',
 `${trimStart}`,
 '-accurate_seek',
 '-i',
 'myFile.mp4',
 '-to',
 `${trimmedVideo}`,
 '-codec',
 'copy',
 'output.mp4',
 ]);

 const data: any = await ffmpeg?.readFile('output.mp4');
 const url = URL.createObjectURL(
 new Blob([data.buffer], { type: 'video/mp4' }),
 );
 setTrimmedBlobUrl(url);
 } catch (error) {
 console.log(error);
 } finally {
 setProgress(0);
 setExporting(false);
 }
 };


 return loaded ? (
 <div>
 {trimmedBlobUrl && (
 <video ref="{videoRef}" controls="controls" src="{trimmedBlobUrl}"></video>
 )}
 <br />

 <button>> trimVideo()}>Trim Video</button>
 <h3>Progress: {progress}</h3>
 <p ref="{messageRef}"></p>
 </div>
 ) : (
 <p>Loading FFmpeg...</p>
 );
}
</any></any></any></any>

Is there a way to improve the fetching of the video to be consistently fast across all executions ?


-
Install gstreamer on EC2 Amazon Linux AMI ?
6 décembre 2015, par vy32I’m trying to install QT5.5 on Amazon EC2 Linux, which apparently requires that I install some kind of multimedia support. It looks like that comes from gstreamer.
yum search gstreamerturns up :[ec2-user@ip-172-30-1-58 ~]$ yum search gstreamer
Loaded plugins: priorities, update-motd, upgrade-helper
23 packages excluded due to repository priority protections
============================================== N/S matched: gstreamer ==============================================
gstreamer-ffmpeg.x86_64 : GStreamer FFmpeg-based plug-ins
gstreamer-ffmpeg-debuginfo.x86_64 : Debug information for package gstreamer-ffmpeg
gstreamer-plugins-bad.x86_64 : GStreamer streaming media framework "bad" plug-ins
gstreamer-plugins-bad-debuginfo.x86_64 : Debug information for package gstreamer-plugins-bad
gstreamer-plugins-bad-nonfree.x86_64 : Non Free GStreamer streaming media framework "bad" plug-ins
gstreamer-plugins-bad-nonfree-debuginfo.x86_64 : Debug information for package gstreamer-plugins-bad-nonfree
gstreamer-plugins-ugly.x86_64 : GStreamer streaming media framework "ugly" plug-ins
gstreamer-plugins-ugly-debuginfo.x86_64 : Debug information for package gstreamer-plugins-ugly
gstreamer-plugins-ugly-devel-docs.noarch : Development documentation for the GStreamer "ugly" plug-ins
gstreamer1-libav.x86_64 : GStreamer 1.0 libav-based plug-ins
gstreamer1-libav-debuginfo.x86_64 : Debug information for package gstreamer1-libav
gstreamer1-plugins-bad-freeworld.x86_64 : GStreamer 1.0 streaming media framework "bad" plug-ins
gstreamer1-plugins-bad-freeworld-debuginfo.x86_64 : Debug information for package gstreamer1-plugins-bad-freeworld
gstreamer1-plugins-ugly.x86_64 : GStreamer 1.0 streaming media framework "ugly" plug-ins
gstreamer1-plugins-ugly-debuginfo.x86_64 : Debug information for package gstreamer1-plugins-ugly
gstreamer1-plugins-ugly-devel-docs.noarch : Development documentation for the GStreamer "ugly" plug-ins
gstreamer1-vaapi.x86_64 : GStreamer plugins to use VA API video acceleration
gstreamer1-vaapi-debuginfo.x86_64 : Debug information for package gstreamer1-vaapi
gstreamer1-vaapi-devel.x86_64 : Development files for gstreamer1-vaapi
qt-gstreamer.x86_64 : C++ bindings for GStreamer with a Qt-style API
qt-gstreamer-debuginfo.x86_64 : Debug information for package qt-gstreamer
qt-gstreamer-devel.x86_64 : Header files and development documentation for qt-gstreamer
Name and summary matches only, use "search all" for everything.
[ec2-user@ip-172-30-1-58 ~]$ %However, when I try to install one of these, I get this error :
$ sudo yum install -y gstreamer-ffmpeg
Loaded plugins: priorities, update-motd, upgrade-helper
23 packages excluded due to repository priority protections
Resolving Dependencies
--> Running transaction check
---> Package gstreamer-ffmpeg.x86_64 0:0.10.13-15.el7.nux will be installed
--> Processing Dependency: liborc-0.4.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstvideo-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstreamer-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstpbutils-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstbase-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstaudio-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Finished Dependency Resolution
Error: Package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64 (nux-dextop)
Requires: liborc-0.4.so.0()(64bit)
Error: Package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64 (nux-dextop)
Requires: libgstreamer-0.10.so.0()(64bit)
Error: Package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64 (nux-dextop)
Requires: libgstbase-0.10.so.0()(64bit)
Error: Package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64 (nux-dextop)
Requires: libgstaudio-0.10.so.0()(64bit)
Error: Package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64 (nux-dextop)
Requires: libgstpbutils-0.10.so.0()(64bit)
Error: Package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64 (nux-dextop)
Requires: libgstvideo-0.10.so.0()(64bit)
You could try using --skip-broken to work around the problem
You could try running: rpm -Va --nofiles --nodigest
[ec2-user@ip-172-30-1-58 ~]$Supplying the suggested
--skip-brokendoesn’t help :[ec2-user@ip-172-30-1-58 ~]$ sudo yum install -y gstreamer-ffmpeg --skip-broken
Loaded plugins: priorities, update-motd, upgrade-helper
23 packages excluded due to repository priority protections
Resolving Dependencies
--> Running transaction check
---> Package gstreamer-ffmpeg.x86_64 0:0.10.13-15.el7.nux will be installed
--> Processing Dependency: liborc-0.4.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstvideo-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstreamer-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstpbutils-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstbase-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
--> Processing Dependency: libgstaudio-0.10.so.0()(64bit) for package: gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64
Packages skipped because of dependency problems:
gstreamer-ffmpeg-0.10.13-15.el7.nux.x86_64 from nux-dextop
[ec2-user@ip-172-30-1-58 ~]$So how do I install
gstreamer-ffmpeg? Why aren’t the dependencies automatically being followed ? -
Converting MP3/MP4 to WAV in the Frontend Using ffmpegwasm with Next.js Results in Module Not Found Error
31 mars 2024, par ryumaI'm attempting to use ffmpegwasm in a Next.js project to convert MP3 or MP4 files to WAV format directly in the frontend. However, I encounter a "Module not found" error during the process. I have made sure to use the latest version of Next.js. Below is the error message and the code snippet where the issue occurs. I'm seeking assistance to resolve this problem, as it has become quite troubling.


error


./node_modules/@ffmpeg/ffmpeg/dist/esm/classes.js:104:27 Module not found
 102 | if (!this.#worker) {
 103 | this.#worker = classWorkerURL ?
> 104 | new Worker(new URL(classWorkerURL, import.meta.url), {
 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 105 | type: "module",
 106 | }) :
 107 | // We need to duplicated the code here to enable webpack


"use client"

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

export default function TestPage() {
 const [loaded, setLoaded] = useState(false)
 const ffmpegRef = useRef(new FFmpeg())
 const messageRef = useRef(null)

 useEffect(() => {
 load()
 }, [])

 const load = async () => {
 const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd"
 const ffmpeg = ffmpegRef.current
 ffmpeg.on("log", ({ message }) => {
 if (messageRef.current) messageRef.current.innerHTML = message
 console.log(message)
 })

 await ffmpeg.load({
 coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
 wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
 })
 setLoaded(true)
 }

 const convertToWav = async ({ target: { files } }) => {
 const ffmpeg = ffmpegRef.current
 const file = files[0]

 await ffmpeg.writeFile("input.mp4", await fetchFile(file))
 await ffmpeg.exec(["-i", "input.mp4", "output.wav"])
 const data = await ffmpeg.readFile("output.wav")

 const url = URL.createObjectURL(new Blob([data.buffer], { type: "audio/wav" }))
 const link = document.createElement("a")
 link.href = url
 link.setAttribute("download", "output.wav")
 document.body.appendChild(link)
 link.click()
 }

 return (
 <div>
 {loaded ? (
 <>
 <input type="file" accept="audio/mp3,video/mp4" />
 <p ref="{messageRef}"></p>
 >
 ) : (
 <button>Load ffmpeg-core</button>
 )}
 </div>
 )
}



Attempted Solutions :


I've ensured that I'm using the latest version of Next.js.
I've tried various configurations for the ffmpeg instance.


Questions :


How can I resolve the "Module not found" error when using ffmpegwasm with Next.js ?
Are there any specific configurations or setups within Next.js that I need to be aware of to successfully use ffmpegwasm ?
Any guidance or assistance with this issue would be greatly appreciated. Thank you in advance for your help.


Syndiquer tout le site
