Recherche avancée
Médias (1)
-
Richard Stallman et le logiciel libre
19 octobre 2011, par
Mis à jour : Mai 2013
Langue : français
Type : Texte
Autres articles (28)
-
ANNEXE : Les plugins utilisés spécifiquement pour la ferme
5 mars 2010, parLe site central/maître de la ferme a besoin d’utiliser plusieurs plugins supplémentaires vis à vis des canaux pour son bon fonctionnement. le plugin Gestion de la mutualisation ; le plugin inscription3 pour gérer les inscriptions et les demandes de création d’instance de mutualisation dès l’inscription des utilisateurs ; le plugin verifier qui fournit une API de vérification des champs (utilisé par inscription3) ; le plugin champs extras v2 nécessité par inscription3 (...)
-
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 (...) -
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 (...)
Sur d’autres sites (2360)
-
Interview de l'auteur du Livre sur Piwik : Ronan Chardonneau
20 juillet 2012, par Piwik team — CommunityRonan Chardonneau, auteur de Piwik : L'alternative Open Source en web analytique aux éditions ENI, répond aux questions de Matthieu Aubry le créateur de Piwik !
Qu'est ce qui t'a poussé à écrire ce livre ?En fait il y a eu plusieurs choses. Tout d'abord je travaille au sein d'une structure un peu spéciale, notre agence web, inextcom travaille physiquement sur un plateau regroupant la plupart des acteurs de la ville de Nantes qui utilisent des logiciels libres. Toutes ses entreprises sont adhérentes d'une association qui s'appelle Alliance Libre. Quand je suis arrivé au sein de cette structure j'étais le seul à venir du monde du webmarketing. Le webmarketing tourne beaucoup autour de Google du coup je n'étais pas forcément vu d'un très bon oeil. Du coup j'ai voulu m'ouvrir sur ce qui se passait en dehors de Google Analytics est c'est ainsi que j'ai découvert Piwik. J'ai pas mal accroché sur cette technologie car elle est très intuitive.
Je me suis penché sur cette solution et ai décidé de la proposer en tant que formation. Quelques mois après son apparition dans notre catalogue de formation nous avons été contacté par un grand compte français pour donner un formation. J'avais vraiment à cœur de fournir une formation de qualité, en un week end mon support de cours avait dépassé les 50 pages. Je suis arrivé le lundi matin au travail et j'ai dit, les gars on va écrire un livre sur Piwik. J'ai regardé ce qui s'était déjà fait à droite à gauche et il n'y avait qu'un seul livre au monde semble t il écrit sur le sujet. Je me suis dit qu'il pouvait être intéressant de démocratiser l'outil… et au revoir jolis petits week end et bonjour les nuits blanches :)
Je voulais également être l'un des premiers auteurs sur cette solution car trop souvent ces ouvrages sont écrits par des anciens ingénieurs ou développeurs qui ont ensuite basculé dans le monde du marketing. Dans mon cas c'est le contraire je viens du marketing et ai basculé dans l'informatique, du coup ma vision du logiciel est purement orienté sur la façon dont je vais pouvoir extraire les informations pour mon analyse et non pas l'ensemble des fonctionnalités qui ont été développées pour le logiciel.
Combien de temps ce projet de livre Piwik a t'il pris ?
En fait j'adore écrire, et j'ai eu l'écriture plutôt facile pour ce livre. Le temps me manquait du coup j'ai décidé de l'écrire avec l'un de mes collègues : Germain Butrot. Le plus pénible dans l'écriture est que nous ne sommes pas développeurs du coup on a perdu pas mal de temps sur des soucis d'installation. Je dirai que rédiger ce livre nous a pris deux mois de travail.
Combien de clients as tu introduits à Piwik ?
Pas énormément, en fait les clients ont déjà fait leur choix de cette solution avant de s'engager chez nous, simplement qu'ils ne savent pas l'installer, le configurer, gérer la base de données etc. En fait il y a les clients qui n'ont pas encore réalisé oh combien la confidentialité de leurs données est critique et qu'il est dangereux de les confier à des tiers, ce qui représente 97% des sites Internet. Les 3% restants sont des entreprises qui en effet souhaitent se rapprocher au maximum du risque 0 en ce qui concerne la confidentialité des données. Nous introduisons la plupart de nos clients à Piwik, cependant ces derniers ont au final le choix entre une solution gratuite que tout le monde utilise et un hébergement de données payant pour atteindre un niveau de sécurité qu'ils ne considèrent pas comme critique.
Ronan séance de dédicaces
Le web analytique étant une discipline peu enseignée en France, le plus gros du travail est de faire réaliser aux webmasters que la notion de confidentialité est extrêmement importante. Je pense sincèrement que de plus en plus d'utilisateurs migreront sur des solutions telles que Piwik, tout simplement parce que le web analytique est une discipline en développement et que l'on commence à récupérer des données de plus en plus précieuses, il va donc falloir commencer à les protéger au maximum.
Si tu avais le droit à un vœu, quelle serait la nouvelle fonctionnalité qui te plairait le plus dans Piwik ?
Bonne question, en fait je pense qu'il y en a deux, personnellement je souhaiterais que l'on puisse créer les rapports de son choix en sélectionnant uniquement les données désirées. Cependant je pense que la fonctionnalité qui ferait beaucoup de bien pour la démocratisation de Piwik serait de pouvoir uniquement insérer le tagging dans les pages pour que Piwik commence à récolter les données. C'est principalement ce que je décris dans le livre, l'installation de Piwik est encore assez technique pour des personnes qui n'y connaissent rien. Les gens n'ayant pas encore saisi l'importance du web analytique sont à la recherche d'un outil qui en peu d'efforts peu être installé.
Tu as beaucoup d’expérience en web marketing. Que nous conseilles tu pour le futur en terme de Marketing pour Piwik ?
Je pense que Piwik a un potentiel énorme tout comme la plupart des projets open source populaires. Le problème c'est que ces projets ne savent pas encore communiquer auprès des personnes spécialisées dans le marketing. Le concept de l'open source n'est pas du coup connu du monde du marketing. Ce qui fait que lorsqu'un projet open source débarque sur le marché on a l'impression que seuls des personnes avec des connaissances en développement peuvent contribuer à ce projet alors qu'il existe énormément de missions que des personnes du marketing peuvent occuper au sein d'un tel projet : traduction, réalisation de bannières publicitaires, réalisation de pages de contenu pour en faire la promotion, remontée de fonctions importantes à intégrer etc
De tous les projets Open Source que je connais je trouve que le CMS WordPress s'en sort le mieux, l'outil est très facile à prendre en main, assez intuitif, du coup nombreux sont les personnes du marketing a s'être familiarisé avec l'outil et à en faire des retours pour des développements de modules, de templates etc au final la communauté WordPress est énorme et le nombre de plugin impressionnant.
Pour Piwik je pense qu'il pourrait être intéressant d'interroger des utilisateurs influents dans le monde du web analytique, de les inviter à utiliser Piwik et de nous faire un retour sur les fonctionnalités éventuelles à installer.
Le livre sera t-il traduit ?Le livre devrait être traduit en espagnol et disponible sur ce marché d'ici 6 mois. Concernant les autres langues je suis actuellement à la recherche de traducteurs dans toutes les autres langues. Je suis prêt à céder mes droits de traduction à un prix modique, ce qui m'intéresse avant tout c'est la démocratisation de l'outil. Aussi n'hésitez pas à me faire si vous êtes volontaire ou avez des personnes volontaires dans votre entourage.
Y aura t-il une version 2 du livre ?
Très certainement une version avancée du livre verra le jour dans les prochaines années, tout dépend principalement des retours qui me seront fait par rapport à cet ouvrage, les demandes de personnalisation de code dont on m'aura fait la demande, le développement de Piwik…
Merci Ronan pour ton travail de démocratisation sur Piwik, ton livre va vraiment permettre au projet de trouver une nouvelle cible en France… et on espère voir une Version 2 du livre dans quelques mois ! Je te souhate de bonnes ventes pour le livre et bonne contination pour tous tes projets.
Le livre est en vente sur la FNAC, Amazon.fr, le site de l'éditeur.
A voir aussi : Grand Jeu Concours 10 Livres Piwik à gagner !
-
Video streaming error : Uncaught (in promise) NotSupportedError : Failed to load because no supported source was found
18 septembre 2024, par AizenHere is my problem : I have one video src 1080p (on the frontend). On the frontend, I send this video-route to the backend :


