Recherche avancée
Autres articles (100)
-
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 ;
-
MediaSPIP Core : La Configuration
9 novembre 2010, parMediaSPIP Core fournit par défaut trois pages différentes de configuration (ces pages utilisent le plugin de configuration CFG pour fonctionner) : une page spécifique à la configuration générale du squelettes ; une page spécifique à la configuration de la page d’accueil du site ; une page spécifique à la configuration des secteurs ;
Il fournit également une page supplémentaire qui n’apparait que lorsque certains plugins sont activés permettant de contrôler l’affichage et les fonctionnalités spécifiques (...) -
Encoding and processing into web-friendly formats
13 avril 2011, parMediaSPIP automatically converts uploaded files to internet-compatible formats.
Video files are encoded in MP4, Ogv and WebM (supported by HTML5) and MP4 (supported by Flash).
Audio files are encoded in MP3 and Ogg (supported by HTML5) and MP3 (supported by Flash).
Where possible, text is analyzed in order to retrieve the data needed for search engine detection, and then exported as a series of image files.
All uploaded files are stored online in their original format, so you can (...)
Sur d’autres sites (11505)
-
Socket.io client in js and server in Socket.io go doesn't send connected messege and data
24 mars 2023, par OmriHalifaI am using
ffmpegandsocket.ioand I have some issues. I'm trying to send a connection request to a server written in Go through React, but I'm unable to connect to it. I tried adding the events in useEffect and it's still not working, what should I do ? i attaching my code in js and in go :
main.go

package main

import (
 "log"

 "github.com/gin-gonic/gin"

 socketio "github.com/googollee/go-socket.io"
)

func main() {
 router := gin.New()

 server := socketio.NewServer(nil)

 server.OnConnect("/", func(s socketio.Conn) error {
 s.SetContext("")
 log.Println("connected:", s.ID())
 return nil
 })

 server.OnEvent("/", "notice", func(s socketio.Conn, msg string) {
 log.Println("notice:", msg)
 s.Emit("reply", "have "+msg)
 })

 server.OnEvent("/", "transcoded-video", func(s socketio.Conn, data string) {
 log.Println("transcoded-video:", data)
 })

 server.OnEvent("/", "bye", func(s socketio.Conn) string {
 last := s.Context().(string)
 s.Emit("bye", last)
 s.Close()
 return last
 })

 server.OnError("/", func(s socketio.Conn, e error) {
 log.Println("meet error:", e)
 })

 server.OnDisconnect("/", func(s socketio.Conn, reason string) {
 log.Println("closed", reason)
 })

 go func() {
 if err := server.Serve(); err != nil {
 log.Fatalf("socketio listen error: %s\n", err)
 }
 }()
 defer server.Close()

 if err := router.Run(":8000"); err != nil {
 log.Fatal("failed run app: ", err)
 }
}



App.js

import './App.css';
import { useEffect } from 'react';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
import { io } from 'socket.io-client'; 

