Recherche avancée
Autres articles (71)
-
Amélioration de la version de base
13 septembre 2013Jolie sélection multiple
Le plugin Chosen permet d’améliorer l’ergonomie des champs de sélection multiple. Voir les deux images suivantes pour comparer.
Il suffit pour cela d’activer le plugin Chosen (Configuration générale du site > Gestion des plugins), puis de configurer le plugin (Les squelettes > Chosen) en activant l’utilisation de Chosen dans le site public et en spécifiant les éléments de formulaires à améliorer, par exemple select[multiple] pour les listes à sélection multiple (...) -
Menus personnalisés
14 novembre 2010, parMediaSPIP utilise le plugin Menus pour gérer plusieurs menus configurables pour la navigation.
Cela permet de laisser aux administrateurs de canaux la possibilité de configurer finement ces menus.
Menus créés à l’initialisation du site
Par défaut trois menus sont créés automatiquement à l’initialisation du site : Le menu principal ; Identifiant : barrenav ; Ce menu s’insère en général en haut de la page après le bloc d’entête, son identifiant le rend compatible avec les squelettes basés sur Zpip ; (...) -
Déploiements possibles
31 janvier 2010, parDeux types de déploiements sont envisageable dépendant de deux aspects : La méthode d’installation envisagée (en standalone ou en ferme) ; Le nombre d’encodages journaliers et la fréquentation envisagés ;
L’encodage de vidéos est un processus lourd consommant énormément de ressources système (CPU et RAM), il est nécessaire de prendre tout cela en considération. Ce système n’est donc possible que sur un ou plusieurs serveurs dédiés.
Version mono serveur
La version mono serveur consiste à n’utiliser qu’une (...)
Sur d’autres sites (12384)
-
Error initializing FFmpegKit : "TypeError : Cannot read property 'getLogLevel' of null" in React Native
9 janvier, par Md Monirozzaman khanI'm developing a React Native application where I need to process videos using the ffmpeg-kit-react-native library. However, I'm encountering an issue during the initialization of FFmpegKitConfig. The error message is :


ERROR Error initializing FFmpegKit: [TypeError: Cannot read property 'getLogLevel' of null]


Here is my App.js code




import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert, Dimensions, ScrollView, LayoutAnimation, UIManager, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as FileSystem from 'expo-file-system';
import { Video } from 'expo-av';
import { MaterialIcons } from '@expo/vector-icons';
import { FFmpegKit, FFmpegKitConfig, ReturnCode } from 'ffmpeg-kit-react-native';

const windowWidth = Dimensions.get('window').width;

if (Platform.OS === 'android') {
 UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
}

