Recherche avancée

Médias (1)

Mot : - Tags -/sintel

Autres articles (38)

  • Support audio et vidéo HTML5

    10 avril 2011

    MediaSPIP utilise les balises HTML5 video et audio pour la lecture de documents multimedia en profitant des dernières innovations du W3C supportées par les navigateurs modernes.
    Pour les navigateurs plus anciens, le lecteur flash Flowplayer est utilisé.
    Le lecteur HTML5 utilisé a été spécifiquement créé pour MediaSPIP : il est complètement modifiable graphiquement pour correspondre à un thème choisi.
    Ces technologies permettent de distribuer vidéo et son à la fois sur des ordinateurs conventionnels (...)

  • HTML5 audio and video support

    13 avril 2011, par

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

  • De l’upload à la vidéo finale [version standalone]

    31 janvier 2010, par

    Le chemin d’un document audio ou vidéo dans SPIPMotion est divisé en trois étapes distinctes.
    Upload et récupération d’informations de la vidéo source
    Dans un premier temps, il est nécessaire de créer un article SPIP et de lui joindre le document vidéo "source".
    Au moment où ce document est joint à l’article, deux actions supplémentaires au comportement normal sont exécutées : La récupération des informations techniques des flux audio et video du fichier ; La génération d’une vignette : extraction d’une (...)

Sur d’autres sites (4374)

  • How do I merge images and an audio file into a single video ?

    3 janvier 2024, par Anil

    I am creating a web application using next js.
I want to create a video by combining three images and an audio track in such a way that each image is displayed for an equal duration that collectively matches the length of the audio. It will all happen locally on the browser.

    


    This is my code for converting images and audio into a video.

    


    import {FFmpeg} from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';


export async function createVideo(ImageFiles, audioFile) {

  try {
    const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd';
    const ffmpeg = new FFmpeg({ log: true});

    console.log('Loading ffmpeg core');
    await ffmpeg.load({
      corePath: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
      wasmPath: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
    });
    await ffmpeg.load();
    console.log('Finished loading ffmpeg core');

    for (let i = 0; i < ImageFiles.length; i++) {
      ffmpeg.writeFile(
        `image${i+1}.jpg`,
        await fetchFile(ImageFiles[i].imageUrl)
      );
    }

    ffmpeg.FS('writeFile', 'audio.mp3', await fetchFile(audioFile));


    const durationPerImage = (await getAudioDuration(ffmpeg, 'audio.mp3')) / ImageFiles.length;
    let filterComplex = '';
    for (let i = 0; i < ImageFiles.length - 1; i++) {filterComplex += `[${i}:v]trim=duration=${durationPerImage},setpts=PTS-STARTPTS[v${i}]; `;
    }
    filterComplex += `${ImageFiles.slice(0, -1).map((_, i) => `[v${i}]`).join('')}concat=n=${ImageFiles.length - 1}:v=1:a=0,format=yuv420p[v];`;

    await ffmpeg.run(
      '-framerate', '1', '-loop', '1', '-t', durationPerImage, '-i', 'image%d.jpg', '-i', 'audio.mp3',
      '-filter_complex', filterComplex, '-map', '[v]', '-map', '1:a',
      '-c:v', 'libx264', '-tune', 'stillimage', '-c:a', 'aac', '-b:a', '192k', 'output.mp4'
    );

    const data = ffmpeg.FS('readFile', 'output.mp4');

    const videoURL = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    return videoURL;
  } catch (error) {
    console.error('Error creating video:', error);
    throw new Error('Failed to create video');
  }
}