function App() {
 const socket = io("http://localhost:8000",function() {
 // Send a message to the server when the client is connected
 socket.emit('clientConnected', 'Client has connected to the server!');
 })

 const ffmpegWorker = createFFmpeg({
 log: true
 })

 // Initialize FFmpeg when the component is mounted
 async function initFFmpeg() {
 await ffmpegWorker.load();
 }

 async function transcode(webcamData) {
 const name = 'record.webm';
 await ffmpegWorker.FS('writeFile', name, await fetchFile(webcamData));
 await ffmpegWorker.run('-i', name, '-preset', 'ultrafast', '-threads', '4', 'output.mp4');
 const data = ffmpegWorker.FS('readFile', 'output.mp4');
 
 // Set the source of the output video element to the transcoded video data
 const video = document.getElementById('output-video');
 video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
 
 // Remove the output.mp4 file from the FFmpeg virtual file system
 ffmpegWorker.FS('unlink', 'output.mp4');
 
 // Emit a "transcoded-video" event to the server with the transcoded video data
 socket.emit("transcoded-video", data.buffer)
 }
 
 

 let mediaRecorder;
 let chunks = [];
 
 // Request access to the user's camera and microphone and start recording
 function requestMedia() {
 const webcam = document.getElementById('webcam');
 navigator.mediaDevices.getUserMedia({ video: true, audio: true })
 .then(async (stream) => {
 webcam.srcObject = stream;
 await webcam.play();

 // Set up a MediaRecorder instance to record the video and audio
 mediaRecorder = new MediaRecorder(stream);

 // Add the recorded data to the chunks array
 mediaRecorder.ondataavailable = async (e) => {
 chunks.push(e.data);
 }

 // Transcode the recorded video data after the MediaRecorder stops
 mediaRecorder.onstop = async () => {
 await transcode(new Uint8Array(await (new Blob(chunks)).arrayBuffer()));

 // Clear the chunks array after transcoding
 chunks = [];

 // Start the MediaRecorder again after a 0 millisecond delay
 setTimeout(() => {
 mediaRecorder.start();
 
 // Stop the MediaRecorder after 3 seconds
 setTimeout(() => {
 mediaRecorder.stop();
 }, 500);
 }, 0);
 }

 // Start the MediaRecorder
 mediaRecorder.start();

 // Stop the MediaRecorder after 3 seconds
 setTimeout(() => {
 mediaRecorder.stop();
 }, 700);
 })
 }
 
 useEffect(() => {
 // Set up event listeners for the socket connection
 socket.on('/', function(){
 // Log a message when the client is connected to the server
 console.log("Connected to server!"); 
 });

 socket.on('transcoded-video', function(data){
 // Log the received data for debugging purposes
 console.log("Received transcoded video data:", data); 
 });

 socket.on('notice', function(data){
 // Emit a "notice" event back to the server to acknowledge the received data
 socket.emit("notice", "ping server!");
 });

 socket.on('bye', function(data){
 // Log the received data and disconnect from the server
 console.log("Server sent:", data); 
 socket.disconnect();
 });

 socket.on('disconnect', function(){
 // Log a message when the client is disconnected from the server
 console.log("Disconnected from server!"); 
 });
 }, [])

 return (
 <div classname="App">
 <div>
 <video muted="{true}"></video>
 <video autoplay="autoplay"></video>
 </div>
 <button>start streaming</button>
 </div>
 );
}

export default App;


What can i do to fix it ? thank you !!


-
How do i play an HLS stream when playlist.m3u8 file is constantly being updated ?
3 janvier 2021, par Adnan AhmedI am using MediaRecorder to record chunks of my live video in webm format from MediaStream and converting these chunks to .ts files on the server using ffmpeg and then updating my playlist.m3u8 file with this code :


function generateM3u8Playlist(fileDataArr, playlistFp, isLive, cb) {
 var durations = fileDataArr.map(function(fd) {
 return fd.duration;
 });
 var maxT = maxOfArr(durations);

 var meta = [
 '#EXTM3U',
 '#EXT-X-VERSION:3',
 '#EXT-X-MEDIA-SEQUENCE:0',
 '#EXT-X-ALLOW-CACHE:YES',
 '#EXT-X-TARGETDURATION:' + Math.ceil(maxT),
 ];

 fileDataArr.forEach(function(fd) {
 meta.push('#EXTINF:' + fd.duration.toFixed(2) + ',');
 meta.push(fd.fileName2);
 });

 if (!isLive) {
 meta.push('#EXT-X-ENDLIST');
 }

 meta.push('');
 meta = meta.join('\n');

 fs.writeFile(playlistFp, meta, cb);
}


Here
fileDataArrholds information for all the chunks that have been created.

After that i use this code to create a hls server :


var runStreamServer = (function(streamFolder) {
 var executed = false;
 return function(streamFolder) {
 if (!executed) {
 executed = true;
 var HLSServer = require('hls-server')
 var http = require('http')

 var server = http.createServer()
 var hls = new HLSServer(server, {
 path: '/stream', // Base URI to output HLS streams
 dir: 'C:\\Users\\Work\\Desktop\\live-stream\\webcam2hls\\videos\\' + streamFolder // Directory that input files are stored
 })
 console.log("We are going to stream from folder:" + streamFolder);
 server.listen(8000);
 console.log('Server Listening on Port 8000');
 }
 };
})();


The problem is that if i stop creating new chunks and then use the hls server link :

http://localhost:8000/stream/playlist.m3u8then the video plays in VLC but if i try to play during the recording it keeps loading the file but does not play. I want it to play while its creating new chunks and updating playlist.m3u8. The quirk ingenerateM3u8Playlistfunction is that it adds'#EXT-X-ENDLIST'to the playlist file after i have stopped recording.
The software is still in production so its a bit messy code. Thank you for any answers.

The client side that generates blobs is as follows :


var mediaConstraints = {
 video: true,
 audio:true
 };
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
 console.log('will start capturing and sending ' + (DT / 1000) + 's videos when you press start');
 var mediaRecorder = new MediaStreamRecorder(stream);

 mediaRecorder.mimeType = 'video/webm';

 mediaRecorder.ondataavailable = function(blob) {
 var count2 = zeroPad(count, 5);
 // here count2 just creates a blob number 
 console.log('sending chunk ' + name + ' #' + count2 + '...');
 send('/chunk/' + name + '/' + count2 + (stopped ? '/finish' : ''), blob);
 ++count;
 };
 }