export default function App() {
 const [videoFiles, setVideoFiles] = useState([]);
 const [isGridView, setIsGridView] = useState(false);
 const [isConverting, setIsConverting] = useState(false);

 useEffect(() => {
 FFmpegKitConfig.init()
 .then(() => {
 console.log('FFmpegKit initialized');
 })
 .catch((error) => {
 console.error('Error initializing FFmpegKit:', error);
 });
 }, []);

 const pickVideo = async () => {
 const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
 if (status !== 'granted') {
 alert('Sorry, we need media library permissions to make this work!');
 return;
 }

 let result = await ImagePicker.launchImageLibraryAsync({
 mediaTypes: ImagePicker.MediaTypeOptions.Videos,
 allowsMultipleSelection: true,
 });

 if (!result.canceled && result.assets.length > 0) {
 const newFiles = result.assets.filter(
 (newFile) => !videoFiles.some((existingFile) => existingFile.uri === newFile.uri)
 );

 if (newFiles.length < result.assets.length) {
 Alert.alert('Duplicate Files', 'Some files were already added.');
 }

 LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 setVideoFiles([...videoFiles, ...newFiles]);
 }
 };

 const convertVideos = async () => {
 setIsConverting(true);
 const outputDir = `${FileSystem.documentDirectory}Output`;

 const dirInfo = await FileSystem.getInfoAsync(outputDir);
 if (!dirInfo.exists) {
 await FileSystem.makeDirectoryAsync(outputDir, { intermediates: true });
 }

 for (const video of videoFiles) {
 const { uri } = video;
 const filename = uri.split('/').pop();
 const outputFilePath = `${outputDir}/${filename.split('.').slice(0, -1).join('.')}_modified.mp4`;

 const ffmpegCommand = `-y -i "${uri}" -af "atempo=1.02, bass=g=4:f=80:w=3, treble=g=4:f=3200:w=3, firequalizer=gain_entry='entry(0,0);entry(62,2);entry(125,1.5);entry(250,1);entry(500,1);entry(1000,1);entry(2000,1.5);entry(4000,2.5);entry(8000,3);entry(16000,4)', compand=attacks=0.05:decays=0.25:points=-80/-80-50/-15-30/-10-10/-2:soft-knee=4:gain=2, deesser, highpass=f=35, lowpass=f=17000, loudnorm=I=-16:LRA=11:TP=-1.5, volume=3.9dB" -c:v copy -c:a aac -b:a 224k -ar 48000 -threads 0 "${outputFilePath}"`;

 try {
 const session = await FFmpegKit.execute(ffmpegCommand);
 const returnCode = await session.getReturnCode();

 if (ReturnCode.isSuccess(returnCode)) {
 console.log(`Video converted: ${outputFilePath}`);
 } else if (ReturnCode.isCancel(returnCode)) {
 console.log('Conversion cancelled');
 } else {
 console.error(`FFmpeg process failed: ${session.getFailStackTrace()}`);
 }
 } catch (error) {
 console.error(`Error converting video: ${error.message}`);
 }
 }

 setIsConverting(false);
 Alert.alert('Conversion Complete', 'All videos have been converted.');
 };

 const deleteVideo = (uri) => {
 LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 setVideoFiles(videoFiles.filter((video) => video.uri !== uri));
 };

 const clearAllVideos = () => {
 LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 setVideoFiles([]);
 };

 const toggleLayout = () => {
 LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 setIsGridView(!isGridView);
 };

 return (
 <view style="{styles.container}">
 <text style="{styles.header}">Video Converter App</text>
 <touchableopacity style="{styles.addButton}">
 <text style="{styles.addButtonText}">Select or Browse Videos</text>
 </touchableopacity>
 <view style="{styles.headerContainer}">
 <text style="{styles.videoCount}">Total Videos: {videoFiles.length}</text>
 {videoFiles.length > 0 && (
 <>
 <touchableopacity style="{styles.clearButtonContainer}">
 <materialicons size="{24}" color="red" style="{styles.clearIcon}"></materialicons>
 <text style="{styles.clearAllText}">Clear All</text>
 </touchableopacity>
 <touchableopacity style="{styles.toggleLayoutButton}">
 <materialicons size="{24}" color="#fff"></materialicons>
 </touchableopacity>
 >
 )}
 </view>
 {isGridView ? (
 <scrollview contentcontainerstyle="{styles.gridContainer}">
 {videoFiles.map((item, index) => (
 <view key="{index}" style="{styles.videoItemGrid}">
 
 <touchableopacity>> deleteVideo(item.uri)} style={styles.deleteButtonGrid}>
 <materialicons size="{24}" color="red"></materialicons>
 </touchableopacity>
 </view>
 ))}
 </scrollview>
 ) : (
 <view style="{styles.list}">
 {videoFiles.map((item, index) => (
 <view key="{index}" style="{styles.videoItem}">
 
 <text style="{styles.fileName}">{decodeURI(item.fileName || item.uri.split('/').pop() || 'Unknown File')}</text>
 <touchableopacity>> deleteVideo(item.uri)} style={styles.deleteButton}>
 <materialicons size="{24}" color="red"></materialicons>
 </touchableopacity>
 </view>
 ))}
 </view>
 )}
 {videoFiles.length > 0 && (
 <touchableopacity style="{styles.convertButton}" disabled="{isConverting}">
 <text style="{styles.convertButtonText}">{isConverting ? 'Converting...' : 'Convert'}</text>
 </touchableopacity>
 )}
 </view>
 );
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#fff',
 alignItems: 'center',
 padding: 10,
 },
 header: {
 fontSize: 24,
 fontWeight: 'bold',
 marginBottom: 5,
 },
 addButton: {
 backgroundColor: '#007BFF',
 padding: 15,
 borderRadius: 10,
 alignItems: 'center',
 marginBottom: 5,
 width: '100%',
 elevation: 2,
 shadowColor: '#000',
 shadowOffset: { width: 0, height: 5 },
 shadowOpacity: 0.8,
 shadowRadius: 2,
 },
 addButtonText: {
 color: '#fff',
 fontSize: 18,
 fontWeight: 'bold',
 },
 headerContainer: {
 flexDirection: 'row',
 alignItems: 'center',
 justifyContent: 'space-between',
 width: '100%',
 marginBottom: 10,
 },
 videoCount: {
 fontSize: 18,
 },
 clearButtonContainer: {
 flexDirection: 'row',
 alignItems: 'center',
 marginRight: 10,
 },
 clearIcon: {
 marginRight: 5,
 },
 clearAllText: {
 fontSize: 16,
 color: 'red',
 textDecorationLine: 'underline',
 },
 toggleLayoutButton: {
 backgroundColor: '#007BFF',
 padding: 1,
 borderRadius: 8,
 alignItems: 'center',
 justifyContent: 'center',
 },
 list: {
 flex: 1,
 width: '100%',
 },
 videoItem: {
 padding: 5,
 borderBottomColor: '#ccc',
 borderBottomWidth: 0.7,
 flexDirection: 'row',
 alignItems: 'center',
 },
 videoItemGrid: {
 flexDirection: 'column',
 alignItems: 'center',
 margin: 4,
 borderWidth: 1,
 borderColor: '#ccc',
 borderRadius: 8,
 padding: 2,
 position: 'relative',
 },
 thumbnail: {
 width: 70,
 height: 70,
 marginRight: 10,
 },
 thumbnailGrid: {
 width: 80,
 height: 80,
 marginBottom: 0,
 },
 fileName: {
 fontSize: 16,
 marginLeft: 10,
 flex: 1,
 },
 deleteButton: {
 marginLeft: 60,
 width: 20,
 height: 20,
 },
 deleteButtonGrid: {
 position: 'absolute',
 bottom: 5,
 right: 5,
 },
 convertButton: {
 backgroundColor: '#007BFF',
 padding: 15,
 borderRadius: 10,
 alignItems: 'center',
 marginTop: 20,
 width: '100%',
 },
 convertButtonText: {
 color: '#fff',
 fontSize: 18,
 fontWeight: 'bold',
 },
 gridContainer: {
 flexDirection: 'row',
 flexWrap: 'wrap',
 justifyContent: 'flex-start',
 paddingVertical: 5,
 paddingHorizontal: 5,
 width: '100%',
 },
});






