Recherche avancée
Médias (1)
-
SPIP - plugins - embed code - Exemple
2 septembre 2013, par
Mis à jour : Septembre 2013
Langue : français
Type : Image
Autres articles (106)
-
Qualité du média après traitement
21 juin 2013, parLe bon réglage du logiciel qui traite les média est important pour un équilibre entre les partis ( bande passante de l’hébergeur, qualité du média pour le rédacteur et le visiteur, accessibilité pour le visiteur ). Comment régler la qualité de son média ?
Plus la qualité du média est importante, plus la bande passante sera utilisée. Le visiteur avec une connexion internet à petit débit devra attendre plus longtemps. Inversement plus, la qualité du média est pauvre et donc le média devient dégradé voire (...) -
Participer à sa traduction
10 avril 2011Vous pouvez nous aider à améliorer les locutions utilisées dans le logiciel ou à traduire celui-ci dans n’importe qu’elle nouvelle langue permettant sa diffusion à de nouvelles communautés linguistiques.
Pour ce faire, on utilise l’interface de traduction de SPIP où l’ensemble des modules de langue de MediaSPIP sont à disposition. ll vous suffit de vous inscrire sur la liste de discussion des traducteurs pour demander plus d’informations.
Actuellement MediaSPIP n’est disponible qu’en français et (...) -
Les tâches Cron régulières de la ferme
1er décembre 2010, parLa gestion de la ferme passe par l’exécution à intervalle régulier de plusieurs tâches répétitives dites Cron.
Le super Cron (gestion_mutu_super_cron)
Cette tâche, planifiée chaque minute, a pour simple effet d’appeler le Cron de l’ensemble des instances de la mutualisation régulièrement. Couplée avec un Cron système sur le site central de la mutualisation, cela permet de simplement générer des visites régulières sur les différents sites et éviter que les tâches des sites peu visités soient trop (...)
Sur d’autres sites (15783)
-
FFMPEG ERROR on streaming video generated from MediaRecorder API on RTMP url
20 février 2024, par Prince MishraRef : https://www.mux.com/blog/the-state-of-going-live-from-a-browser


The above blog states my problem in detail and presented a solution also.
I am trying to implement the solution which is using socketio


Here is the description of the problem :


I want to capture the video and audio from the browser using


navigator.mediaDevices
 .getUserMedia({ video: true, audio: true })


and i am using the


const options = {
 mimeType: "video/webm;codecs=vp8",
};
const mediaRecorder = new MediaRecorder(stream, options);


to record the video chunk by chunk from the stream given by getusermedia and then using the socket io to send the video to the backend. Where I am using the ffmpeg to stream the chunks on rtmp url.


I am using the following ffmpeg commands :


const { spawn } = require('child_process');

const ffmpegProcess = spawn('ffmpeg', [
 '-i', 'pipe:0',
 '-c:v', 'libx264',
 '-preset', 'veryfast',
 '-tune', 'zerolatency',
 '-c:a', 'aac',
 '-ar', '44100',
 '-f', 'flv',
 rtmpurl
]);


And I am getting the following errors :








Can anyone help me how to fix this. I am new to FFmpeg.


Here is the complete frontend and Backend code :


Frontend (App.jsx) :


import { useEffect } from "react";
import "./App.css";
import io from "socket.io-client";

function App() {
 let video;

 useEffect(() => {
 video = document.getElementById("video");
 }, []);

 const socket = io("http://localhost:3050");
 socket.on("connect", () => {
 console.log("Connected to server");
 });

 let stream;
 navigator.mediaDevices
 .getUserMedia({ video: true, audio: true })
 .then((strea) => {
 video.srcObject = strea;
 stream = strea;
 const options = {
 mimeType: "video/webm;codecs=vp8",
 };
 const mediaRecorder = new MediaRecorder(stream, options);
 console.log(mediaRecorder);
 let chunks = [];

 mediaRecorder.ondataavailable = function (e) {
 chunks.push(e.data);
 console.log(e.data);
 };
 mediaRecorder.onstop = function (e) {
 const blob = new Blob(chunks, { type: "video/webm;codecs=vp8" });
 console.log("emitted");
 socket.emit("videoChunk", blob);
 chunks = [];
 // const videoURL = URL.createObjectURL(blob);
 // const a = document.createElement('a');
 // a.href = videoURL;
 // a.download = 'video.mp4';
 // a.click();
 window.URL.revokeObjectURL(videoURL);
 };
 mediaRecorder.start();
 setInterval(() => {
 mediaRecorder.stop();
 mediaRecorder.start();
 }, 2000);
 })
 .catch((error) => {
 console.error("Error accessing camera:", error);
 });

 // Capture video after 10 seconds

 return (
 <>
 <video width="640" height="480" autoplay="autoplay"></video>
 <button>Capture</button>
 >
 );
}

