Recherche avancée
Médias (1)
-
1 000 000 (wav version)
26 septembre 2011, par
Mis à jour : Avril 2013
Langue : English
Type : Audio
Autres articles (76)
-
Gestion des droits de création et d’édition des objets
8 février 2011, parPar défaut, beaucoup de fonctionnalités sont limitées aux administrateurs mais restent configurables indépendamment pour modifier leur statut minimal d’utilisation notamment : la rédaction de contenus sur le site modifiables dans la gestion des templates de formulaires ; l’ajout de notes aux articles ; l’ajout de légendes et d’annotations sur les images ;
-
Dépôt de média et thèmes par FTP
31 mai 2013, parL’outil MédiaSPIP traite aussi les média transférés par la voie FTP. Si vous préférez déposer par cette voie, récupérez les identifiants d’accès vers votre site MédiaSPIP et utilisez votre client FTP favori.
Vous trouverez dès le départ les dossiers suivants dans votre espace FTP : config/ : dossier de configuration du site IMG/ : dossier des média déjà traités et en ligne sur le site local/ : répertoire cache du site web themes/ : les thèmes ou les feuilles de style personnalisées tmp/ : dossier de travail (...) -
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
Sur d’autres sites (8485)
-
Is there a way to work with fluent-ffmpeg library for audio encoding (webm to wav/mp3) in Angular 2+ ?
24 avril 2019, par binarysynthesisSo i’m using Browser media objects to record audio using microphone for speech to text transcription. The recorded media gives me a blob/file which is in webm format. I want to convert the blob/file to wav or mp3 format which will be sent to AWS S3 Storage from where i intend to use the AWS Transcribe (Speech to Text) service to pick up the file and produce a transcript of the speech. AWS Transcribe doesn’t support webm format due to which i need to encode the audio on the client side to either wav or mp3. I’m trying to use the fluent-ffmpeg (third-party) [https://www.npmjs.com/package/fluent-ffmpeg] npm library to accomplish that but i keep getting the following error in the Typescript compiler when building using ng serve. I have already tried using the RecorderJS and the WebAudioRecoderJS npm libraries and i get the same ’Module not found’ error. -
ERROR in ./node_modules/fluent-ffmpeg/index.js
Module not found: Error: Can't resolve './lib-cov/fluent-ffmpeg' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg'
ERROR in ./node_modules/fluent-ffmpeg/lib/ffprobe.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/processor.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/utils.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/recipes.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/capabilities.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/processor.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/isexe/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\isexe'
ERROR in ./node_modules/isexe/windows.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\isexe'
ERROR in ./node_modules/isexe/mode.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\isexe'
ERROR in ./node_modules/fluent-ffmpeg/lib/utils.js
Module not found: Error: Can't resolve 'os' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/recipes.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/capabilities.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/processor.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
ERROR in ./node_modules/fluent-ffmpeg/lib/options/misc.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib\options'
ERROR in ./node_modules/which/which.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\which'
ERROR in ./node_modules/fluent-ffmpeg/lib/recipes.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\banshuman\Desktop\AWS-Transcribe-Angular\aws-transcribe-angular\node_modules\fluent-ffmpeg\lib'
i ｢wdm｣: Failed to compile.I am using Angular 7.2.0 and TypeScript 3.2.4.
I have also installed the type definitions for fluent-ffmpeg [https://www.npmjs.com/package/@types/fluent-ffmpeg] within the node_modules to specify the typings for TypeScript.
Below is my angular component file where i have implemented the audio recording functionality in the Browser -/// <reference types="@types/dom-mediacapture-record"></reference>
import { Component } from '@angular/core';
import * as aws from 'aws-sdk';
import * as TranscribeService from 'aws-sdk/clients/transcribeservice';
import * as Ffmpeg from 'fluent-ffmpeg';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
speechToText() {
console.log(Ffmpeg);
// Begin streaming audio
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
// Start recording audio
mediaRecorder.start();
const audioChunks = [];
// When recording starts
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push((<any>event).data);
});
// When recording stops
mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/webm;codecs=opus' });
const audioFile = new File([audioBlob], 'outputAudioFile');
const audioUrl = URL.createObjectURL(audioBlob);
</any>I’m not posting the entire component code as the rest is part of the AWS SDK and is irrelevant to the problem statement. I need to convert the audioBlob or the audioFile which are currently in the webm format to wav or mp3 for uploading to the AWS services. How can i achieve that in Angular using the ffmpeg library ? I’m open to other solutions as well and not just ffmpeg to get the job done on the client side.
-
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);
 }


Syndiquer tout le site