App.json




{
 "expo": {
 "name": "VidoeConvert",
 "slug": "VidoeConvert",
 "version": "1.0.0",
 "orientation": "portrait",
 "icon": "./assets/icon.png",
 "userInterfaceStyle": "light",
 "splash": {
 "image": "./assets/splash.png",
 "resizeMode": "contain",
 "backgroundColor": "#ffffff"
 },
 "ios": {
 "supportsTablet": true
 },
 "android": {
 "adaptiveIcon": {
 "foregroundImage": "./assets/adaptive-icon.png",
 "backgroundColor": "#ffffff"
 },
 "package": "com.anonymous.VidoeConvert"
 },
 "web": {
 "favicon": "./assets/favicon.png"
 },
 "plugins": [
 "@config-plugins/ffmpeg-kit-react-native",
 "expo-build-properties"
 ]
 }
}






Package.json




{
 "name": "vidoeconvert",
 "version": "1.0.0",
 "main": "expo/AppEntry.js",
 "scripts": {
 "start": "expo start",
 "android": "expo run:android",
 "ios": "expo run:ios",
 "web": "expo start --web"
 },
 "dependencies": {
 "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
 "@expo/metro-runtime": "~3.2.1",
 "expo": "~51.0.17",
 "expo-asset": "~10.0.10",
 "expo-av": "^14.0.6",
 "expo-document-picker": "~12.0.2",
 "expo-file-system": "~17.0.1",
 "expo-image-picker": "~15.0.7",
 "expo-media-library": "~16.0.4",
 "expo-status-bar": "~1.12.1",
 "ffmpeg-kit-react-native": "^6.0.2",
 "react": "18.2.0",
 "react-dom": "18.2.0",
 "react-native": "^0.74.3",
 "react-native-document-picker": "^9.3.0",
 "react-native-ffmpeg": "^0.5.2",
 "react-native-vector-icons": "^10.1.0",
 "react-native-web": "~0.19.10",
 "expo-build-properties": "~0.12.3"
 },
 "devDependencies": {
 "@babel/core": "^7.20.0"
 },
 "private": true
}