const req = async()=>{try{const res = await axios.get('/catalog/item',{params:{SeriesName:seriesName}});return {data:res.data};}catch(err){console.log(err);return false;}}const fetchedData = await req();-On the backend i return seriesName.Now i can make a full path,what the video is,and where it is,code:


const videoUrl = 'C:/Users/arMori/Desktop/RedditClone/reddit/public/videos';console.log('IT VideoURL',videoUrl);


const selectedFile = `${videoUrl}/${fetchedData.data.VideoSource}/${seriesName}-1080p.mp4`
console.log(`ITS'S SELECTED FILE: ${selectedFile}`);


Ok, I have my src 1080p, now is the time to send it to the backend :


const response = await axios.post('/videoFormat', {videoUrl:selectedFile})console.log('Это консоль лог путей: ',response.data);const videoPaths = response.data;


Backend takes it and FFMpqg makes two types of resolution,720p and 480p,save it to the temp storage on backend, and then returns two routes where these videos stores


async videoUpload(videoUrl:string){try{const tempDir = C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp;const inputFile = videoUrl;console.log('VIDEOURL: ',videoUrl);


const outputFiles = [];
 
 await this.createDirectories(tempDir); 
 outputFiles.push(await this.convertVideo(inputFile, '1280x720', '720p.mp4'));
 outputFiles.push(await this.convertVideo(inputFile, '854x480', '480p.mp4'));
 console.log('OUTUPT FILES SERVICE: ',outputFiles);
 
 return outputFiles;

 }catch(err){
 console.error('VideoFormatterService Error: ',err);
 
 }
}