async function getAudioDuration(ffmpeg, audioFilename) {
  await ffmpeg.run('-i', audioFilename, '-show_entries', 'format=duration', '-of', 'default=noprint_wrappers=1:nokey=1', 'duration.txt');
  const data = ffmpeg.FS('readFile', 'duration.txt');
  const durationString = new TextDecoder().decode(data);
  const duration = Math.floor(parseFloat(durationString.trim())); 
  return duration;
}


    


    I am getting this error :

    


    CreateVideo.js:65  Error creating video: RuntimeError: Aborted(LinkError: WebAssembly.instantiate(): Import #70 module="a" function="qa": function import requires a callable). Build with -sASSERTIONS for more info.


    


    Can someone help me with this ?

    


  • Fluent-ffmpeg Invalid data found when processing input error only when the second request is received

    31 décembre 2022, par koji tanaka

    I am using Node.js for backend to use ffmpeg. To use ffmpeg, I adopted fluent-ffmpeg. This is working perfectly except for one problem. That is when I send video from client side SPA(single page application) to the server-side for the "second" time, node application crashes.

    


    What I did is saving the received video in the backend folder, which is made in the process, and taking a snapshot of the video.
This code actually works everytime after restarting the server, but once I used this route and try another time, the error message "Invalid data found when processing input video ./received/${receivedName}" comes up.

    


    app.post("/convert", fileUpload({ createParentPath: true }), async function (req, res) {
    makeDir(receivedVideoDirectory);
    const receivedName = Object.keys(req.files)[0];
    const directoryName = receivedName.substring(0, receivedName.indexOf("."));

    const receivedFile = req.files[receivedName];
    transcodedSegFolder = `./public/transcoded/${dirName}`;
    console.log("transcoded segment file folder is here", transcodedSegFolder);
    makeDir(transcodedSegFolder);

    fs.open(`./received/${receivedName}`, 'w', (err, fd) => {
        if (err) throw err;
        fs.writeFile(fd, receivedFile["data"], function (err) {
            if (err) {
                return console.log("Err in write file ", err);
            }
            console.log("The file was saved!", receivedName);
            fs.close(fd, (err) => {
                if (err) throw err;
            });
        });
    });

    ffmpeg(`./received/${receivedName}`)
        .takeScreenshots(
            {
                count: 1,
                timemarks: ['00:00:01.000'],
                folder: './public/thumbnails',
                filename: dirName
            }).on('error', function(err) {
                console.log('screenshot error happened: ' + err.message);
              }).on('end', function(err) {
                console.log('Screenshot process finished: ');
              });


    


    Probably some program keeps working, but I cannot find it. Any help is appreciated. Thank you.

    


  • Format video to upload on instagram API (Nodejs)

    6 octobre 2022, par Rafael de Carvalho

    I'm trying to automate the process of posting photos and videos on instagram but I constantly get errors when uploading to instagram.

    


    I will leave a video duration error here but several others happen, I need to follow the following requirements :

    


      

    • Container : MOV or MP4 (MPEG-4 Part 14), no edit lists, atom moov in front of file
    • 


    • Audio codec : AAC, 48 kHz maximum sampling rate, 1 or 2 channel (mono or stereo)
    • 


    • Video codec : HEVC or H.264, progressive scan, closed GOP, 4:2:0 chroma subsampling
    • 


    • Frame rate : from 23 to 60 FPS
    • 


    • photo size :

        

      • Maximum columns (horizontal pixels) : 1,920
      • 


      • Minimum aspect ratio [columns/rows] : 4/5
      • 


      • Maximum aspect ratio [columns/rows] : 9/16
      • 


      


    • 


    • Video bitrate : 5Mbps maximum VBR
    • 


    • Audio bitrate : 128 kbps
    • 


    • Duration : maximum 60 seconds and minimum 3 seconds
    • 


    • File size : max 100 MB
    • 


    


    My code :

    


    import { S3 } from 'aws-sdk';
import { IgApiClient } from 'instagram-private-api';
import fs from 'fs';

const s3 = new S3();
const ig = new IgApiClient();
const bucket = 'posts';
const { INSTA_USER, INSTA_PASS } = process.env;

ig.state.generateDevice(INSTA_USER);

export const main = async () => {
  try {
    await ig.account.login(INSTA_USER, INSTA_PASS);

    const { Contents } = await s3.listObjectsV2({ Bucket: bucket, MaxKeys: 2, Prefix: 'memes/geral' }).promise();

    const files = await Promise.all(Contents.map(async ({ Key }) => {
      const file = await s3.getObject({
        Bucket: bucket,
        Key,
      }).promise();

      return file.Body;
    }));

    const publishResult = await ig.publish.video({
      video: files[0],
      coverImage: await fs.readFileAsync("../../src/assets/cover.png")
    });

    console.dir({ publishResult }, { depth: null })
  } catch (error) {
    console.error(error);
    throw error;
  }
}


    


    When I get a file from s3, it comes in the following format.
I'm taking the content of the body property and put it in the video property of the publish method.
Is it right ?
I also tried to save the file with fs.writeFile and dps use readFileSync like in the example but it also gave the same error.

    


    {
    AcceptRanges: 'bytes',
    LastModified: 2022-08-04T23:15:24.000Z,
    ContentLength: 3252472,
    ETag: '"c491cfe2fb5bc29777fc34391fc1d56a"',
    ContentType: 'application/octet-stream',
    Body: Buffer(3252472) [Uint8Array] [
        0,   0,   0,  32, 102, 116, 121, 112, 105, 115, 111, 109,
        0,   0,   2,   0, 105, 115, 111, 109, 105, 115, 111,  50,
       97, 118,  99,  49, 109, 112,  52,  49,   0,   0, 209,   0,
      109, 111, 111, 118,   0,   0,   0, 108, 109, 118, 104, 100,
        0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,
        0,   0,   3, 232,   0,   0, 250,  17,   0,   1,   0,   0,
        1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,
        0,   1,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,
        0,   0,   0,   0,
      ... 3252372 more items
    ]
  }


    


    Error :

    


    {
    "errorMessage": "POST /api/v1/media/upload_finish/?video=1 - 400 Bad Request; server processing error: VideoSourceDurationCheckException",
    "errorType": "IgUploadVideoError",
    "stackTrace": [
        "IgUploadVideoError: POST /api/v1/media/upload_finish/?video=1 - 400 Bad Request; server processing error: VideoSourceDurationCheckException",
        "    at C:\\Users\\User\\Desktop\\dev\\Insta\\.webpack\\service\\src\\functions\\webpack:\\instagram-private-api\\dist\\services\\publish.service.js:26:1",  
        "    at tryCatcher (C:\\Users\\User\\Desktop\\dev\\Insta\\.webpack\\service\\src\\functions\\webpack:\\bluebird\\js\\release\\util.js:16:1)"
}


    


    when I try to post a video under 60 seconds (apparently within the requirements) :

    


    {
    "errorMessage": "POST /api/v1/media/configure/?video=1 - 403 Forbidden; ",
    "errorType": "IgConfigureVideoError",
    "stackTrace": [
        "IgConfigureVideoError: POST /api/v1/media/configure/?video=1 - 403 Forbidden; ",
        "    at PublishService.video (C:\\Users\\User\\Desktop\\dev\\Insta\\.webpack\\service\\src\\functions\\webpack:\\instagram-private-api\\dist\\services\\publish.service.js:123:1)",        
        "    at C:\\Users\\User\\Desktop\\dev\\Insta\\.webpack\\service\\src\\functions\\webpack:\\src\\functions\\cronFreefireMemes.js:71:31",
        "    at async Promise.all (index 1)",
        "    at main (C:\\Users\\User\\Desktop\\dev\\Insta\\.webpack\\service\\src\\functions\\webpack:\\src\\functions\\cronFreefireMemes.js:47:5)"
    ]
}


    


    I know that the error above is happening because of the size of the video which is longer than 60 seconds.

    


    But I would like to know if there is any way I can format any video to fit the instagram requirements.

    


    Any nodejs library ?