Recherche avancée
Autres articles (57)
-
Submit bugs and patches
13 avril 2011Unfortunately a software is never perfect.
If you think you have found a bug, report it using our ticket system. Please to help us to fix it by providing the following information : the browser you are using, including the exact version as precise an explanation as possible of the problem if possible, the steps taken resulting in the problem a link to the site / page in question
If you think you have solved the bug, fill in a ticket and attach to it a corrective patch.
You may also (...) -
Websites made with MediaSPIP
2 mai 2011, parThis page lists some websites based on MediaSPIP.
-
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 (10906)
-
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");
} -
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>

-
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.


Syndiquer tout le site