export default App;


Backend Code :


const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const { spawn } = require('child_process');

const app = express();

const server = http.createServer(app);
const io = socketIo(server, {
 cors: {
 origin: "*",
 methods: ["GET", "POST"]
 }, maxhttpBufferSize: 1e8
 });

 const rtmpurl = 'rtmp://localhost/live/test';

io.on('connection', (socket) => {
 console.log('A user connected');

 const ffmpegProcess = spawn('ffmpeg', [
 '-i', 'pipe:0',
 '-c:v', 'libx264',
 '-preset', 'veryfast',
 '-tune', 'zerolatency',
 '-c:a', 'aac',
 '-ar', '44100',
 '-f', 'flv',
 rtmpurl
 ]);


 ffmpegProcess.stdin.on('error', (e) => {
 console.log(e);
 });
 
 ffmpegProcess.stderr.on('data', (data) => {
 console.log(data.toString());
 });

 ffmpegProcess.on('close', (code) => {
 console.log(`child process exited with code ${code}`);
 });


 socket.on('videoChunk', (chunk) => {
 console.log(chunk)
 ffmpegProcess.stdin.write(chunk);

 });

 socket.on('disconnect', () => {
 console.log('User disconnected');
 ffmpegProcess.stdin.end();
 });
});

const PORT = process.env.PORT || 3050;

app.get('/test', (req, res) => {
 res.send('Hello from /test route!');
});


server.listen(PORT, () => {
 console.log(`Server is running on port ${PORT}`);
});


-
Unable to read video streams on FFMPEG and send it to youTube RTMP server
29 août 2024, par Rahul BundeleI'm trying to send two video stream from browser as array buffer (webcam and screen share video) to server via Web RTC data channels and want ffmpeg to add webcam as overlay on screen share video and send it to youtube RTMP server, the RTC connections are established and server does receives buffer , Im getting error in Ffmpeg..error is at bottom , any tips on to add overlay and send it to youtube RTMP server would be appreciated.


Client.js


`
const webCamStream = await navigator.mediaDevices.getUserMedia( video : true ,audio:true ) ;
const screenStream = await navigator.mediaDevices.getDisplayMedia( video : true ) ;


const webcamRecorder = new MediaRecorder(webCamStream, { mimeType: 'video/webm' });
webcamRecorder.ondataavailable = (event) => {
 if (event.data.size > 0 && webcamDataChannel.readyState === 'open') {
 const reader = new FileReader();
 reader.onload = function () {
 const arrayBuffer = this.result;
 webcamDataChannel.send(arrayBuffer);
 };
 reader.readAsArrayBuffer(event.data);
 }
};
webcamRecorder.start(100); // Adjust the interval as needed

// Send screen share stream data
const screenRecorder = new MediaRecorder(screenStream, { mimeType: 'video/webm' });
screenRecorder.ondataavailable = (event) => {
 if (event.data.size > 0 && screenDataChannel.readyState === 'open') {
 const reader = new FileReader();
 reader.onload = function () {
 const arrayBuffer = this.result;
 screenDataChannel.send(arrayBuffer);
 };
 reader.readAsArrayBuffer(event.data);
 }
};
screenRecorder.start(100); 


`


Server.js


const youtubeRTMP = 'rtmp://a.rtmp.youtube.com/live2/youtube key';

