Recherche avancée
Autres articles (50)
-
La file d’attente de SPIPmotion
28 novembre 2010, parUne file d’attente stockée dans la base de donnée
Lors de son installation, SPIPmotion crée une nouvelle table dans la base de donnée intitulée spip_spipmotion_attentes.
Cette nouvelle table est constituée des champs suivants : id_spipmotion_attente, l’identifiant numérique unique de la tâche à traiter ; id_document, l’identifiant numérique du document original à encoder ; id_objet l’identifiant unique de l’objet auquel le document encodé devra être attaché automatiquement ; objet, le type d’objet auquel (...) -
Des sites réalisés avec MediaSPIP
2 mai 2011, parCette page présente quelques-uns des sites fonctionnant sous MediaSPIP.
Vous pouvez bien entendu ajouter le votre grâce au formulaire en bas de page. -
Support audio et vidéo HTML5
10 avril 2011MediaSPIP utilise les balises HTML5 video et audio pour la lecture de documents multimedia en profitant des dernières innovations du W3C supportées par les navigateurs modernes.
Pour les navigateurs plus anciens, le lecteur flash Flowplayer est utilisé.
Le lecteur HTML5 utilisé a été spécifiquement créé pour MediaSPIP : il est complètement modifiable graphiquement pour correspondre à un thème choisi.
Ces technologies permettent de distribuer vidéo et son à la fois sur des ordinateurs conventionnels (...)
Sur d’autres sites (3932)
-
How to compress webcam videos recorded by html5 MediaRecorder api ?
19 mai 2017, par JasonYI successfully recorded my webcam using MediaRecorder api and the resulting filesizes seemed far too big for their quality.
For example, for an 8 second video that was 480x640 I got a 1mB file size. That does not seem right.
My code to record()
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function(stream){
var options = {
mimeType : "video/webm;codecs=vp9"
//I don't set bitrate here even if I do the quality is too bad
}
var media_recorder = new MediaRecorder(media_stream, options);
var recorded_data = [];
media_recorder.ondataavailable = function(e){
recorded_data.push(e.data);
}
media_recorder.onstop = function(e){
recorded_data.push(e.data);
var recorded_blob = new Blob(recorded_data, { 'type' : 'video/webm; codecs=vp9' });
var recorded_video_url = window.URL.createObjectURL(recorded_blob);
//here I write some code to download the blob from this url through a href
}
})The file obtained by this method is unreasonably large which makes me wonder if it was even compressed when encoded by VP9 ? A 7 second video is about 870kB !
Inspecting the file with a mediainfo tool gives me
General
Count : 323
Count of stream of this kind : 1
Kind of stream : General
Kind of stream : General
Stream identifier : 0
Count of video streams : 1
Count of audio streams : 1
Video_Format_List : VP9
Video_Format_WithHint_List : VP9
Codecs Video : V_VP9
Video_Language_List : English
Audio_Format_List : Opus
Audio_Format_WithHint_List : Opus
Audio codecs : Opus
Audio_Language_List : English
Complete name : recorded_video.webm
File name : recorded_video
File extension : webm
Format : WebM
Format : WebM
Format/Url : http://www.webmproject.org/
Format/Extensions usually used : webm
Commercial name : WebM
Format version : Version 2
Internet media type : video/webm
Codec : WebM
Codec : WebM
Codec/Url : http://www.webmproject.org/
Codec/Extensions usually used : webm
File size : 867870
File size : 848 KiB
File size : 848 KiB
File size : 848 KiB
File size : 848 KiB
File size : 847.5 KiB
File last modification date : UTC 2017-05-19 05:48:00
File last modification date (local) : 2017-05-19 17:48:00
Writing application : Chrome
Writing application : Chrome
Writing library : Chrome
Writing library : Chrome
IsTruncated : Yes
Video
Count : 332
Count of stream of this kind : 1
Kind of stream : Video
Kind of stream : Video
Stream identifier : 0
StreamOrder : 1
ID : 2
ID : 2
Unique ID : 62101435245162993
Format : VP9
Commercial name : VP9
Codec ID : V_VP9
Codec ID/Url : http://www.webmproject.org/
Codec : V_VP9
Codec : V_VP9
Width : 640
Width : 640 pixels
Height : 480
Height : 480 pixels
Pixel aspect ratio : 1.000
Display aspect ratio : 1.333
Display aspect ratio : 4:3
Frame rate mode : VFR
Frame rate mode : Variable
Language : en
Language : English
Language : English
Language : en
Language : eng
Language : en
Default : Yes
Default : Yes
Forced : No
Forced : No
Audio
Count : 272
Count of stream of this kind : 1
Kind of stream : Audio
Kind of stream : Audio
Stream identifier : 0
StreamOrder : 0
ID : 1
ID : 1
Unique ID : 32224324715799545
Format : Opus
Format/Url : http://opus-codec.org/
Commercial name : Opus
Internet media type : audio/opus
Codec ID : A_OPUS
Codec ID/Url : http://opus-codec.org
Codec : Opus
Codec : Opus
Codec/Family : PCM
Channel(s) : 1
Channel(s) : 1 channel
Channel positions : Front: C
Channel positions : 1/0/0
Sampling rate : 48000
Sampling rate : 48.0 KHz
Compression mode : Lossy
Compression mode : Lossy
Delay : 718
Delay : 718ms
Delay : 718ms
Delay : 718ms
Delay : 00:00:00.718
Delay, origin : Container
Delay, origin : Container
Language : en
Language : English
Language : English
Language : en
Language : eng
Language : en
Default : Yes
Default : Yes
Forced : No
Forced : NoWhat did I do wrong ? Do I have to re-encode it after the chunks get appended ? Is there some attribute I’m missing ? VP9 is supposed to reduce file sizes drastically.
-
How to compress webcam videos recorded by html5 MediaRecorder api ?
25 mai 2017, par JasonYI successfully recorded my webcam using MediaRecorder api and the resulting filesizes seemed far too big for their quality.
For example, for an 8 second video that was 480x640 I got a 1mB file size. That does not seem right.
My code to record()
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function(stream){
var options = {
mimeType : "video/webm;codecs=vp9"
//I don't set bitrate here even if I do the quality is too bad
}
var media_recorder = new MediaRecorder(media_stream, options);
var recorded_data = [];
media_recorder.ondataavailable = function(e){
recorded_data.push(e.data);
}
media_recorder.onstop = function(e){
recorded_data.push(e.data);
var recorded_blob = new Blob(recorded_data, { 'type' : 'video/webm; codecs=vp9' });
var recorded_video_url = window.URL.createObjectURL(recorded_blob);
//here I write some code to download the blob from this url through a href
}
})The file obtained by this method is unreasonably large which makes me wonder if it was even compressed when encoded by VP9 ? A 7 second video is about 870kB !
Inspecting the file with a mediainfo tool gives me
General
Count : 323
Count of stream of this kind : 1
Kind of stream : General
Kind of stream : General
Stream identifier : 0
Count of video streams : 1
Count of audio streams : 1
Video_Format_List : VP9
Video_Format_WithHint_List : VP9
Codecs Video : V_VP9
Video_Language_List : English
Audio_Format_List : Opus
Audio_Format_WithHint_List : Opus
Audio codecs : Opus
Audio_Language_List : English
Complete name : recorded_video.webm
File name : recorded_video
File extension : webm
Format : WebM
Format : WebM
Format/Url : http://www.webmproject.org/
Format/Extensions usually used : webm
Commercial name : WebM
Format version : Version 2
Internet media type : video/webm
Codec : WebM
Codec : WebM
Codec/Url : http://www.webmproject.org/
Codec/Extensions usually used : webm
File size : 867870
File size : 848 KiB
File size : 848 KiB
File size : 848 KiB
File size : 848 KiB
File size : 847.5 KiB
File last modification date : UTC 2017-05-19 05:48:00
File last modification date (local) : 2017-05-19 17:48:00
Writing application : Chrome
Writing application : Chrome
Writing library : Chrome
Writing library : Chrome
IsTruncated : Yes
Video
Count : 332
Count of stream of this kind : 1
Kind of stream : Video
Kind of stream : Video
Stream identifier : 0
StreamOrder : 1
ID : 2
ID : 2
Unique ID : 62101435245162993
Format : VP9
Commercial name : VP9
Codec ID : V_VP9
Codec ID/Url : http://www.webmproject.org/
Codec : V_VP9
Codec : V_VP9
Width : 640
Width : 640 pixels
Height : 480
Height : 480 pixels
Pixel aspect ratio : 1.000
Display aspect ratio : 1.333
Display aspect ratio : 4:3
Frame rate mode : VFR
Frame rate mode : Variable
Language : en
Language : English
Language : English
Language : en
Language : eng
Language : en
Default : Yes
Default : Yes
Forced : No
Forced : No
Audio
Count : 272
Count of stream of this kind : 1
Kind of stream : Audio
Kind of stream : Audio
Stream identifier : 0
StreamOrder : 0
ID : 1
ID : 1
Unique ID : 32224324715799545
Format : Opus
Format/Url : http://opus-codec.org/
Commercial name : Opus
Internet media type : audio/opus
Codec ID : A_OPUS
Codec ID/Url : http://opus-codec.org
Codec : Opus
Codec : Opus
Codec/Family : PCM
Channel(s) : 1
Channel(s) : 1 channel
Channel positions : Front: C
Channel positions : 1/0/0
Sampling rate : 48000
Sampling rate : 48.0 KHz
Compression mode : Lossy
Compression mode : Lossy
Delay : 718
Delay : 718ms
Delay : 718ms
Delay : 718ms
Delay : 00:00:00.718
Delay, origin : Container
Delay, origin : Container
Language : en
Language : English
Language : English
Language : en
Language : eng
Language : en
Default : Yes
Default : Yes
Forced : No
Forced : NoWhat did I do wrong ? Do I have to re-encode it after the chunks get appended ? Is there some attribute I’m missing ? VP9 is supposed to reduce file sizes drastically.
-
Python Flask : Saving live stream video to a file periodically
25 juillet 2023, par Sanjay ShahiI am creating a flask application with JavaScript to save the live video streams to a file.


