Recherche avancée
Médias (1)
-
MediaSPIP Simple : futur thème graphique par défaut ?
26 septembre 2013, par
Mis à jour : Octobre 2013
Langue : français
Type : Video
Autres articles (44)
-
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 -
Déploiements possibles
31 janvier 2010, parDeux types de déploiements sont envisageable dépendant de deux aspects : La méthode d’installation envisagée (en standalone ou en ferme) ; Le nombre d’encodages journaliers et la fréquentation envisagés ;
L’encodage de vidéos est un processus lourd consommant énormément de ressources système (CPU et RAM), il est nécessaire de prendre tout cela en considération. Ce système n’est donc possible que sur un ou plusieurs serveurs dédiés.
Version mono serveur
La version mono serveur consiste à n’utiliser qu’une (...) -
Keeping control of your media in your hands
13 avril 2011, parThe vocabulary used on this site and around MediaSPIP in general, aims to avoid reference to Web 2.0 and the companies that profit from media-sharing.
While using MediaSPIP, you are invited to avoid using words like "Brand", "Cloud" and "Market".
MediaSPIP is designed to facilitate the sharing of creative media online, while allowing authors to retain complete control of their work.
MediaSPIP aims to be accessible to as many people as possible and development is based on expanding the (...)
Sur d’autres sites (10991)
-
create a timelapse video using MediaRecorder API ( and ffmpeg ? )
24 août 2022, par The Blind HawkSummary


I have a version of my code already working on Chrome and Edge (Mac Windows and Android), but I need some fixes for it to work on IOS (Safari/Chrome).

My objective is to record around 25 minutes and download a timelapse version of the recording.

final product requirements :

speed: 3fps
length: ~25s

(I need to record one frame every 20 seconds for 25 mins)


this.secondStream settings :


this.secondStream = await navigator.mediaDevices.getUserMedia({
 audio: false,
 video: {width: 430, height: 430, facingMode: "user"}
});


My code for IOS so far :


startIOSVideoRecording: function() {
 console.log("setting up recorder");
 var self = this;
 this.data = [];

 if (MediaRecorder.isTypeSupported('video/mp4')) {
 // IOS does not support webm, so I will be using mp4
 var options = {mimeType: 'video/mp4', videoBitsPerSecond : 1000000};
 } else {
 console.log("ERROR: mp4 is not supported, trying to default to webm");
 var options = {mimeType: 'video/webm'};
 }
 console.log("options settings:");
 console.log(options);

 this.recorder = new MediaRecorder(this.secondStream, options);

 this.recorder.ondataavailable = function(evt) {
 if (evt.data && evt.data.size > 0) {
 self.data.push(evt.data);
 console.log('chunk size: ' + evt.data.size);
 }
 }

 this.recorder.onstop = function(evt) {
 console.log('recorder stopping');
 var blob = new Blob(self.data, {type: "video/mp4"});
 self.download(blob, "mp4");
 self.sendMail(videoBlob);
 }

 console.log("finished setup, starting")
 this.recorder.start(1200);

 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}

 async function looper() {
 // I am trying to pick one second every 20 more or less
 await sleep(500);
 self.recorder.pause();
 await sleep(18000);
 self.recorder.resume();
 looper();
 }
 looper();
 },


Issues


Only one call to getUserMedia()


I am already using
this.secondstreamelsewhere, and I need the settings to stay as they are for the other functionality.

On Chrome and Edge, I could just callgetUserMedia()again with different settings, and the issue would be solved, but on IOS callinggetUserMedia()a second time kills the first stream.

The settings that I was planning to use (works for Chrome and Edge) :