private convertVideo(inputPath:string,resolution:string,outputFileName:string):Promise<string>{
 const temp = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp`;
 return new Promise(async(resolve,reject)=>{
 const height = resolution.split('x')[1];
 console.log('HIEGHT: ',height);
 
 const outputDir = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp/${height}p`;
 const outputPath = join(outputDir, outputFileName);
 const isExists = await fs.access(outputPath).then(() => true).catch(() => false);
 if(isExists){ 
 console.log(`File already exists: ${outputPath}`);
 return resolve(outputPath)
 };
 ffmpeg(inputPath)
 .size(`${resolution}`)
 .videoCodec('libx264') // Кодек H.264
 .audioCodec('aac') 
 .output(outputPath)
 .on('end',()=>resolve(outputPath))
 .on('error',(err)=>reject(err))
 .run()
 
 })
}

private async createDirectories(temp:string){
 try{
 const dir720p = `${temp}/720p`;
 const dir480p = `${temp}/480p`;
 const dir720pExists = await fs.access(dir720p).then(() => true).catch(() => false);
 const dir480pExists = await fs.access(dir480p).then(() => true).catch(() => false);
 if(dir720pExists && dir480pExists){
 console.log('FILES ALIVE');
 return;
 }
 if (!dir720pExists) {
 await fs.mkdir(dir720p, { recursive: true });
 console.log('Папка 720p создана');
 }
 
 if (!dir480pExists) {
 await fs.mkdir(dir480p, { recursive: true });
 console.log('Папка 480p создана');
 }
 } catch (err) {
 console.error('Ошибка при создании директорий:', err);
 }
}
</string>

Continue frontentd code :


let videoPath;

if (quality === '720p') {
 videoPath = videoPaths[0];
} else if (quality === '480p') {
 videoPath = videoPaths[1];
}

if (!videoPath) {
 console.error('Video path not found!');
 return;
}

// Получаем видео по его пути
console.log('VIDEOPATH LOG: ',videoPath);
 
const videoRes = await axios.get('/videoFormat/getVideo', { 
 params: { path: videoPath } ,
 headers: { Range: 'bytes=0-' },
 responseType: 'blob'
 });
 console.log('Video fetched: ', videoRes);
 const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });
 const videoURL = URL.createObjectURL(videoBlob);
 return videoURL;
 /* console.log('Видео успешно загружено:', response.data); */
 } catch (error) {
 console.error('Ошибка при загрузке видео:', error);
 }
}


Here I just choose one of the route and make a new GET request (VideoRes), now in the controller in the backend, I'm trying to do a video streaming :


