Recherche avancée
Médias (91)
-
Chuck D with Fine Arts Militia - No Meaning No
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Paul Westerberg - Looking Up in Heaven
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Le Tigre - Fake French
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Thievery Corporation - DC 3000
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Dan the Automator - Relaxation Spa Treatment
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Gilberto Gil - Oslodum
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
Autres articles (41)
-
(Dés)Activation de fonctionnalités (plugins)
18 février 2011, parPour gérer l’ajout et la suppression de fonctionnalités supplémentaires (ou plugins), MediaSPIP utilise à partir de la version 0.2 SVP.
SVP permet l’activation facile de plugins depuis l’espace de configuration de MediaSPIP.
Pour y accéder, il suffit de se rendre dans l’espace de configuration puis de se rendre sur la page "Gestion des plugins".
MediaSPIP est fourni par défaut avec l’ensemble des plugins dits "compatibles", ils ont été testés et intégrés afin de fonctionner parfaitement avec chaque (...) -
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 (...) -
Les autorisations surchargées par les plugins
27 avril 2010, parMediaspip core
autoriser_auteur_modifier() afin que les visiteurs soient capables de modifier leurs informations sur la page d’auteurs
Sur d’autres sites (7625)
-
How to create video from a stream webcam and canvas ?
1er mai 2024, par StefdelecI am trying to generate a video on browser from different cut :
Slide : stream from canvas
Video : stream from webcam


I just want to allow user to download the video edit with
slide1 + video1 + slide2 + video2 + slide3 + video3.


Here is my code :


const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const webcam = document.getElementById('webcam');
const videoPlayer = document.createElement('video');
videoPlayer.controls = true;
document.body.appendChild(videoPlayer);
const videoWidth = 640;
const videoHeight = 480;
let keepAnimating = true;
const frameRate=30;
// Attempt to get webcam access
function setupWebcam() {
 const constraints = {
 video: {
 frameRate: frameRate,
 width: videoWidth, 
 height: videoHeight 
 }
 };
 navigator.mediaDevices.getUserMedia(constraints)
 .then(stream => {
 webcam.srcObject = stream;
 webcam.addEventListener('loadedmetadata', () => {
 recordSegments();
 console.log('Webcam feed is now displayed');
 });
 })
 .catch(err => {
 console.error("Error accessing webcam:", err);
 alert('Could not access the webcam. Please ensure permissions are granted and try again.');
 });
}