navigator.mediaDevices.getUserMedia({
 audio: false,
 video: { 
 width: 360, height: 240, facingMode: "user", 
 frameRate: { min:0, ideal: 0.05, max:0.1 } 
 },
}


The timelapse library I am using does not support mp4 (ffmpeg as alternative ?)


I am forced to use mp4 on IOS apparently, but this does not allow me to use the library I was relying on so I need an alternative.

I am thinking of usingffmpegbut cannot find any documentation to make it interact with the blob before the download.

I do not want to edit the video after downloading it, but I want to be able to download the already edited version, so no terminal commands.

MediaRecorder pause and resume are not ideal


On Chrome and Edge I would keep one frame every 20 seconds by setting the frameRate to 0.05, but this does not seem to work on IOS for two reasons.

First one is related to the first issue of not being able to change the settings ofgetUserMedia()without destroying the initial stream in the first place.

And even after changing the settings, It seems that setting the frame rate below 1 is not supported on IOS. Maybe I wrote something else wrong, but I was not able to open the downloaded file.

Therefore I tried relying on pausing and resuming the MediaRecorder, but this brings forth another two issues :

I am currently saving 1 second every 20 seconds and not 1 frame every 20 seconds, and I cannot find any workarounds.

Pause and Resume take a little bit of time, making the code unreliable, as I sometimes pick 2/20 seconds instead of 1/20, and I have no reliability that the loop is actually running every 20 seconds (might be 18 might be 25).

My working code for other platforms


This is my code for the other platforms, hope it helps !

Quick note : you will need to give it a bit of time between setup and start.

The timelapse library is here


 setupVideoRecording: function() {
 let video = { 
 width: 360, height: 240, facingMode: "user", 
 frameRate: { min:0, ideal: 0.05, max:0.1 } 
 };
 navigator.mediaDevices.getUserMedia({
 audio: false,
 video: video,
 }).then((stream) => {
 // this is a video element
 const recVideo = document.getElementById('self-recorder');
 recVideo.muted = true;
 recVideo.autoplay = true;
 recVideo.srcObject = stream;
 recVideo.play();
 });
 },

 startVideoRecording: function() {
 console.log("setting up recorder");
 var self = this;
 this.data = [];

 var video = document.getElementById('self-recorder');

 if (MediaRecorder.isTypeSupported('video/webm; codecs=vp9')) {
 var options = {mimeType: 'video/webm; codecs=vp9'};
 } else if (MediaRecorder.isTypeSupported('video/webm')) {
 var options = {mimeType: 'video/webm'};
 }
 console.log("options settings:");
 console.log(options);

 this.recorder = new MediaRecorder(video.captureStream(), options);

 this.recorder.ondataavailable = function(evt) {
 self.data.push(evt.data);
 console.log('chunk size: ' + evt.data.size);
 }

 this.recorder.onstop = function(evt) {
 console.log('recorder stopping');
 timelapse(self.data, 3, function(blob) {
 self.download(blob, "webm");
 });
 }

 console.log("finished setup, starting");
 this.recorder.start(40000);
 }


-
FFmpeg Wasm, error while creating video from canvas
12 octobre 2023, par NineCattoRulesI'm using ffmpeg.wasm in my Next.JS app.


Here my specs :


"@ffmpeg/ffmpeg": "^0.12.5",
"@ffmpeg/util": "^0.12.0",
"next": "^13.0.6",
"react": "^18.2.0",


I want to simply record a 5s video from a canvas, so I tried :


'use client'

import React, { useEffect, useRef, useState } from 'react';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

const CanvasVideoRecorder = () => {
 const canvasRef = useRef(null);
 const videoChunksRef = useRef([]);
 const ffmpegRef = useRef(new FFmpeg({ log: true }));
 const [loaded, setLoaded] = useState(false);
 const [videoUrl, setVideoUrl] = useState(null);

 const load = async () => {
 await ffmpegRef.current.load({
 coreURL: '/js/ffmpeg-core.js',
 wasmURL: '/js/ffmpeg-core.wasm',
 });
 setLoaded(true);
 };

 useEffect(() => {
 const ctx = canvasRef.current.getContext('2d');
 function drawFrame(timestamp) {
 ctx.fillStyle = `rgb(${(Math.sin(timestamp / 500) * 128) + 128}, 0, 0)`;
 ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
 requestAnimationFrame(drawFrame);
 }
 requestAnimationFrame(drawFrame);
 }, []);

 const startRecording = async () => {
 const videoStream = canvasRef.current.captureStream(30);
 const videoRecorder = new MediaRecorder(videoStream, { mimeType: 'video/webm' });

 videoRecorder.ondataavailable = (event) => {
 if (event.data.size > 0) {
 videoChunksRef.current.push(event.data);
 }
 };

 videoRecorder.start();
 setTimeout(() => videoRecorder.stop(), 5000);

 videoRecorder.onstop = async () => {
 try {
 await ffmpegRef.current.writeFile('recorded.webm', await fetchFile(new Blob(videoChunksRef.current, { type: 'video/webm' })));

 await ffmpegRef.current.exec('-y', '-i', 'recorded.webm', '-an', '-c:v', 'copy', 'output_copy.webm');

 const data = await ffmpegRef.current.readFile('output_copy.webm');
 const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/webm' }));

 setVideoUrl(url);
 } catch (error) {
 console.error("Error during processing:", error);
 }
 };
 };

 return (
 <div>
 <canvas ref="{canvasRef}" width="640" height="480"></canvas>

 {loaded ? (
 <>

 <button>Start Recording</button>
 {videoUrl && <video controls="controls" src="{videoUrl}"></video>}
 >
 ) : (
 <button>Load FFmpeg</button>
 )}
 </div>
 );
};

export default CanvasVideoRecorder;


I don't know why but it catch an error :


ErrnoError: FS error


This error occurs when I do this :


await ffmpegRef.current.exec('-y', '-i', 'recorded.webm', '-an', '-c:v', 'copy', 'output_copy.webm');
const data = await ffmpegRef.current.readFile('output_copy.webm');


The
recorded.webmfile is written correctly and I can read it,ffmpegRef.currentis well defined, so what's wrong with my logic, why the exec command doesn't work ?

-
How can I have ffmpeg receive both video and audio over RTP ?
23 mai 2018, par KallDrexxI am trying to instruct FFMPEG to receive h264 video and aac audio via RTP using out of band session initialization.
To do that I have the following local SDP :
v=0
o=sb
s=-
t=0 0
c=IN IP4 127.0.0.1
m=video 12100 RTP/AVP 96
a=rtpmap:96 H264/90000
m=audio 12101 RTP/AVP 97
a=rtpmap:97 MPEG4-GENERIC/44100/2When I load ffmpeg with :
ffmpeg -loglevel debug -protocol_whitelist "file,rtp,udp" -i .\test.sdp -strict -2 test.flvI get the following error :
[udp @ 0000022d7fdafe80] bind failed: Error number -10048 occurred
[AVIOContext @ 0000022d7fd84900] Statistics: 154 bytes read, 0 seeks
.\test.sdp: Invalid data found when processing inputConfused by that error code I loaded it up on a Linux VM and the bind error I got was
Address already in use.I tried changing both of those port numbers all around and kept getting that error. Finally I removed one of the media streams from the SDP so it ONLY had video or ONLY had audio and no binding error occurred.
How can I get ffmpeg to bind to multiple RTP ports for RTP ingestion ?
Syndiquer tout le site