@Public()
 @Get('/getVideo')
 async getVideo(@Query('path') videoPath:string,@Req() req:Request,@Res() res:Response){
 try {
 console.log('PATH ARGUMENT: ',videoPath);
 console.log('VIDEOPATH IN SERVICE: ',videoPath);
 const videoSize = (await fs.stat(videoPath)).size;
 const CHUNK_SIZE = 10 ** 6;
 const range = req.headers['range'] as string | undefined;
 if (!range) {
 return new ForbiddenException('Range не найденно');
 }
 const start = Number(range.replace(/\D/g,""));
 const end = Math.min(start + CHUNK_SIZE,videoSize - 1);

 const contentLength = end - start + 1;
 const videoStream = fsSync.createReadStream(videoPath, { start, end });
 const headers = {
 'Content-Range':`bytes ${start}-${end}/${videoSize}`,
 'Accept-Ranges':'bytes',
 'Content-Length':contentLength,
 'Content-Type':'video/mp4'
 }
 
 res.writeHead(206,headers);

 // Передаем поток в ответ
 videoStream.pipe(res);
 

 // Если возникнет ошибка при стриминге, логируем ошибку
 videoStream.on('error', (error) => {
 console.error('Ошибка при чтении видео:', error);
 res.status(500).send('Ошибка при чтении видео');
 });
 } catch (error) {
 console.error('Ошибка при обработке запросов:', error);
 return res.status(400).json({ message: 'Ошибка при обработке getVideo запросов' });
 }
 }


Send to the frontend


res.writeHead(206,headers);


In the frontend, I make blob url for video src and return it


const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });const videoURL = URL.createObjectURL(videoBlob);return videoURL;


And assign src to the video :


useVideo(seriesName,quality).then(src => {
 if (src) {
 console.log('ITS VIDEOLOGISC GOIDA!');
 if(!playRef.current) return;
 
 const oldURL = playRef.current.src;
 if (oldURL && oldURL.startsWith('blob:')) {
 URL.revokeObjectURL(oldURL);
 }
 playRef.current.pause();
 playRef.current.src = '';
 setQuality(quality);
 console.log('SRC: ',src);
 
 playRef.current.src = src;
 playRef.current.load();
 console.log('ITS VIDEOURL GOIDA!');
 togglePlayPause();
 }
 })
 .catch(err => console.error('Failed to fetch video', err));


But the problem is :




Vinland-Saga:1 Uncaught (in promise) NotSupportedError : Failed to load because no supported source was found




And I don't know why...


I tried everything, but I don't understand why src is incorrect..


-
Video streamign with FFMpeg and Nest.js+Next.js
17 septembre 2024, par AizenHere is my problem : I have one video src 1080p (on the frontend). On the frontend, I send this video-route to the backend :


const req = async()=>{try{const res = await axios.get('/catalog/item',{params:{SeriesName:seriesName}});return {data:res.data};}catch(err){console.log(err);return false;}}const fetchedData = await req();-On the backend i return seriesName.Now i can make a full path,what the video is,and where it is,code:


const videoUrl = 'C:/Users/arMori/Desktop/RedditClone/reddit/public/videos';console.log('IT VideoURL',videoUrl);


const selectedFile = `${videoUrl}/${fetchedData.data.VideoSource}/${seriesName}-1080p.mp4`
console.log(`ITS'S SELECTED FILE: ${selectedFile}`);


Ok, I have my src 1080p, now is the time to send it to the backend :


const response = await axios.post('/videoFormat', {videoUrl:selectedFile})console.log('Это консоль лог путей: ',response.data);const videoPaths = response.data;


Backend takes it and FFMpqg makes two types of resolution,720p and 480p,save it to the temp storage on backend, and then returns two routes where these videos stores


async videoUpload(videoUrl:string){try{const tempDir = C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp;const inputFile = videoUrl;console.log('VIDEOURL: ',videoUrl);


const outputFiles = [];
 
 await this.createDirectories(tempDir); 
 outputFiles.push(await this.convertVideo(inputFile, '1280x720', '720p.mp4'));
 outputFiles.push(await this.convertVideo(inputFile, '854x480', '480p.mp4'));
 console.log('OUTUPT FILES SERVICE: ',outputFiles);
 
 return outputFiles;

 }catch(err){
 console.error('VideoFormatterService Error: ',err);
 
 }
}

private convertVideo(inputPath:string,resolution:string,outputFileName:string):Promise<string>{
 const temp = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp`;
 return new Promise(async(resolve,reject)=>{
 const height = resolution.split('x')[1];
 console.log('HIEGHT: ',height);
 
 const outputDir = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp/${height}p`;
 const outputPath = join(outputDir, outputFileName);
 const isExists = await fs.access(outputPath).then(() => true).catch(() => false);
 if(isExists){ 
 console.log(`File already exists: ${outputPath}`);
 return resolve(outputPath)
 };
 ffmpeg(inputPath)
 .size(`${resolution}`)
 .videoCodec('libx264') // Кодек H.264
 .audioCodec('aac') 
 .output(outputPath)
 .on('end',()=>resolve(outputPath))
 .on('error',(err)=>reject(err))
 .run()
 
 })
}

