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 (50)
-
Le plugin : Podcasts.
14 juillet 2010, parLe problème du podcasting est à nouveau un problème révélateur de la normalisation des transports de données sur Internet.
Deux formats intéressants existent : Celui développé par Apple, très axé sur l’utilisation d’iTunes dont la SPEC est ici ; Le format "Media RSS Module" qui est plus "libre" notamment soutenu par Yahoo et le logiciel Miro ;
Types de fichiers supportés dans les flux
Le format d’Apple n’autorise que les formats suivants dans ses flux : .mp3 audio/mpeg .m4a audio/x-m4a .mp4 (...) -
Multilang : améliorer l’interface pour les blocs multilingues
18 février 2011, parMultilang est un plugin supplémentaire qui n’est pas activé par défaut lors de l’initialisation de MediaSPIP.
Après son activation, une préconfiguration est mise en place automatiquement par MediaSPIP init permettant à la nouvelle fonctionnalité d’être automatiquement opérationnelle. Il n’est donc pas obligatoire de passer par une étape de configuration pour cela. -
Installation en mode ferme
4 février 2011, parLe mode ferme permet d’héberger plusieurs sites de type MediaSPIP en n’installant qu’une seule fois son noyau fonctionnel.
C’est la méthode que nous utilisons sur cette même plateforme.
L’utilisation en mode ferme nécessite de connaïtre un peu le mécanisme de SPIP contrairement à la version standalone qui ne nécessite pas réellement de connaissances spécifique puisque l’espace privé habituel de SPIP n’est plus utilisé.
Dans un premier temps, vous devez avoir installé les mêmes fichiers que l’installation (...)
Sur d’autres sites (7605)
-
Streaming RTSP (AspNet 5 API, FFMPEG, Angular 10, videoJs)
27 octobre 2022, par MephistoDescription :


I have an API (ASP.Net 5) which connect to an IP Camera through RTSP. The camera send a h264 stream converted with ffmpeg as m3u8 stream which is returned to the angular client as follow :


public async Task<actionresult> GetCameraH264Stream()
{
 string deviceIp = "rtsp://[CAMERA_IP]/";
 string recordingUri = "rtsp://[USER:PASSWORD]@[CAMERA_IP]/axis-media/media.amp";
 
 string output = Path.Combine(Path.GetTempPath(), Guid.NewGuid() + ".m3u8");
 var mediaInfo = await FFmpeg.GetMediaInfo(recordingUri);

 var conversionResult = FFmpeg.Conversions.New()
 .AddStream(mediaInfo.Streams)
 .SetOutput(output)
 .Start();
 
 // Allow any Cors
 Response.Headers.Add("Access-Control-Allow-Origin", "*");
 Response.Headers.Add("Cache-Control", "no-cache");
 
 // Open the file, and read the stream to return to the client
 FileStreamResult result = new FileStreamResult(System.IO.File.Open(output, FileMode.Open, FileAccess.Read, FileShare.Read), "application/octet-stream");
 result.EnableRangeProcessing = true;
 return result;
}
</actionresult>

If I call this methods directly, the browser download a file, which I can read with VLC.


In my Angular app, I have this component :


app-vjs-player :


@Component({
 selector: 'app-vjs-player',
 template: '<video class="video-js" controls="controls" muted="muted" playsinline="playsinline" preload="none"> 
 </video>',
 encapsulation: ViewEncapsulation.None,
 })
export class VjsPlayerComponent implements OnInit, OnDestroy {
 @ViewChild('target', {static: true}) target: ElementRef;
 
 @Input() options: {
 fluid: boolean,
 aspectRatio: string,
 autoplay: boolean,
 sources: {
 src: string,
 type: string,
 }[],
 vhs: {
 overrideNative: true
 },
 };
 player: videojs.Player;

 constructor(
 private elementRef: ElementRef,
 ) { }

 ngOnInit() {
 // instantiate Video.js
 this.player = videojs(this.target.nativeElement, this.options, function onPlayerReady() {
 console.log('onPlayerReady', this);
 });
 
 }

 ngOnDestroy() {
 // destroy player
 if (this.player) {
 this.player.dispose();
 }
 }
}



This component is used like this :


TS :


playerOptions = {
 fluid: false,
 aspectRatio: "16:9",
 autoplay: false,
 sources: [{
 src: 'https://localhost:44311/api/GetCameraH264Stream',
 type: 'application/x-mpegURL',
 }],
}


HTML :





Problem


All this seems to work pretty well, until vjs throw this error when the api return the stream :