// Function to continuously draw on the canvas
function animateCanvas(content) {
 if (!keepAnimating) {
 console.log("keepAnimating", keepAnimating);
 return;
 }; // Stop the animation when keepAnimating is false

 ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous drawings
 ctx.fillStyle = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.5)`;
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ctx.fillStyle = '#000';
 ctx.font = '48px serif';
 ctx.fillText(content + ' ' + new Date().toLocaleTimeString(), 50, 100);

 // Request the next frame
 requestAnimationFrame(() => animateCanvas(content));
}


// Initialize recording segments array
const recordedSegments = [];
// Modified startRecording to manage animation
function startRecording(stream, duration = 5000, content) {
 const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
 const data = [];

 recorder.ondataavailable = e => data.push(e.data);


 // Start animating the canvas
 keepAnimating = true;
 animateCanvas(content);
 recorder.start();
 return new Promise((resolve) => {
 // Automatically stop recording after 'duration' milliseconds
 setTimeout(() => {
 recorder.stop();
 // Stop the animation when recording stops
 keepAnimating = false;
 }, duration);

 recorder.onstop = () => {
 const blob = new Blob(data, { type: 'video/webm' });
 recordedSegments.push(blob);
 keepAnimating = true;
 resolve(blob);
 };
 });
}

// Sequence to record segments
async function recordSegments() {
 // Record canvas with dynamic content
 await startRecording(canvas.captureStream(frameRate), 2000, 'Canvas Draw 1').then(() => console.log('Canvas 1 recorded'));

 await startRecording(webcam.srcObject,3000).then(() => console.log('Webcam 1 recorded'));

 await startRecording(webcam.srcObject).then(() => console.log('Webcam 1 recorded'));
 mergeAndDownloadVideo();
}

function downLoadVideo(blob){
 const url = URL.createObjectURL(blob);

 // Create an anchor element and trigger a download
 const a = document.createElement('a');
 a.style.display = 'none';
 a.href = url;
 a.download = 'merged-video.webm';
 document.body.appendChild(a);
 a.click();

 // Clean up by revoking the Blob URL and removing the anchor element after the download
 setTimeout(() => {
 document.body.removeChild(a);
 window.URL.revokeObjectURL(url);
 }, 100);
}
function mergeAndDownloadVideo() {
 console.log("recordedSegments length", recordedSegments.length);
 // Create a new Blob from all recorded video segments
 const superBlob = new Blob(recordedSegments, { type: 'video/webm' });
 
 downLoadVideo(superBlob)

 // Create a URL for the superBlob
 
}

// Start the process by setting up the webcam first
setupWebcam();


You can find it here : https://jsfiddle.net/Sulot/nmqf6wdj/25/


I am unable to have one "slide" + webcam video + "slide" + webcam video.


It merges only the first 2 segments, but not the other. I tried with ffmpeg browser side.


-
TypeError : _ffmpeg_ffmpeg__WEBPACK_IMPORTED_MODULE_1__ is not a constructor
10 novembre 2023, par Shubhamimport { useState, useRef } from "react";

import \* as FFmpeg from "@ffmpeg/ffmpeg";

const AudioRecorders = ({ onAudioRecorded }) =\> {
const \[permission, setPermission\] = useState(false);
const \[stream, setStream\] = useState(null);
const mimeType = "video/webm";
const mediaRecorder = useRef(null);
const \[recordingStatus, setRecordingStatus\] = useState("inactive");
const \[audioChunks, setAudioChunks\] = useState(\[\]);
const \[audio, setAudio\] = useState(null);

const ffmpeg = useRef(null);

const createFFmpeg = async ({ log = false }) =\> {
// here I am facing the error
const ffmpegInstance = new FFmpeg({ log });
await ffmpegInstance.load();
return ffmpegInstance;
};

const convertWebmToWav = async (webmBlob) =\> {
if (!ffmpeg.current) {
ffmpeg.current = await createFFmpeg({ log: false });
}

 const inputName = "input.webm";
 const outputName = "output.wav";
 
 ffmpeg.current.FS("writeFile", inputName, await webmBlob.arrayBuffer());
 await ffmpeg.current.run("-i", inputName, outputName);
 
 const outputData = ffmpeg.current.FS("readFile", outputName);
 const outputBlob = new Blob([outputData.buffer], { type: "audio/wav" });
 
 return outputBlob;

};

const getMicrophonePermission = async () =\> {
if ("MediaRecorder" in window) {
try {
const streamData = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false,
});
setPermission(true);
setStream(streamData);
} catch (err) {
alert(err.message);
}
} else {
alert("The MediaRecorder API is not supported in your browser.");
}
};

const startRecording = async () =\> {
setRecordingStatus("recording");
//create new Media recorder instance using the stream
const media = new MediaRecorder(stream, { type: mimeType });
//set the MediaRecorder instance to the mediaRecorder ref
mediaRecorder.current = media;
//invokes the start method to start the recording process
mediaRecorder.current.start();
let localAudioChunks = \[\];
mediaRecorder.current.ondataavailable = (event) =\> {
if (typeof event.data === "undefined") return;
if (event.data.size === 0) return;
localAudioChunks.push(event.data);
};
setAudioChunks(localAudioChunks);
};

const stopRecording = () =\> {
setRecordingStatus("inactive");
//stops the recording instance
mediaRecorder.current.stop();
mediaRecorder.current.onstop = async () =\> {
//creates a blob file from the audiochunks data
const audioBlob = new Blob(audioChunks, { type: mimeType });
// creates a playable URL from the blob file.
const audioUrl = URL.createObjectURL(audioBlob);
// converts the WebM blob to a WAV blob.
const newBlob = await convertWebmToWav(audioBlob);
await onAudioRecorded(newBlob);
setAudio(audioUrl);
setAudioChunks(\[\]);
};
};

return (
\
<h2>Audio Recorder</h2>
\
\<div classname="audio-controls">
{!permission ? (
\<button type="button">
Get Microphone
\
) : null}
{permission && recordingStatus === "inactive" ? (
\<button type="button">
Start Recording
\
) : null}
{recordingStatus === "recording" ? (
\<button type="button">
Stop Recording
\
) : null}
{audio ? (
\<div classname="audio-container">
\<audio src="{audio}">\
<a>
Download Recording
</a>
\
) : null}
\
\
\
);
};
export default AudioRecorders;

\`

</audio></div></button></button></button></div>

ERROR
ffmpeg_ffmpeg__WEBPACK_IMPORTED_MODULE_1_ is not a constructor
TypeError : ffmpeg_ffmpeg__WEBPACK_IMPORTED_MODULE_1_ is not a constructor
at createFFmpeg (http://localhost:3000/main.48220156e0c620f1acd0.hot-update.js:41:28)
at convertWebmToWav (http://localhost:3000/main.48220156e0c620f1acd0.hot-update.js:49:30)
at mediaRecorder.current.onstop (http://localhost:3000/main.48220156e0c620f1acd0.hot-update.js:109:29)`