Has anyone encountered a similar issue or can point me in the right direction to resolve this error ? Any help would be greatly appreciated !


How to remove the error ?


any configruation required for this project ?


-
Emscripten and Web Audio API
29 avril 2015, par Multimedia Mike — HTML5Ha ! They said it couldn’t be done ! Well, to be fair, I said it couldn’t be done. Or maybe that I just didn’t have any plans to do it. But I did it– I used Emscripten to cross-compile a CPU-intensive C/C++ codebase (Game Music Emu) to JavaScript. Then I leveraged the Web Audio API to output audio and visualize the audio using an HTML5 canvas.
Want to see it in action ? Here’s a demonstration. Perhaps I will be able to expand the reach of my Game Music site when I can drop the odd Native Client plugin. This JS-based player works great on Chrome, Firefox, and Safari across desktop operating systems.
But this endeavor was not without its challenges.
Programmatically Generating Audio
First, I needed to figure out the proper method for procedurally generating audio and making it available to output. Generally, there are 2 approaches for audio output :- Sit in a loop and generate audio, writing it out via a blocking audio call
- Implement a callback that the audio system can invoke in order to generate more audio when needed
Option #1 is not a good idea for an event-driven language like JavaScript. So I hunted through the rather flexible Web Audio API for a method that allowed something like approach #2. Callbacks are everywhere, after all.
I eventually found what I was looking for with the ScriptProcessorNode. It seems to be intended to apply post-processing effects to audio streams. A program registers a callback which is passed configurable chunks of audio for processing. I subverted this by simply overwriting the input buffers with the audio generated by the Emscripten-compiled library.
The ScriptProcessorNode interface is fairly well documented and works across multiple browsers. However, it is already marked as deprecated :
Note : As of the August 29 2014 Web Audio API spec publication, this feature has been marked as deprecated, and is soon to be replaced by Audio Workers.
Despite being marked as deprecated for 8 months as of this writing, there exists no appreciable amount of documentation for the successor API, these so-called Audio Workers.
Vive la web standards !
Visualize This
The next problem was visualization. The Web Audio API provides the AnalyzerNode API for accessing both time and frequency domain data from a running audio stream (and fetching the data as both unsigned bytes or floating-point numbers, depending on what the application needs). This is a pretty neat idea. I just wish I could make the API work. The simple demos I could find worked well enough. But when I wired up a prototype to fetch and visualize the time-domain wave, all I got were center-point samples (an array of values that were all 128).Even if the API did work, I’m not sure if it would have been that useful. Per my reading of the AnalyserNode API, it only returns data as a single channel. Why would I want that ? My application supports audio with 2 channels. I want 2 channels of data for visualization.
How To Synchronize
So I rolled my own visualization solution by maintaining a circular buffer of audio when samples were being generated. Then, requestAnimationFrame() provided the rendering callbacks. The next problem was audio-visual sync. But that certainly is not unique to this situation– maintaining proper A/V sync is a perennial puzzle in real-time multimedia programming. I was able to glean enough timing information from the environment to achieve reasonable A/V sync (verify for yourself).Pause/Resume
The next problem I encountered with the Web Audio API was pause/resume facilities, or the lack thereof. For all its bells and whistles, the API’s omission of such facilities seems most unusual, as if the design philosophy was, “Once the user starts playing audio, they will never, ever have cause to pause the audio.”Then again, I must understand that mine is not a use case that the design committee considered and I’m subverting the API in ways the designers didn’t intend. Typical use cases for this API seem to include such workloads as :
- Downloading, decoding, and playing back a compressed audio stream via the network, applying effects, and visualizing the result
- Accessing microphone input, applying effects, visualizing, encoding and sending the data across the network
- Firing sound effects in a gaming application
- MIDI playback via JavaScript (this honestly amazes me)
What they did not seem to have in mind was what I am trying to do– synthesize audio in real time.
I implemented pause/resume in a sub-par manner : pausing has the effect of generating 0 values when the ScriptProcessorNode callback is invoked, while also canceling any animation callbacks. Thus, audio output is technically still occurring, it’s just that the audio is pure silence. It’s not a great solution because CPU is still being used.
Future Work
I have a lot more player libraries to port to this new system. But I think I have a good framework set up. -
avfilter/af_amerge : Cleanup on av_channel_layout_copy() failure
10 juin 2024, par Michael Niedermayer
Syndiquer tout le site
