Recherche avancée
Médias (91)
-
Richard Stallman et le logiciel libre
19 octobre 2011, par
Mis à jour : Mai 2013
Langue : français
Type : Texte
-
Stereo master soundtrack
17 octobre 2011, par
Mis à jour : Octobre 2011
Langue : English
Type : Audio
-
Elephants Dream - Cover of the soundtrack
17 octobre 2011, par
Mis à jour : Octobre 2011
Langue : English
Type : Image
-
#7 Ambience
16 octobre 2011, par
Mis à jour : Juin 2015
Langue : English
Type : Audio
-
#6 Teaser Music
16 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#5 End Title
16 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
Autres articles (107)
-
MediaSPIP version 0.1 Beta
16 avril 2011, parMediaSPIP 0.1 beta est la première version de MediaSPIP décrétée comme "utilisable".
Le fichier zip ici présent contient uniquement les sources de MediaSPIP en version standalone.
Pour avoir une installation fonctionnelle, il est nécessaire d’installer manuellement l’ensemble des dépendances logicielles sur le serveur.
Si vous souhaitez utiliser cette archive pour une installation en mode ferme, il vous faudra également procéder à d’autres modifications (...) -
Mise à jour de la version 0.1 vers 0.2
24 juin 2013, parExplications des différents changements notables lors du passage de la version 0.1 de MediaSPIP à la version 0.3. Quelles sont les nouveautés
Au niveau des dépendances logicielles Utilisation des dernières versions de FFMpeg (>= v1.2.1) ; Installation des dépendances pour Smush ; Installation de MediaInfo et FFprobe pour la récupération des métadonnées ; On n’utilise plus ffmpeg2theora ; On n’installe plus flvtool2 au profit de flvtool++ ; On n’installe plus ffmpeg-php qui n’est plus maintenu au (...) -
MediaSPIP 0.1 Beta version
25 avril 2011, parMediaSPIP 0.1 beta is the first version of MediaSPIP proclaimed as "usable".
The zip file provided here only contains the sources of MediaSPIP in its standalone version.
To get a working installation, you must manually install all-software dependencies on the server.
If you want to use this archive for an installation in "farm mode", you will also need to proceed to other manual (...)
Sur d’autres sites (9238)
-
How to Record Video of a Dynamic Div Containing Multiple Media Elements in React Konva ?
14 septembre 2024, par Humayoun SaeedI'm working on a React application where I need to record a video of a specific div with the class name "layout." This div contains multiple media elements (such as images and videos) that are dynamically rendered inside divisions. I've tried several approaches, including using MediaRecorder, canvas-based recording with html2canvas, RecordRTC, and even ffmpeg, but none seem to capture the entire div along with its dynamic content effectively.


What would be the best approach to achieve this ? How can I record a video of this dynamically rendered div including all its media elements, ensuring a smooth capture of the transitions ?


What I’ve Tried :
MediaRecorder API : Didn't work effectively for capturing the entire div and its elements.
html2canvas : Captures snapshots but struggles with smooth transitions between media elements.
RecordRTC HTML Element Recording : Attempts to capture the canvas, but the output video size is 0 bytes.
CanvasRecorder, FFmpeg, and various other libraries also didn't provide the desired result.


import React, { useEffect, useState, useRef } from "react";

