Recherche avancée
Médias (1)
-
Publier une image simplement
13 avril 2011, par ,
Mis à jour : Février 2012
Langue : français
Type : Video
Autres articles (45)
-
Support audio et vidéo HTML5
10 avril 2011MediaSPIP 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 (...) -
De l’upload à la vidéo finale [version standalone]
31 janvier 2010, parLe 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 (...) -
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 (7201)
-
How to save srt file with a video to be part of the video ?
14 septembre 2023, par abdallah mostafaI've an application that generate srt file for a video with AI but I want to save the video to user's storage with the srt subtitle burned on the video not just embedded.


this is the response form the API


"fotmated_subtitle": [
 {
 "display_text": "You know those cat are memes that everybody uses in their videos and the TV movie clips that people use.",
 "interval": [
 "0:00:00.000",
 "0:00:04.000"
 ]
 },
 {
 "display_text": "Well, who are the four best free websites to find a move?",
 "interval": [
 "0:00:04.000",
 "0:00:06.240"
 ]
 }
 ]


I could add this as a widget over the video that would change accourding to intervals.
I want to know How to save that video with the subtitle


Future<void> saveSubtitle() async {
 emit(ExportSubtitleLoading());
 String subtitleFilter = "";
 for (var subtitle in subtitles!.fotmatedSubtitle!) {
 String startTime = subtitle.interval![0];
 String endTime = subtitle.interval![1];
 String text = subtitle.displayText!;
 subtitleFilter +=
 "drawtext=text='$text':enable='between(t,$startTime,$endTime)':x=(w-text_w)/2:y=h-30:fontsize=24:fontcolor=white,";
 }

 final dir = await getTemporaryDirectory();
 String outputPath = '${dir.path}/ex_vid.mp4';
 final arguments = [
 '-i',
 inputFile,
 '-vf',
 subtitleFilter,
 '-c:v',
 'libx264',
 '-c:a',
 'copy',
 outputPath
 ];
 (arguments.join(' ')).logger;
 '=============='.logger;
 await FFmpegKit.execute(arguments.join(' ')).then((session) async {
 final returnCode = await session.getReturnCode();

 if (ReturnCode.isSuccess(returnCode)) {
 ('The Converstion is Success').logger;
 emit(ExportSubtitleSuccess());
 } else if (ReturnCode.isCancel(returnCode)) {
 // CANCEL
 ('The Converstion is Cancelled').logger;
 } else {
 emit(ExportSubtitleerror());
 ('The Converstion Have an Error').logger;
 }
 });
 }
</void>

I've tested this method but still does not worked


here is the full command


String command =
 "-y -i /data/user/0/com.amaa.aistudio/cache/file_picker/Blink-96bdc94a-17df-4f64-b560-90811a44c4f8-Original.mp4 -vf \"drawtext=text='You know those cat are memes that everybody uses in their videos and the TV movie clips that people use.':enable='between(t,0,4.000)':x=(w-text_w)/2:y=h-30:fontsize=24:fontcolor=white,drawtext=text='Well, who are the four best free websites to find a move?':enable='between(t,4.000,6.240)':x=(w-text_w)/2:y=h-30:fontsize=24:fontcolor=white\" -c:v libx264 -c:a copy /data/user/0/com.amaa.aistudio/cache/ex_vid.mp4";


also here is the logs


