Recherche avancée
Médias (1)
-
The Great Big Beautiful Tomorrow
28 octobre 2011, par
Mis à jour : Octobre 2011
Langue : English
Type : Texte
Autres articles (82)
-
Les vidéos
21 avril 2011, parComme les documents de type "audio", Mediaspip affiche dans la mesure du possible les vidéos grâce à la balise html5 .
Un des inconvénients de cette balise est qu’elle n’est pas reconnue correctement par certains navigateurs (Internet Explorer pour ne pas le nommer) et que chaque navigateur ne gère en natif que certains formats de vidéos.
Son avantage principal quant à lui est de bénéficier de la prise en charge native de vidéos dans les navigateur et donc de se passer de l’utilisation de Flash et (...) -
Use, discuss, criticize
13 avril 2011, parTalk to people directly involved in MediaSPIP’s development, or to people around you who could use MediaSPIP to share, enhance or develop their creative projects.
The bigger the community, the more MediaSPIP’s potential will be explored and the faster the software will evolve.
A discussion list is available for all exchanges between users. -
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
Sur d’autres sites (4967)
-
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
-
-
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
-
-
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.


Syndiquer tout le site