I am trying to record the voice in audio/wav formate but its recording in video/webm formate not because of \<const mimetype="video/webm">. Whatever the mimeType I am giving its showing the file type video/webm on "https://www.checkfiletype.com/". I am recording it for the speech_recognition used in flask backend which is accepting only audio/wav.
So in frontend I have written a function "convertWebmToWav " which is giving me the error :
Uncaught runtime errors:

</const>

-
Audio recorded with MediaRecorder on Chrome missing duration
3 juin 2017, par suppp111I am recording audio (oga/vorbis) files with MediaRecorder. When I record these file through Chrome I get problems : I cannot edit the files on ffmpeg and when I try to play them on Firefox it says they are corrupt (they do play fine on Chrome though).
Looking at their metadata on ffmpeg I get this :
Input #0, matroska,webm, from '91.oga':
Metadata:
encoder : Chrome
Duration: N/A, start: 0.000000, bitrate: N/A
Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
[STREAM]
index=0
codec_name=opus
codec_long_name=Opus (Opus Interactive Audio Codec)
profile=unknown
codec_type=audio
codec_time_base=1/48000
codec_tag_string=[0][0][0][0]
codec_tag=0x0000
sample_fmt=fltp
sample_rate=48000
channels=1
channel_layout=mono
bits_per_sample=0
id=N/A
r_frame_rate=0/0
avg_frame_rate=0/0
time_base=1/1000
start_pts=0
start_time=0.000000
duration_ts=N/A
duration=N/A
bit_rate=N/A
max_bit_rate=N/A
bits_per_raw_sample=N/A
nb_frames=N/A
nb_read_frames=N/A
nb_read_packets=N/A
DISPOSITION:default=1
DISPOSITION:dub=0
DISPOSITION:original=0
DISPOSITION:comment=0
DISPOSITION:lyrics=0
DISPOSITION:karaoke=0
DISPOSITION:forced=0
DISPOSITION:hearing_impaired=0
DISPOSITION:visual_impaired=0
DISPOSITION:clean_effects=0
DISPOSITION:attached_pic=0
TAG:language=eng
[/STREAM]
[FORMAT]
filename=91.oga
nb_streams=1
nb_programs=0
format_name=matroska,webm
format_long_name=Matroska / WebM
start_time=0.000000
duration=N/A
size=7195
bit_rate=N/A
probe_score=100
TAG:encoder=ChromeAs you can see there are problems with the duration. I have looked at posts like this :
How can I add predefined length to audio recorded from MediaRecorder in Chrome ?But even trying that, I got errors when trying to chop and merge files.For example when running :
ffmpeg -f concat -i 89_inputs.txt -c copy final.ogaI get a lot of this :
[oga @ 00000000006789c0] Non-monotonous DTS in output stream 0:0; previous: 57612, current: 1980; changing to 57613. This may result in incorrect timestamps in the output file.
[oga @ 00000000006789c0] Non-monotonous DTS in output stream 0:0; previous: 57613, current: 2041; changing to 57614. This may result in incorrect timestamps in the output file.
DTS -442721849179034176, next:42521 st:0 invalid dropping
PTS -442721849179034176, next:42521 invalid dropping st:0
[oga @ 00000000006789c0] Non-monotonous DTS in output stream 0:0; previous: 57614, current: 2041; changing to 57615. This may result in incorrect timestamps in the output file.
[oga @ 00000000006789c0] Timestamps are unset in a packet for stream 0. This is deprecated and will stop working in the future. Fix your code to set the timestamps properly
DTS -442721849179031296, next:42521 st:0 invalid dropping
PTS -442721849179031296, next:42521 invalid dropping st:0Does anyone know what we need to do to audio files recorded from Chrome for them to be useful ? Or is there a problem with my setup ?
Recorder js :
if (navigator.getUserMedia) {
console.log('getUserMedia supported.');
var constraints = { audio: true };
var chunks = [];
var onSuccess = function(stream) {
var mediaRecorder = new MediaRecorder(stream);
record.onclick = function() {
mediaRecorder.start();
console.log(mediaRecorder.state);
console.log("recorder started");
record.style.background = "red";
stop.disabled = false;
record.disabled = true;
var aud = document.getElementById("audioClip");
start = aud.currentTime;
}
stop.onclick = function() {
console.log(mediaRecorder.state);
console.log("Recording request sent.");
mediaRecorder.stop();
}
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
var audio = document.createElement('audio');
audio.setAttribute('controls', '');
audio.setAttribute('id', 'audioClip');
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs="vorbis"' });
chunks = [];
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
sendRecToPost(blob); // this just send the audio blob to the server by post
console.log("recorder stopped");
}
Syndiquer tout le site