FFmpegKit log message: isom
[log] FFmpegKit log message:
[log] FFmpegKit log message: minor_version :
[log] FFmpegKit log message: 512
[log] FFmpegKit log message:
[log] FFmpegKit log message: compatible_brands:
[log] FFmpegKit log message: isomiso2avc1mp41
[log] FFmpegKit log message:
[log] FFmpegKit log message: comment :
[log] FFmpegKit log message: vid:v0f044gc0000cj6mnmrc77u1oq5pn100
[log] FFmpegKit log message:
[log] FFmpegKit log message: aigc_info :
[log] FFmpegKit log message: {"aigc_label_type": 0}
[log] FFmpegKit log message:
[log] FFmpegKit log message: encoder :
[log] FFmpegKit log message: Lavf58.76.100
[log] FFmpegKit log message:
[log] FFmpegKit log message: Duration:
[log] FFmpegKit log message: 00:00:35.66
[log] FFmpegKit log message: , start:
[log] FFmpegKit log message: 0.000000
[log] FFmpegKit log message: , bitrate:
[log] FFmpegKit log message: 1239 kb/s
[log] FFmpegKit log message:
[log] FFmpegKit log message: Stream #0:0
[log] FFmpegKit log message: [0x1]
[log] FFmpegKit log message: (und)
[log] FFmpegKit log message: : Video: h264 (avc1 / 0x31637661), yuv420p(tv, bt709, progressive), 576x1024 [SAR 1:1 DAR 9:16], 1102 kb/s
[log] FFmpegKit log message: ,
[log] FFmpegKit log message: 47.78 fps,
[log] FFmpegKit log message: 50 tbr,
[log] FFmpegKit log message: 12800 tbn
[log] FFmpegKit log message: (default)
[log] FFmpegKit log message:
[log] FFmpegKit log message: Metadata:
[log] FFmpegKit log message: handler_name :
[log] FFmpegKit log message: VideoHandler
[log] FFmpegKit log message:
[log] FFmpegKit log message: vendor_id :
[log] FFmpegKit log message: [0][0][0][0]
[log] FFmpegKit log message:
[log] FFmpegKit log message: Stream #0:1
[log] FFmpegKit log message: [0x2]
[log] FFmpegKit log message: (und)
[log] FFmpegKit log message: : Audio: aac (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s
[log] FFmpegKit log message: (default)
[log] FFmpegKit log message:
[log] FFmpegKit log message: Metadata:
[log] FFmpegKit log message: handler_name :
[log] FFmpegKit log message: SoundHandler
[log] FFmpegKit log message:
[log] FFmpegKit log message: vendor_id :
[log] FFmpegKit log message: [0][0][0][0]
[log] FFmpegKit log message:
FFmpegKit log message: [Parsed_drawtext_0 @ 0xb4000077140d5380] Cannot find a valid font for the family Sans
[log] FFmpegKit log message: [AVFilterGraph @ 0xb4000077a5e0afe0] Error initializing filters
[log] FFmpegKit log message: Error reinitializing filters!
[log] FFmpegKit log message: Failed to inject frame into filter network: No such file or directory
[log] FFmpegKit log message: Error while processing the decoded data for stream #0:0
[log] FFmpegKit log message: Conversion failed!


-
How to broadcast a video stream without reloading the page ?
16 novembre 2024, par promo 69I created a Node.js server to :


- 

- Receive images in udp and transform them into video and
- Display it on a website
- I tried but I don't understand how to broadcast the video live without having to reload the page








Node.js server code :


const express = require('express');
const dgram = require('dgram');
const fs = require('fs');
const ffmpeg = require('fluent-ffmpeg');
const path = require('path');
const WebSocket = require('ws');

const app = express();
const httpPort = 3000;

const imageDir = path.join(__dirname, 'images');
if (!fs.existsSync(imageDir)) {
 fs.mkdirSync(imageDir);
}

let imageCount = 0;

const udpPort = 15002;
const udpHost = '127.0.0.1';
const server = dgram.createSocket('udp4');

const wss = new WebSocket.Server({ noServer: true });


const createVideo = () => {
 const outputVideo = path.join(__dirname, 'output_video.mp4');

 ffmpeg()
 .input(path.join(imageDir, '%d.jpg'))
 .inputOptions('-framerate 30')
 .output(outputVideo)
 .outputOptions('-c:v libx264')
 .on('end', () => {
 console.log('Vidéo créée avec succès !');

 wss.clients.forEach(client => {
 if (client.readyState === WebSocket.OPEN) {
 client.send('new-video');
 }
 });
 })
 .on('error', (err) => {
 console.log('Erreur lors de la création de la vidéo:', err);
 })
 .run();
};


app.get('/feed-video', (req, res) => {
 const videoPath = path.join(__dirname, 'output_video.mp4');
 res.sendFile(videoPath);
});

server.on('message', (msg, rinfo) => {
 console.log(`Reçu message de ${rinfo.address}:${rinfo.port}`);

 const imageFilePath = path.join(imageDir, `${imageCount}.jpg`);
 fs.writeFileSync(imageFilePath, msg);

 console.log(`Image ${imageCount}.jpg reçue et sauvegardée`);


 imageCount++;


 if (imageCount > 100) {
 createVideo();
 imageCount = 0;
 }
});


server.on('listening', () => {
 const address = server.address();
 console.log(`Serveur UDP en écoute sur ${address.address}:${address.port}`);
});


app.server = app.listen(httpPort, () => {
 console.log(`Serveur HTTP et WebSocket démarré sur http://localhost:${httpPort}`);
});

app.server.on('upgrade', (request, socket, head) => {
 wss.handleUpgrade(request, socket, head, (ws) => {
 wss.emit('connection', ws, request);
 });
});


server.bind(udpPort, udpHost);



The html page :





 
 
 
 


<h1>Drone Video Feed</h1>
<video controls="controls" autoplay="autoplay"></video>

<code class="echappe-js"><script>&#xA; const video = document.getElementById(&#x27;video&#x27;);&#xA; const ws = new WebSocket(&#x27;ws://localhost:3000&#x27;);&#xA;&#xA; ws.onmessage = (event) => {&#xA; const blob = new Blob([event.data], { type: &#x27;video/mp4&#x27; });&#xA; video.src = URL.createObjectURL(blob);&#xA; video.play();&#xA; };&#xA;</script>





I tried with websocket but I didn't succeed.
The video is correctly created and when I reload the page the new video is played by the player.


However I would have been able to see the live stream without having to reload my page all the time.


-
Seam carving
Today I was reading trough the ImageMagick ChangeLog and noticed an interesting entry. “Add support for liquid rescaling”. I rushed to check the MagickWand API docs and there it was : MagickLiquidRescaleImage ! After about ten minutes of hacking the Imagick support was done. Needless to say ; I was excited
For those who don’t know what seam carving is check the demo here. More detailed information about the algorithm can be found here : “Seam Carving for Content-Aware Image Resizing” by Shai Avidan and Ariel Shamir
To use this functionality you need to install at least ImageMagick 6.3.8-2 and liblqr. Remember to pass –with-lqr to ImageMagick configuration line. You can get liblqr here : http://liblqr.wikidot.com/. The Imagick side of the functionality should appear in the CVS today if everything goes as planned.
Here is a really simple example just to illustrate the results of the operation. The parameters might be far from optimal (didn’t do much testing yet). The original dimensions of image are 500×375 and the resulting size is 500×200.
Update : the functionality is pending until license issues are solved.
-
< ?php
-
-
/* Create new object */
-
$im = new Imagick( ’test.jpg’ ) ;
-
-
/* Scale down */
-
$im->liquidRescaleImage( 500, 200, 3, 25 ) ;
-
-
/* Display */
-
header( ’Content-Type : image/jpg’ ) ;
-
echo $im ;
-
-
?>
The original image by flickr/jennconspiracy
And the result :
Update. On kenrick’s request here is an image which is scaled down to 300×300
-
Syndiquer tout le site
