Recherche avancée
Autres articles (112)
-
Personnaliser en ajoutant son logo, sa bannière ou son image de fond
5 septembre 2013, parCertains thèmes prennent en compte trois éléments de personnalisation : l’ajout d’un logo ; l’ajout d’une bannière l’ajout d’une image de fond ;
-
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 -
MediaSPIP 0.1 Beta version
25 avril 2011, parMediaSPIP 0.1 beta is the first version of MediaSPIP proclaimed as "usable".
The zip file provided here only contains the sources of MediaSPIP in its standalone version.
To get a working installation, you must manually install all-software dependencies on the server.
If you want to use this archive for an installation in "farm mode", you will also need to proceed to other manual (...)
Sur d’autres sites (14674)
-
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..


-
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 !
Syndiquer tout le site