What I am trying to achieve here is that, the video stream will be sent to flask application periodically (20 secs). The first time it will create a video and after that, the video needs to be merged to the existing file.


I am using SocketIO to transmit the video from JS.


`async function startCapture() {
 try {
 // Access the user's webcam
 stream = await navigator.mediaDevices.getUserMedia({ 
 video: true,
 audio: { echoCancellation: true, noiseSuppression: true },
 });

 // Attach the stream to the video element
 video.srcObject = stream;

 // Create a new MediaRecorder instance to capture video chunks
 recorder = new MediaRecorder(stream);

 // Event handler for each data chunk received from the recorder
 recorder.ondataavailable = (e) => {
 const videoBlob = e.data;
 transmitVideoChunk(videoBlob);
 chunks.push(e.data);
 };

 // Start recording the video stream
 recorder.start();

 // Enable/disable buttons
 startButton.disabled = true;
 stopButton.disabled = false;

 // Start transmitting video chunks at the desired fps
 startTransmitting();
 } catch (error) {
 console.error('Error accessing webcam:', error);
 }
}`


`
function transmitVideoBlob() {
 const videoBlob = new Blob(chunks, { type: 'video/webm' });
 socket.emit('video_data', videoBlob);
 // Clear the chunks array
 chunks = [];
}

// Start transmitting video chunks at the desired fps
function startTransmitting() {
 const videoInterval = 20000; // Interval between frames in milliseconds
 videoIntervalId = setInterval(() => {
 transmitVideoBlob();
 }, videoInterval);
}`