private async createDirectories(temp:string){
 try{
 const dir720p = `${temp}/720p`;
 const dir480p = `${temp}/480p`;
 const dir720pExists = await fs.access(dir720p).then(() => true).catch(() => false);
 const dir480pExists = await fs.access(dir480p).then(() => true).catch(() => false);
 if(dir720pExists && dir480pExists){
 console.log('FILES ALIVE');
 return;
 }
 if (!dir720pExists) {
 await fs.mkdir(dir720p, { recursive: true });
 console.log('Папка 720p создана');
 }
 
 if (!dir480pExists) {
 await fs.mkdir(dir480p, { recursive: true });
 console.log('Папка 480p создана');
 }
 } catch (err) {
 console.error('Ошибка при создании директорий:', err);
 }
}
</string>

Continue frontentd code :


let videoPath;

if (quality === '720p') {
 videoPath = videoPaths[0];
} else if (quality === '480p') {
 videoPath = videoPaths[1];
}

if (!videoPath) {
 console.error('Video path not found!');
 return;
}

// Получаем видео по его пути
console.log('VIDEOPATH LOG: ',videoPath);
 
const videoRes = await axios.get('/videoFormat/getVideo', { 
 params: { path: videoPath } ,
 headers: { Range: 'bytes=0-' },
 responseType: 'blob'
 });
 console.log('Video fetched: ', videoRes);
 const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });
 const videoURL = URL.createObjectURL(videoBlob);
 return videoURL;
 /* console.log('Видео успешно загружено:', response.data); */
 } catch (error) {
 console.error('Ошибка при загрузке видео:', error);
 }
}


Here I just choose one of the route and make a new GET request (VideoRes), now in the controller in the backend, I'm trying to do a video streaming :


@Public()
 @Get('/getVideo')
 async getVideo(@Query('path') videoPath:string,@Req() req:Request,@Res() res:Response){
 try {
 console.log('PATH ARGUMENT: ',videoPath);
 console.log('VIDEOPATH IN SERVICE: ',videoPath);
 const videoSize = (await fs.stat(videoPath)).size;
 const CHUNK_SIZE = 10 ** 6;
 const range = req.headers['range'] as string | undefined;
 if (!range) {
 return new ForbiddenException('Range не найденно');
 }
 const start = Number(range.replace(/\D/g,""));
 const end = Math.min(start + CHUNK_SIZE,videoSize - 1);

 const contentLength = end - start + 1;
 const videoStream = fsSync.createReadStream(videoPath, { start, end });
 const headers = {
 'Content-Range':`bytes ${start}-${end}/${videoSize}`,
 'Accept-Ranges':'bytes',
 'Content-Length':contentLength,
 'Content-Type':'video/mp4'
 }
 
 res.writeHead(206,headers);

 // Передаем поток в ответ
 videoStream.pipe(res);
 

 // Если возникнет ошибка при стриминге, логируем ошибку
 videoStream.on('error', (error) => {
 console.error('Ошибка при чтении видео:', error);
 res.status(500).send('Ошибка при чтении видео');
 });
 } catch (error) {
 console.error('Ошибка при обработке запросов:', error);
 return res.status(400).json({ message: 'Ошибка при обработке getVideo запросов' });
 }
 }


Send to the frontend


res.writeHead(206,headers);


In the frontend, I make blob url for video src and return it


const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });const videoURL = URL.createObjectURL(videoBlob);return videoURL;


And assign src to the video :


useVideo(seriesName,quality).then(src => {
 if (src) {
 console.log('ITS VIDEOLOGISC GOIDA!');
 if(!playRef.current) return;
 
 const oldURL = playRef.current.src;
 if (oldURL && oldURL.startsWith('blob:')) {
 URL.revokeObjectURL(oldURL);
 }
 playRef.current.pause();
 playRef.current.src = '';
 setQuality(quality);
 console.log('SRC: ',src);
 
 playRef.current.src = src;
 playRef.current.load();
 console.log('ITS VIDEOURL GOIDA!');
 togglePlayPause();
 }
 })
 .catch(err => console.error('Failed to fetch video', err));


But the problem is :




Vinland-Saga:1 Uncaught (in promise) NotSupportedError : Failed to load because no supported source was found




And I don't know why...


I tried everything, but I don't understand why src is incorrect..


Syndiquer tout le site