ERROR : (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported




When I open the network dev tools, the request status is "Canceled", but I don't know if videojs cancel it because the filestreal can't be read, or if it is because of the way the API return the stream.


Any idea ?


Source


Forwarding RTSP stream from IP Camera to Browser in ASP.NET Core






EDIT


- 

- I tried to limit the resolution and the bitrate but I can't configure the camera like that, there is other application using it. The camera do not have any streaming url allowing this configuration
- I have been able to get an image from my code after changing the content type of the api response. I changed :






FileStreamResult result = new FileStreamResult(System.IO.File.Open(output, FileMode.Open, FileAccess.Read, FileShare.Read), "application/octet-stream");


to


FileStreamResult result = new FileStreamResult(System.IO.File.Open(output, FileMode.Open, FileAccess.Read, FileShare.Read), "application/x-mpegURL");


With this the first packet is displayed, but the next requests are still canceled.


-
How to use ffmpeg to convert video into the audio format with nodejs and angular in web app
31 août 2021, par Amir ShahzadI want to convert the video into the audio format using ffmpeg in nodejs but I not know how I can implement it in the angular app with nodejs.


This is my nodejs code


const express = require('express');
 const ffmpeg = require('fluent-ffmpeg');
 const fileUpload = require('express-fileupload');
 const cors = require('cors')
 const app = express();

 app.use(fileUpload({
 useTempFiles: true,
 tempFileDir: 'temp/'
 }));
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cors({ origin: 'http://localhost:4200' }));

 ffmpeg.setFfmpegPath('/usr/bin/ffmpeg');

 // Converting mp4 to audio
 app.post('/mp4tomp3', (req, res) => {
 res.contentType('video/avi');
 res.attachment('output.mp3');
 req.files.mp4.mv("temp/" + req.files.mp4.name , function(err) {
 if(err){
 res.sendStatus(500).send(err)
 }else{
 console.log("Fiel Uploaded Successfully.!");
 }
 });
 ffmpeg('temp/' + req.files.mp4.name)
 .toFormat('mp3')
 .on('end', function() {
 console.log('Done');
 })
 .on('error', function(err){
 console.log('An Error Occured' + err.message)
 })
 .pipe(res, {end: true})
 })

 app.listen(3000, () => {
 console.log('Server Start On Port 3000')
 })


This code is working good when I use index.html file in the nodejs app but its give an error while I remove index.html file and use angular app for frontend then it give error in nodejs mp4 not defined and name mv is not defined Please tell me how I can implement it using angular framework


This is my app.component.html file


<div class="container">
 <h1>Video Proccessing App</h1>
 <form>
 <input type="file" formcontrolname="mp4" />
 <input type="submit" value="Convert" />
 </form>
 </div>
 


This is my app.component.ts file


import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { VideoConversionService } from 'src/services/video-conversion.service';

 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {

 submitted =false;
 form! : FormGroup
 data:any


 constructor(private formBuilder: FormBuilder,
 private videoService: VideoConversionService){}


 creatForm(){
 this.form = this.formBuilder.group({
 mp4: ['', Validators.required],
 });
 }
 ngOnInit(): void {
 this.creatForm();

 }


 convertVideo(){
 this.submitted = true
 this.videoService.conversion(this.form.value).subscribe(res => {
 this.data = res;
 // console.log(this.data)
 //console.log(this.form.value)
 })
 }

 }


This is my service file for handling the backend api in my angular app


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
 providedIn: 'root'
})
export class VideoConversionService {

constructor(private httpClient: HttpClient) { }

conversion(data: any){
 return this.httpClient.post('http://localhost:3000/mp4tomp3', data)
}
}


This is Screenshot of chrome error




This is the screenshot of the nodejs app error while I click on the convert button




-
mp4 file upload issue in multer of node.js
20 mars 2021, par 이훈석I'm trying to upload mp4 file by using multer in node.js


(View)VideoUploadPage.js


import React, { useState } from "react";
import Axios from "axios";


function VideoUploadPage() {

const onDrop = (files) => {
 let formData = new FormData();
 const config = {
 header: { "content-type": "multipart/form-data" },
 };
 formData.append("file", files[0]);
 console.log(files);

 Axios.post("/api/video/uploadfiles", formData, config).then((response) => {
 if (response.data.success) {
 console.log(response.data);
 } else {
 alert("비디오 업로드를 실패 했습니다.");
 }
 });
 };

}


(Server)


video.js


const express = require("express");
const router = express.Router();
const multer = require("multer");
const path = require("path");
const ffmpeg = require("fluent-ffmpeg");



let storage = multer.diskStorage({
 destination: (req, file, cb) => {
 cb(null, "uploads/");
 },
 filename: (req, file, cb) => {
 cb(null, `${Date.now()}_${file.originalname}`);
 },
 fileFilter: (req, file, cb) => {
 const ext = path.extname(file.originalname);
 if (ext !== ".mp4") {
 return cb(res.status(400).end("only mp4 is allowed"), false);
 }
 cb(null, true);
 },
});

const upload = multer({ storage: storage }).single("file");

router.post("/uploadfiles", (req, res) => {
 upload(req, res, (err) => {
 if (err) {
 return res.json({ success: false, err });
 }
 return res.json({
 success: true,
 url: res.req.file.path,
 fileName: res.req.file.filename,
 });
 });
});


At the video.js destination : (req, file, cb) => 
cb(null, "uploads/")
 <----- I can check which file is going to upload with console.log(response.data), but there is no mp4 file in the "uploads" folder.


When I changed "uploads/" to my local directory path, mp4 file is on the uploads folder ....


ex : "C :// /uploads"


Any idea ?


Syndiquer tout le site