// Here we have the send function which sends our blob to server:
 function send(url, blob) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', url, true);

 xhr.responseType = 'text/plain';
 xhr.setRequestHeader('Content-Type', 'video/webm');
 //xhr.setRequestHeader("Content-Length", blob.length);

 xhr.onload = function(e) {
 if (this.status === 200) {
 console.log(this.response);
 }
 };
 xhr.send(blob);
 }


The code that receives the XHR request is as follows :


var parts = u.split('/');
 var prefix = parts[2];
 var num = parts[3];
 var isFirst = false;
 var isLast = !!parts[4];

 if ((/^0+$/).test(num)) {
 var path = require('path');
 shell.mkdir(path.join(__dirname, 'videos', prefix));
 isFirst = true;
 }

 var fp = 'videos/' + prefix + '/' + num + '.webm';
 var msg = 'got ' + fp;
 console.log(msg);
 console.log('isFirst:%s, isLast:%s', isFirst, isLast);

 var stream = fs.createWriteStream(fp, { encoding: 'binary' });
 /*stream.on('end', function() {
 respond(res, ['text/plain', msg]);
 });*/

 //req.setEncoding('binary');

 req.pipe(stream);
 req.on('end', function() {
 respond(res, ['text/plain', msg]);

 if (!LIVE) { return; }

 var duration = 20;
 var fd = {
 fileName: num + '.webm',
 filePath: fp,
 duration: duration
 };
 var fileDataArr;
 if (isFirst) {
 fileDataArr = [];
 fileDataArrs[prefix] = fileDataArr;
 } else {
 var fileDataArr = fileDataArrs[prefix];
 }
 try {
 fileDataArr.push(fd);
 } catch (err) {
 fileDataArr = [];
 console.log(err.message);
 }
 videoUtils.computeStartTimes(fileDataArr);

 videoUtils.webm2Mpegts(fd, function(err, mpegtsFp) {
 if (err) { return console.error(err); }
 console.log('created %s', mpegtsFp);

 var playlistFp = 'videos/' + prefix + '/playlist.m3u8';

 var fileDataArr2 = (isLast ? fileDataArr : lastN(fileDataArr, PREV_ITEMS_IN_LIVE));

 var action = (isFirst ? 'created' : (isLast ? 'finished' : 'updated'));

 videoUtils.generateM3u8Playlist(fileDataArr2, playlistFp, !isLast, function(err) {
 console.log('playlist %s %s', playlistFp, (err ? err.toString() : action));
 });
 });


 runStreamServer(prefix);
 }


-
How to write a video stream to a server ?
14 août, par The MaskRecently been playing with FFmpeg and it's powerful abilities. Working on a cool project where I'm trying to create a live video stream using FFmpeg. The client (reactJs) and server (nodeJS) are connected via web-socket. The client sends the byte packets to server and the server then spawns an FFmpeg process and serve it to an nginx server.


Client(live-stream.js) :


const stream = await navigator.mediaDevices.getUserMedia({
 video: true,
 audio: true,
 });
 videoRef.current.srcObject = stream;

 const ingestUrl = `ws://localhost:8081/ws`
 const socket = new WebSocket(ingestUrl);
 socket.binaryType = "arraybuffer";
 socket.onopen = () => {
 console.log("✅ WebSocket connection established");
 socket.send(JSON.stringify({ type: "start", stream_key: streamKey }));
 mediaRecorderRef.current.start(500);
 };
 socketRef.current = socket;

 socket.onerror = (error) => {
 console.error("❌ WebSocket error:", error);
 };

 mediaRecorderRef.current = new MediaRecorder(stream, {
 mimeType: "video/webm;codecs=vp8,opus",
 videoBitsPerSecond: 1000000,
 audioBitsPerSecond: 128000
 });
 mediaRecorderRef.current.ondataavailable = (event) => {
 if (event.data.size > 0 && socket.readyState === WebSocket.OPEN) {
 event.data.arrayBuffer().then((buffer) => socket.send(buffer));
 }
 };


Server(index.js) :


const http = require('http');
const WebSocket = require('ws');
const { spawn } = require('child_process');
const fs = require('fs');


const server = new WebSocket.Server({ server:wss, path:'/ws'});

const startFFmpeg = (stream_key) => {
 return ffmpeg = spawn("ffmpeg", [
 "-re",
 "-f", "matroska",
 "-i", "pipe:0",
 "-map", "0:v:0",
 "-map", "0:a:0",
 "-c:v", "libx264",
 "-c:a", "aac ",
 "-b:v", "6000k",
 "-maxrate", "6000k ",
 "-bufsize", "6000k ",
 "-pix_fmt", "yuv420p ",
 "-f", "flv",
 `rtmp://localhost/live/${stream_key}`,
 ]);
}
server.on('connection', (ws) => {
 console.log('📡 New WebSocket connection');

 let ffmpeg = null;
 let buffer = Buffer.alloc(0);
 let streamStarted = false;

 ws.on('message', (msg, isBinary) => {
 if (!isBinary) {
 const parsed = JSON.parse(msg);
 if (parsed.type === "start") {
 const { stream_key } = parsed;
 console.log(`🔑 Stream key: ${stream_key}`);
 console.log(`🎥 Starting ingest for stream key: ${stream_key}`);

 ffmpeg = startFFmpeg(stream_key)
 ffmpeg.stdin.on("error", (e) => {
 console.error("FFmpeg stdin error:", e.message);
 });

 ffmpeg.stderr.on("data", (data) => {
 console.log(`FFmpeg Data: ${data}`);
 });

 ffmpeg.on("close", (code) => {
 console.log(`FFmpeg exited with code ${code}`);
 });

 ffmpeg.on("exit", (code, signal) => {
 console.log(`FFmpeg exited with code: ${code}, signal: ${signal}`);
 if (signal === 'SIGSEGV') {
 console.log('🔄 FFmpeg segfaulted, attempting restart...');
 setTimeout(() => {
 if (ws.readyState === WebSocket.OPEN) {
 startFFmpeg(stream_key);
 }
 }, 1000);
 }
 });

 streamStarted = true;
 }
 } else if (isBinary && ffmpeg && ffmpeg.stdin.writable) {
 try {
 // Convert to Buffer if it's an ArrayBuffer
 let data;
 if (msg instanceof ArrayBuffer) {
 data = Buffer.from(msg);
 } else {
 data = Buffer.from(msg);
 }

 // Buffer the data
 buffer = Buffer.concat([buffer, data]);
 
 // Write in larger chunks to reduce overhead
 if (buffer.length >= 8192) { // 8KB threshold
 console.log(`📥 Writing ${buffer.length} bytes to FFmpeg`);
 
 if (ffmpeg.stdin.write(buffer)) {
 buffer = Buffer.alloc(0);
 } else {
 // Handle backpressure
 ffmpeg.stdin.once('drain', () => {
 buffer = Buffer.alloc(0);
 ffmpeg.stdin.setMaxListeners(20); // or a safe upper bound
 });
 }
 }
 } catch (e) {
 console.error("FFmpeg write error:", e);
 }
 }
 });
 
 ws.on('close', () => {
 console.log('❌ WebSocket closed');
 streamStarted = false;

 if (ffmpeg){ // Write any remaining buffer
 if (buffer.length > 0 && ffmpeg.stdin.writable) {
 console.log(`📥 Writing final ${buffer.length} bytes to FFmpeg`);
 ffmpeg.stdin.write(buffer);
 }
 
 // Gracefully close FFmpeg
 if (ffmpeg.stdin.writable) {
 ffmpeg.stdin.end();
 }
 
 setTimeout(() => {
 if (ffmpeg && !ffmpeg.killed) {
 ffmpeg.kill('SIGTERM');
 setTimeout(() => {
 if (ffmpeg && !ffmpeg.killed) {
 ffmpeg.kill('SIGKILL');
 }
 }, 5000);
 }
 }, 1000);
 }
 });
});

wss.listen(8081, "localhost", () => {
 console.log("🛰️ Server listening on http://localhost:8081/ws");
});


The problem statment :
Been facing error like pixels drops in the video, bad quality. FFmpeg is crashing with error :


FFmpeg Data: Input #0, matroska,webm, from 'pipe:0':

FFmpeg Data: Metadata:
 encoder : Chrome
 Duration: N/A, start: 0.000000, bitrate: N/A
 Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)

FFmpeg Data: Stream #0:1(eng): Video: vp8, yuv420p(progressive), 640x480, SAR 1:1 DAR 4:3, 
FFmpeg Data: 1k tbr, 1k tbn (default)
 Metadata:
 alpha_mode : 1

FFmpeg Data: Unknown pixel format requested: yuv420p .

FFmpeg stdin error: write EPIPE
FFmpeg exited with code: 1, signal: null
FFmpeg exited with code 1


Syndiquer tout le site