In flask, I have created a function, which will call create_videos.
video_path : location to save the video
filename : file name of video
new_video_data_blob : binary data received from JS


def create_videos(video_path, filename, new_video_data_blob):
 chunk_filename = os.path.join(video_path, f"{str(uuid1())}_{filename}")
 final_filename = os.path.join(video_path, filename)
 out_final_filename = os.path.join(video_path, "out_" + filename)
 # Save the current video chunk to a file
 with open(chunk_filename, "wb") as f:
 print("create file chunk ", chunk_filename)
 f.write(new_video_data_blob)

 if not os.path.exists(final_filename):
 # If the final video file doesn't exist, rename the current chunk file
 os.rename(chunk_filename, final_filename)
 else:
 while not os.path.exists(chunk_filename):
 time.sleep(0.1)
 # If the final video file exists, use FFmpeg to concatenate the current chunk with the existing file
 try:
 subprocess.run(
 [
 "ffmpeg",
 "-i",
 f"concat:{final_filename}|{chunk_filename}",
 "-c",
 "copy",
 "-y",
 out_final_filename,
 ]
 )
 while not os.path.exists(out_final_filename):
 time.sleep(0.1)
 os.remove(final_filename)
 os.rename(out_final_filename, final_filename)

 except Exception as e:
 print(e)
 # Remove the current chunk file
 os.remove(chunk_filename)
 return final_filename


When I record as well using below code in JS


audio: { echoCancellation: true, noiseSuppression: true },


I get the following error.


[NULL @ 0x55e697e8c900] Invalid profile 5.
[webm @ 0x55e697ec3180] Non-monotonous DTS in output stream 0:0; previous: 37075, current: 37020; changing to 37075. This may result in incorrect timestamps in the output file.
[NULL @ 0x55e697e8d8c0] Error parsing Opus packet header.
 Last message repeated 1 times
[NULL @ 0x55e697e8c900] Invalid profile 5.
[NULL @ 0x55e697e8d8c0] Error parsing Opus packet header.




But when I record video only, it will work fine.


How can I merge the new binary data to the existing video file ?


Syndiquer tout le site