const Preview = ({ layout, onClose }) => {
 const [currentContent, setCurrentContent] = useState([]);
 const totalDuration = useRef(0);
 const videoRefs = useRef([]); // Store refs to each video element
 const [totalTime, setTotalTime] = useState(0); // Add this line
 const [elapsedTime, setElapsedTime] = useState(0); // Track elapsed time in seconds

 // video recording variable and state declaration
 // video recorder end
 // for video record useffect
 // Function to capture the renderDivision content

 const handleDownload = async () => {
 console.log("video downlaod function in developing mode.");
 };

 // end video record useffect

 // to apply motion and swtich in media of division start
 useEffect(() => {
 if (layout && layout.divisions) {
 const content = layout.divisions.map((division) => {
 let divisionDuration = 0;

 division.imageSrcs.forEach((src, index) => {
 const mediaDuration = division.durations[index]
 ? division.durations[index] * 1000 // Convert to milliseconds
 : 5000; // Fallback to 5 seconds if duration is missing
 divisionDuration += mediaDuration;
 });

 return {
 division,
 contentIndex: 0,
 divisionDuration,
 };
 });

 // Find the maximum duration
 const maxDuration = Math.max(...content.map((c) => c.divisionDuration));

 // Filter divisions that have the max duration
 const maxDurationDivisions = content.filter(
 (c) => c.divisionDuration === maxDuration
 );

 // Select the first one if there are multiple with the same max duration
 const selectedMaxDurationDivision = maxDurationDivisions[0];

 totalDuration.current = selectedMaxDurationDivision.divisionDuration; // Update the total duration in milliseconds

 setTotalTime(Math.floor(totalDuration.current / 1000000)); // Convert to seconds and set in state

 // console.log(
 // "Division with max duration (including ties):",
 // selectedMaxDurationDivision
 // );

 setCurrentContent(content);
 }
 }, [layout]);

 useEffect(() => {
 if (currentContent.length > 0) {
 const timers = currentContent.map(({ division, contentIndex }, i) => {
 const duration = division.durations[contentIndex]
 ? division.durations[contentIndex] // Duration is already in ms
 : 5000; // Default to 5000ms if no duration is defined

 const mediaElement = videoRefs.current[i];
 if (mediaElement && mediaElement.pause) {
 mediaElement.pause();
 }

 // Set up a timeout for each division to move to the next media after duration
 const timeoutId = setTimeout(() => {
 // Update content for each division independently
 updateContent(i, division, contentIndex, duration); // Move to the next content after duration

 // Ensure proper cleanup
 if (contentIndex + 1 >= division.imageSrcs.length) {
 clearTimeout(timeoutId); // Clear timeout to stop looping
 }
 }, duration);

 // Cleanup timers on component unmount
 return timeoutId;
 });

 // Return cleanup function to clear all timeouts
 return () => timers.forEach((timer) => clearTimeout(timer));
 }
 }, [currentContent]);
 // to apply motion and swtich in media of division end

 // Handle video updates when the duration is changed or a new video starts
 const updateContent = (i, division, contentIndex, duration) => {
 const newContent = [...currentContent];

 // Check if we are on the last media item
 if (contentIndex + 1 < division.imageSrcs.length) {
 // Move to next media if not the last one
 newContent[i].contentIndex = contentIndex + 1;
 } else {
 // If this is the last media item, pause here
 newContent[i].contentIndex = contentIndex; // Keep it at the last item
 setCurrentContent(newContent);

 // Handle video pause if the last media is a video
 const mediaElement = videoRefs.current[i];
 if (mediaElement && mediaElement.tagName === "VIDEO") {
 mediaElement.pause();
 mediaElement.currentTime = mediaElement.duration; // Pause at the end of the video
 }
 return; // Exit the function as we don't want to loop anymore
 }

 // Update state to trigger rendering of the next media
 setCurrentContent(newContent);

 // Handle video playback for the next media item
 const mediaElement = videoRefs.current[i];
 if (mediaElement) {
 mediaElement.pause();
 mediaElement.currentTime = 0;
 mediaElement
 .play()
 .catch((error) => console.error("Error playing video:", error));
 }
 };

 const renderDivision = (division, contentIndex, index) => {
 const mediaSrc = division.imageSrcs[contentIndex];

 if (!division || !division.imageSrcs || division.imageSrcs.length === 0) {
 return (
 
 <p>No media available</p>
 
 );
 }

 if (!mediaSrc) {
 return (
 
 <p>No media available</p>
 
 );
 }

 if (mediaSrc.endsWith(".mp4")) {
 return (
 > (videoRefs.current[index] = el)}
 src={mediaSrc}
 autoPlay
 controls={false}
 style={{
 width: "100%",
 height: "100%",
 objectFit: "cover",
 pointerEvents: "none",
 }}
 onLoadedData={() => {
 // Ensure video is properly loaded
 const mediaElement = videoRefs.current[index];
 if (mediaElement && mediaElement.readyState >= 3) {
 mediaElement.play().catch((error) => {
 console.error("Error attempting to play the video:", error);
 });
 }
 }}
 />
 );
 } else {
 return (
 
 );
 }
 };

 // progress bar code start
 useEffect(() => {
 if (totalDuration.current > 0) {
 // Reset elapsed time at the start
 setElapsedTime(0);

 const interval = setInterval(() => {
 setElapsedTime((prevTime) => {
 // Increment the elapsed time by 1 second if it's less than the total time
 if (prevTime < totalTime) {
 return prevTime + 1;
 } else {
 clearInterval(interval); // Clear the interval when totalTime is reached
 return prevTime;
 }
 });
 }, 1000); // Update every second

 // Clean up the interval on component unmount
 return () => clearInterval(interval);
 }
 }, [totalTime]);

 // progress bar code end

 return (
 
 
 
 Close
 
 <h2>Preview Layout: {layout.name}</h2>
 
 {currentContent.map(({ division, contentIndex }, i) => (
 
 {renderDivision(division, contentIndex, i)}
 
 ))}
 {/* canvas code for video start */}
 {/* canvas code for video end */}
 {/* Progress Bar and Time */}
 / Background color for progress bar track
 display: "flex",
 justifyContent: "space-between",
 alignItems: "center",
 }}
 >
 totalTime) * 100}%)`,
 backgroundColor: "#28a745", // Green color for progress bar
 transition: "width 0.5s linear", // Smooth transition
 }}
 >

 {/* Time display */}
 {/* / Fixed right margin
 zIndex: 1, // Ensure it's above the progress bar
 padding: "5px",
 fontSize: "18px",
 fontWeight: "600",
 color: "#333",
 // backgroundColor: "rgba(255, 255, 255, 0.8)", // Add a subtle background for readability
 }}
 >
 {elapsedTime} / {totalTime}s
 */}
 
 

 {/* Download button */}
 > (e.target.style.backgroundColor = "#218838")}
 onMouseOut={(e) => (e.target.style.backgroundColor = "#28a745")}
 >
 Download Video
 
 {/* {recording && <p>Recording in progress...</p>} */}
 
 
 );
};

export default Preview;



I tried several methods to record the content of the div with the class "layout," which contains dynamic media elements such as images and videos. The approaches I attempted include :


MediaRecorder API : I expected this API to capture the entire div and its contents, but it didn't handle the rendering of all dynamic media elements properly.


html2canvas : I used this to capture the layout as a canvas and then attempted to convert it into a video stream. However, it could not capture smooth transitions between media elements, leading to a choppy or incomplete video output.


RecordRTC : I integrated RecordRTC to capture the canvas stream of the div. Despite setting up the recorder, the resulting video file either had a 0-byte size or only captured parts of the content inconsistently.


FFmpeg and other libraries : I explored these tools hoping they would provide a seamless capture of the dynamic content, but they also failed to capture the full media elements, including videos playing within the layout.


In all cases, I expected to get a complete video recording of the div, including all media transitions, but the results were incomplete or not functional.


Now, I’m seeking an approach or best practice to record the entire div with its dynamic content and media playback.


-
Frames took with ELP camera has unknown pixel format at FHD ?
11 novembre 2024, par Marcel KoperaI'm trying to take a one frame ever x seconds from my usb camera. Name of the camera is : ELP-USBFHD06H-SFV(5-50).
Code is not 100% done yet, but I'm using it this way right now ↓ (
shotfn is called frommain.pyin a loop)


import cv2
import subprocess

from time import sleep
from collections import namedtuple

from errors import *

class Camera:
 def __init__(self, cam_index, res_width, res_height, pic_format, day_time_exposure_ms, night_time_exposure_ms):
 Resolution = namedtuple("resolution", ["width", "height"])
 self.manual_mode(True)

 self.cam_index = cam_index
 self.camera_resolution = Resolution(res_width, res_height)
 self.picture_format = pic_format
 self.day_time_exposure_ms = day_time_exposure_ms
 self.night_time_exposure_ms = night_time_exposure_ms

 self.started: bool = False
 self.night_mode = False

 self.cap = cv2.VideoCapture(self.cam_index, cv2.CAP_V4L2)
 self.cap.set(cv2.CAP_PROP_FRAME_WIDTH, self.camera_resolution.width)
 self.cap.set(cv2.CAP_PROP_FRAME_HEIGHT, self.camera_resolution.height)
 self.cap.set(cv2.CAP_PROP_FOURCC, cv2.VideoWriter_fourcc(*self.picture_format))

 

 def start(self):
 sleep(1)
 if not self.cap.isOpened():
 return CameraCupError()

 self.set_exposure_time(self.day_time_exposure_ms)
 self.set_brightness(0)
 sleep(0.1)
 
 self.started = True



 def shot(self, picture_name, is_night):
 if not self.started:
 return InitializationError()

 self.configure_mode(is_night)

 # Clear buffer
 for _ in range(5):
 ret, _ = self.cap.read()

 ret, frame = self.cap.read()

 sleep(0.1)

 if ret:
 print(picture_name)
 cv2.imwrite(picture_name, frame)
 return True

 else:
 print("No photo")
 return False


 
 def release(self):
 self.set_exposure_time(156)
 self.set_brightness(0)
 self.manual_mode(False)
 self.cap.release()



 def manual_mode(self, switch: bool):
 if switch:
 subprocess.run(["v4l2-ctl", "--set-ctrl=auto_exposure=1"])
 else:
 subprocess.run(["v4l2-ctl", "--set-ctrl=auto_exposure=3"])
 sleep(1)

 
 
 def configure_mode(self, is_night):
 if is_night == self.night_mode:
 return

 if is_night:
 self.night_mode = is_night
 self.set_exposure_time(self.night_time_exposure_ms)
 self.set_brightness(64)
 else:
 self.night_mode = is_night
 self.set_exposure_time(self.day_time_exposure_ms)
 self.set_brightness(0)
 sleep(0.1)



 def set_exposure_time(self, ms: int):
 ms = int(ms)
 default_val = 156

 if ms < 1 or ms > 5000:
 ms = default_val

 self.cap.set(cv2.CAP_PROP_EXPOSURE, ms)



 def set_brightness(self, value: int):
 value = int(value)
 default_val = 0

 if value < -64 or value > 64:
 value = default_val

 self.cap.set(cv2.CAP_PROP_BRIGHTNESS, value)


Here are settings for the camera (yaml file)


camera:
 camera_index: 0
 res_width: 1920
 res_height: 1080
 picture_format: "MJPG"
 day_time_exposure_ms: 5
 night_time_exposure_ms: 5000
 photos_format: "jpg"



I do some configs like set manual mode for the camera, change exposure/brightness and saving frame.
Also the camera is probably catching the frames to the buffer (it is not saving latest frame in real time : it's more laggish), so I have to clear buffer every time. like this


# Clear buffer from old frames
 for _ in range(5):
 ret, _ = self.cap.read()
 
 # Get a new frame
 ret, frame = self.cap.read()


What I really don't like, but I could find a better way (tldr : setting buffer for 1 frame doesn't work on my camera).


Frames saved this method looks good with 1920x1080 resolution. BUT when I try to run
ffmpegcommand to make a timelapse from savedjpgfile like this

ffmpeg -framerate 20 -pattern_type glob -i "*.jpg" -c:v libx264 output.mp4


I got an error like this one


[image2 @ 0x555609c45240] Could not open file : 08:59:20.jpg
[image2 @ 0x555609c45240] Could not find codec parameters for stream 0 (Video: mjpeg, none(bt470bg/unknown/unknown)): unspecified size
Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options
Input #0, image2, from '*.jpg':
 Duration: 00:00:00.05, start: 0.000000, bitrate: N/A
 Stream #0:0: Video: mjpeg, none(bt470bg/unknown/unknown), 20 fps, 20 tbr, 20 tbn
Output #0, mp4, to 'output.mp4':
Output file #0 does not contain any stream


Also when I try to copy the files from Linux to Windows I get some weird copy failing error and option to skip the picture. But even when I press the skip button, the picture is copied and can be opened. I'm not sure what is wrong with the format, but the camera is supporting MPEG at 1920x1080.


>>> v4l2-ctl --all

Driver Info:
 Driver name : uvcvideo
 Card type : H264 USB Camera: USB Camera
 Bus info : usb-xhci-hcd.1-1
 Driver version : 6.6.51
 Capabilities : 0x84a00001
 Video Capture
 Metadata Capture
 Streaming
 Extended Pix Format
 Device Capabilities
 Device Caps : 0x04200001
 Video Capture
 Streaming
 Extended Pix Format
Media Driver Info:
 Driver name : uvcvideo
 Model : H264 USB Camera: USB Camera
 Serial : 2020032801
 Bus info : usb-xhci-hcd.1-1
 Media version : 6.6.51
 Hardware revision: 0x00000100 (256)
 Driver version : 6.6.51
Interface Info:
 ID : 0x03000002
 Type : V4L Video
Entity Info:
 ID : 0x00000001 (1)
 Name : H264 USB Camera: USB Camera
 Function : V4L2 I/O
 Flags : default
 Pad 0x0100000d : 0: Sink
 Link 0x0200001a: from remote pad 0x1000010 of entity 'Extension 4' (Video Pixel Formatter): Data, Enabled, Immutable
Priority: 2
Video input : 0 (Camera 1: ok)
Format Video Capture:
 Width/Height : 1920/1080
 Pixel Format : 'MJPG' (Motion-JPEG)
 Field : None
 Bytes per Line : 0
 Size Image : 4147789
 Colorspace : sRGB
 Transfer Function : Default (maps to sRGB)
 YCbCr/HSV Encoding: Default (maps to ITU-R 601)
 Quantization : Default (maps to Full Range)
 Flags :
Crop Capability Video Capture:
 Bounds : Left 0, Top 0, Width 1920, Height 1080
 Default : Left 0, Top 0, Width 1920, Height 1080
 Pixel Aspect: 1/1
Selection Video Capture: crop_default, Left 0, Top 0, Width 1920, Height 1080, Flags:
Selection Video Capture: crop_bounds, Left 0, Top 0, Width 1920, Height 1080, Flags:
Streaming Parameters Video Capture:
 Capabilities : timeperframe
 Frames per second: 15.000 (15/1)
 Read buffers : 0

User Controls

 brightness 0x00980900 (int) : min=-64 max=64 step=1 default=0 value=64
 contrast 0x00980901 (int) : min=0 max=64 step=1 default=32 value=32
 saturation 0x00980902 (int) : min=0 max=128 step=1 default=56 value=56
 hue 0x00980903 (int) : min=-40 max=40 step=1 default=0 value=0
 white_balance_automatic 0x0098090c (bool) : default=1 value=1
 gamma 0x00980910 (int) : min=72 max=500 step=1 default=100 value=100
 gain 0x00980913 (int) : min=0 max=100 step=1 default=0 value=0
 power_line_frequency 0x00980918 (menu) : min=0 max=2 default=1 value=1 (50 Hz)
 0: Disabled
 1: 50 Hz
 2: 60 Hz
 white_balance_temperature 0x0098091a (int) : min=2800 max=6500 step=1 default=4600 value=4600 flags=inactive
 sharpness 0x0098091b (int) : min=0 max=6 step=1 default=3 value=3
 backlight_compensation 0x0098091c (int) : min=0 max=2 step=1 default=1 value=1

Camera Controls

 auto_exposure 0x009a0901 (menu) : min=0 max=3 default=3 value=1 (Manual Mode)
 1: Manual Mode
 3: Aperture Priority Mode
 exposure_time_absolute 0x009a0902 (int) : min=1 max=5000 step=1 default=156 value=5000
 exposure_dynamic_framerate 0x009a0903 (bool) : default=0 value=0


I also tried to save the picture using
ffmpegin a case something is not right withopencvlike this :

ffmpeg -f v4l2 -framerate 30 -video_size 1920x1080 -i /dev/video0 -c:v libx264 -preset fast -crf 23 -t 00:01:00 output.mp4



It is saving the picture but also changing its format


[video4linux2,v4l2 @ 0x555659ed92b0] The V4L2 driver changed the video from 1920x1080 to 800x600
[video4linux2,v4l2 @ 0x555659ed92b0] The driver changed the time per frame from 1/30 to 1/15


But the format looks right when set it back to FHD using
v4l2


>>> v4l2-ctl --device=/dev/video0 --set-fmt-video=width=1920,height=1080,pixelformat=MJPG
>>> v4l2-ctl --get-fmt-video

Format Video Capture:
 Width/Height : 1920/1080
 Pixel Format : 'MJPG' (Motion-JPEG)
 Field : None
 Bytes per Line : 0
 Size Image : 4147789
 Colorspace : sRGB
 Transfer Function : Default (maps to sRGB)
 YCbCr/HSV Encoding: Default (maps to ITU-R 601)
 Quantization : Default (maps to Full Range)
 Flags :


I'm not sure what could be wrong with the format/camera and I don't think I have enough information to figure it out.


I tried to use
ffmpeginstead ofopencvand also change a few settings inopencv's cupconfig.

-
FFMPEG split video with equal frames in the splits....?
17 janvier 2017, par Gurinderbeer SinghI am using FFMPEG to split a video file by using the following command :
ffmpeg -i input.mp4 -c copy -segment_times 600,600 -f segment out%d.mp4This command divides video based on time.. But even if output splits are of same duration, number of frames are different in the splits..
Is there a way of splitting a video file without recoding so that number of frames are equal in splitted files.?
Even if it use some other tool than FFMPEG.
For example : input.mp4 of duration 200 seconds has 5000 frames.
Can we split this into :
input1.mp4 having 2500 frames
and input2.mp4 having 2500 frames.It doesn’t matter if duration of output splits is different..
Please help.....!
Syndiquer tout le site
