Recherche avancée

Médias (29)

Mot : - Tags -/Musique

Autres articles (44)

  • Pas question de marché, de cloud etc...

    10 avril 2011

    Le vocabulaire utilisé sur ce site essaie d’éviter toute référence à la mode qui fleurit allègrement
    sur le web 2.0 et dans les entreprises qui en vivent.
    Vous êtes donc invité à bannir l’utilisation des termes "Brand", "Cloud", "Marché" etc...
    Notre motivation est avant tout de créer un outil simple, accessible à pour tout le monde, favorisant
    le partage de créations sur Internet et permettant aux auteurs de garder une autonomie optimale.
    Aucun "contrat Gold ou Premium" n’est donc prévu, aucun (...)

  • List of compatible distributions

    26 avril 2011, par

    The table below is the list of Linux distributions compatible with the automated installation script of MediaSPIP. Distribution nameVersion nameVersion number Debian Squeeze 6.x.x Debian Weezy 7.x.x Debian Jessie 8.x.x Ubuntu The Precise Pangolin 12.04 LTS Ubuntu The Trusty Tahr 14.04
    If you want to help us improve this list, you can provide us access to a machine whose distribution is not mentioned above or send the necessary fixes to add (...)

  • Amélioration de la version de base

    13 septembre 2013

    Jolie 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 (...)

Sur d’autres sites (7705)

  • How to fix ffmpeg,js length error in react-js project | fix error in react project

    19 février 2024, par X3R0

    I've tried to import the ffmpeg js library into my react-typescript project, I can't really update my project's react version or react-scripts due to the current code base.

    


    Error

    


    ./node_modules/@ffmpeg/ffmpeg/dist/umd/ffmpeg.js
TypeError: REDACTED_PROJECT_ROOT\node_modules\@ffmpeg\ffmpeg\dist\umd\ffmpeg.js: Cannot read properties of undefined (reading 'length')


    


    Code

    


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

/* MORE CODE HERE */

const ffmpeg = new FFmpeg();
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
const coreURL = `${baseURL}/ffmpeg-core.js`;
const wasmURL = `${baseURL}/ffmpeg-core.wasm`;
const coreData = await fromURLToBlob(coreURL);
const wasmData = await fromURLToBlob(wasmURL);
const coreBlob = new Blob([coreData], { type: "text/javascript"});
const wasmBlob = new Blob([wasmData], { type: "application/wasm"});
await ffmpeg.load({
    coreURL: fromBlobToURL(coreBlob),
    wasmURL: fromBlobToURL(wasmBlob),
});       

/* MORE CODE HERE */


    


    Versions

    


    npm v8.19.4