// Create PassThrough streams for webcam and screen
const webcamStream = new PassThrough();
const screenStream = new PassThrough();

// FFmpeg arguments for processing live streams
const ffmpegArgs = [
 '-re',
 '-i', 'pipe:3', // Webcam input via pipe:3
 '-i', 'pipe:4', // Screen share input via pipe:4
 '-filter_complex', // Complex filter for overlay
 '[0:v]scale=320:240[overlay];[1:v][overlay]overlay=10:10[out]',
 '-map', '[out]', // Map the output video stream
 '-c:v', 'libx264', // Use H.264 codec for video
 '-preset', 'ultrafast', // Use ultrafast preset for low latency
 '-crf', '25', // Set CRF for quality/size balance
 '-pix_fmt', 'yuv420p', // Pixel format for compatibility
 '-c:a', 'aac', // Use AAC codec for audio
 '-b:a', '128k', // Set audio bitrate
 '-f', 'flv', // Output format (FLV for RTMP)
 youtubeRTMP // Output to YouTube RTMP server
];

// Spawn the FFmpeg process
const ffmpegProcess = spawn('ffmpeg', ffmpegArgs, {
 stdio: ['pipe', 'pipe', 'pipe', 'pipe', 'pipe']
});

// Pipe the PassThrough streams into FFmpeg
webcamStream.pipe(ffmpegProcess.stdio[3]);
screenStream.pipe(ffmpegProcess.stdio[4]);

ffmpegProcess.on('close', code => {
 console.log(`FFmpeg process exited with code ${code}`);
});

ffmpegProcess.on('error', error => {
 console.error(`FFmpeg error: ${error.message}`);
});

const handleIncomingData = (data, stream) => {
 const buffer = Buffer.from(data);
 stream.write(buffer);
};


the server gets the video buffer via webrtc data channels


pc.ondatachannel = event => {
 const dataChannel = event.channel;
 pc.dc = event.channel;
 pc.dc.onmessage = event => {
 // Spawn the FFmpeg process
 // console.log('Message from client:', event.data);
 const data = event.data;

 if (dataChannel.label === 'webcam') {
 handleIncomingData(data, webcamStream);
 } else if (dataChannel.label === 'screen') {
 handleIncomingData(data, screenStream);
 }
 
 };
 pc.dc.onopen = e=>{
 // recHead.innerText = "Waiting for user to send files"
 console.log("channel opened!")
 }
 };


Im getting this error in ffmpeg


[in#0 @ 0000020e585a1b40] Error opening input: Bad file descriptor
Error opening input file pipe:3.
Error opening input files: Bad file descriptor


-
Issue with creating Video files from Binary files
22 septembre 2022, par user20057686We have a bunch of binary files that represent Video data.
This is how the binary files were created :


- 

- Used MediaRecorder from a React application to capture the browser window.
To capture the screen stream we used (Navigator.)MediaDevices.getDisplayMedia() API
- Each video is recorded for 1-second duration
- This data is then encoded with base64 and sent through a websocket. The server decodes the base64 string and stores the binary data in a file (without any extension)








So we now have a bunch of binary files each containing 1 second worth of video data.


The issue is, we are not able to convert all the binary files back to a single video.


- 

-
We tried using ffmpeg


copy /b * merged.


ffmpeg -i merged merged.mp4






Basically first merging all the binary files and converting to mp4. It didn't work. The resulting video duration is not equal to the (number_of_files) in seconds.


- 

-
We also tried converting individual chunks with ffmpeg but we get the below error :


[h264 @ 000001522dc74b80] [error] non-existing PPS 0 referenced
[h264 @ 000001522dc74b80] [error] non-existing PPS 0 referenced
[h264 @ 000001522dc74b80] [error] decode_slice_header error
[h264 @ 000001522dc74b80] [error] no frame !
I can provide the complete logs if needed.


-
Next thing we tried was to use MoviePy library in Python. We programmatically concatenated the files and saved them as WebM and imported it into MoviePy as a Video.








In all the above approaches, we couldn't get the full video.


Syndiquer tout le site