node v16.20.2


    


    tsconfig.json

    


    {
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}



    


    package.json

    


    {
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@ffmpeg/ffmpeg": "^0.12.10",
    "@material-ui/core": "^4.12.3",
    "@mui/base": "^5.0.0-beta.36",
    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.15.10",
    "@mui/x-data-grid": "^6.19.2",
    "@mui/x-data-grid-pro": "^6.19.2",
    "@reduxjs/toolkit": "^1.8.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@toast-ui/editor": "^3.1.3",
    "@toast-ui/react-editor": "^3.1.3",
    "@types/jest": "^29.0.1",
    "@types/node": "^18.7.17",
    "@types/react": "^17.0.49",
    "@types/react-dom": "^18.0.6",
    "@zalando/oauth2-client-js": "^0.0.18",
    "ajv": "^8.12.0",
    "ajv-errors": "^3.0.0",
    "apexcharts": "^3.28.1",
    "arraybuffer-concat": "^0.0.1",
    "axios": "^1.4.0",
    "base64-blob": "^1.4.1",
    "bootstrap": "^5.1.1",
    "datetime-diff": "^0.2.1",
    "fuzzy-time": "^1.0.7",
    "jquery": "^3.6.0",
    "jso": "^4.1.1",
    "luxon": "^2.3.0",
    "pretty-bytes": "^5.6.0",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-dom": "^17.0.2",
    "react-export-excel": "^0.5.3",
    "react-facebook": "^9.0.12",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-media-recorder": "^1.6.6",
    "react-notifications": "^1.7.2",
    "react-pages": "^0.4.4",
    "react-redux": "^7.2.8",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "react-toastify": "^8.0.2",
    "react-tooltip": "^4.2.21",
    "react-webcam": "^6.0.0",
    "recharts": "^2.1.8",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "typescript": "^4.8.3",
    "web-vitals": "^1.1.2",
    "website-popup": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "set NODE_OPTIONS=--max-old-space-size=4096 && react-scripts build --GENERATE_SOURCEMAP=false",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6"
  }
}



    


  • Video Frame Skipping Issues During Chunking and Uploading in React Native App

    24 février 2024, par Kishore J

    To create a social media platform like Instagram and Facebook, we have incorporated the functionality for users to upload reels-style videos. To enhance the viewing experience, we have implemented a strategy to segment these videos and upload them to the backend.

    


    To achieve this, we have employed the ffmpeg-kit-react-native and rn-fetch-blob libraries to segment videos efficiently. We've written an asynchronous function, chunkVideo, which chunks the input video file into segments of a specified duration. Here's a snippet of the code :

    


    async function chunkVideo(inputVideoFile, fileName, segmentDuration = 3) {
try {
  // Define the cache directory path
  const cacheDir = RNFetchBlob.fs.dirs.CacheDir;
  const outputTSFilePattern = `${cacheDir}/${fileName}_video%d.ts`;
  await FFmpegKit.execute(
   `-i ${inputVideoFile} -codec: copy -start_number 0 -hls_time ${segmentDuration} -hls_list_size 0 -hls_segment_filename ${outputTSFilePattern} -f hls ${cacheDir}/index.m3u8`,
  );
} catch (err) {
  logEvent("chunkVideoError", {error: err?.message});
  errorToast(err, true);
  }
}


    


    While this approach works well for segmenting videos, we encountered an issue where some frames are skipping during the chunking process, leading to a compromised viewing experience for the end-users.

    


    How to mitigate the frame skipping problems ?

    


  • Uploading Reel to Instagram via API error : The video format is not supported

    24 juin 2024, par Ben Fox

    I'm using FFMPeg to create a video with backing audio to upload to Instagram via the Graph API. I've followed the specs here as closely as I can : https://www.facebook.com/business/help/1197310377458196?id=376980407544978 and I've used ffprobe and MediaInfo to try and debug differences between my generated file and the requirements from Meta but every time, I get "Video process failed with error : Unsupported format : The video format is not supported. Please check spec for supported duration format".

    


    I've tried doing binary uploads and supplying a URL via their Resumable Upload protocol with the same result both times.

    


    Media Info Video
Media Info Audio

    


    I've uploaded screenshots from MediaInfo showing the entire breakout of the file and here is the code using the Node package fluent ffmpeg to create it :

    


    await new Promise<void>((resolve, reject) => {&#xA;  ffmpeg()&#xA;    .size(&#x27;1080x1920&#x27;)&#xA;    .aspect(&#x27;9:16&#x27;)&#xA;    .autopad()&#xA;&#xA;    .input(imageFilePath)&#xA;    .videoCodec(&#x27;libx264&#x27;)&#xA;    // .inputFPS(fps)&#xA;&#xA;    .input(audioFilePath)&#xA;&#xA;    .audioCodec(&#x27;aac&#x27;)&#xA;    .audioChannels(2)&#xA;    .audioFrequency(48000)&#xA;    .audioBitrate(&#x27;128k&#x27;)&#xA;&#xA;    .addOption(&#x27;-use_editlist&#x27;, &#x27;0&#x27;)&#xA;    .addOption(&#x27;-movflags&#x27;, &#x27;&#x2B;faststart&#x27;)&#xA;    .addOption(&#x27;-crf&#x27;, &#x27;23&#x27;)&#xA;&#xA;    /* .outputOptions([&#xA;      // YUV color space with 4:2:0 chroma subsampling for maximum compatibility with&#xA;      // video players&#xA;      &#x27;-pix_fmt yuv420p&#x27;,&#xA;    ]) */&#xA;&#xA;    // Set the output duration. It is required because FFmpeg would otherwise&#xA;    // automatically set the duration to the longest input, and the soundtrack might&#xA;    // be longer than the desired video length&#xA;    .duration(duration)&#xA;    // Set output frame rate&#xA;    .fps(fps)&#xA;&#xA;    // Resolve or reject (throw an error) the Promise once FFmpeg completes&#xA;    .toFormat(&#x27;mp4&#x27;)&#xA;    .saveToFile(outputPath)&#xA;    .on(&#x27;end&#x27;, () => resolve())&#xA;    .on(&#x27;error&#x27;, (error) => {&#xA;      console.log(&#x27;[render] :: Error&#x27;, error);&#xA;      reject(new Error(error));&#xA;    });&#xA;});&#xA;</void>

    &#xA;

Navigation