Recherche avancée
Autres articles (34)
-
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 (...) -
HTML5 audio and video support
13 avril 2011, parMediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
For older browsers the Flowplayer flash fallback is used.
MediaSPIP allows for media playback on major mobile platforms with the above (...)
Sur d’autres sites (1614)
-
Revision 30227 : oups
25 juillet 2009, par kent1@… — Logoups
-
NodeJS : Fail to write byte array input from webcam to ffmpeg spawn process
23 mai 2024, par Thanesh PrabaghanI'm using NodeJS server to display an HTML page which has webcam option. Once user visited to my NodeJS server, it will serve html page. User can allow webcam option and see webcam view on the page.


In the backend, I send webcam stream (byte array) using
socket.io. I receive byte array successfully in backend with the help ofsocket.io. BUT MY PROBLEM IS, I can't pipe this byte array to theffmpegspawn process. I don't know how to properly pipe this data to theffmpeg. Once it done, all my problem will be solved.

On the other side, I have
node-media-serveras RTMP server to publish this stream to VLC player and other devices. Kindly help me to complete this task. I will attach all my code to this question. Kindly run this in your environment and answer the question.

MY HTML PAGE




 
 
 

 

 <code class="echappe-js"><script src="https://cdn.socket.io/4.7.5/socket.io.min.js" &#xA; integrity="integrity_code" &#xA; crossorigin="anonymous"></script>
 
 

 

<script>&#xA; const socket = io(&#x27;http://localhost:8080/&#x27;);&#xA; var video = document.getElementById("video");&#xA;&#xA; if (navigator.mediaDevices.getUserMedia) {&#xA; navigator.mediaDevices.getUserMedia({ video: true, audio:true })&#xA; .then(function (stream) {&#xA; const recorder = new MediaRecorder(stream);&#xA;&#xA; recorder.ondataavailable = event => {&#xA; socket.emit(&#x27;VideoStream&#x27;, event.data);&#xA; };&#xA; recorder.start(1000); &#xA; video.srcObject = stream;&#xA; }).catch(function (error) {&#xA; console.log("Something went wrong!");&#xA; });&#xA; } &#xA; </script>
 




FFMPEG IMPLEMENTATION


const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
const path = require('node:path'); 
const { spawn } = require('node:child_process');

let cmd = spawn('ffmpeg.exe', [
 '-c:v', 'copy', '-preset', 'ultrafast', '-tune', 'zerolatency',
 '-c:a', 'aac', '-strict', '-2', '-ar', '44100', '-b:a', '64k',
 '-y',
 '-use_wallclock_as_timestamps', '1',
 '-async', '1',
 '-flush_packets', '1',
 '-rtbufsize', '1000',
 '-bufsize', '1000',
 '-f', 'flv',
 '-i','-',
 'rtmp://localhost:1935',
 ]);

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
 res.sendFile(path.join(__dirname + 'index.html'));
});

io.on('connection', (socket) => {
 socket.on("VideoStream", (data) => {
 cmd.stdin.write(data);
 });
});

server.listen(8080, () => {
 console.log('listening on *:8080');
});

```
**NODE MEDIA SERVER IMPLEMENTATION**

```
const NodeMediaServer = require('node-media-server');

const config = {
 rtmp: {
 port: 1935,
 chunk_size: 60000,
 gop_cache: true,
 ping: 30,
 ping_timeout: 60
 },
 http: {
 port: 8000,
 allow_origin: '*'
 }
};

var nms = new NodeMediaServer(config)
nms.run();
```




-
How to create a video file webm from chunks by media recorder api using ffmpeg
17 octobre 2020, par Caio NakaiI'm trying to create a webm video file from blobs generated by MediaRecorderAPI in a NodeJS server using FFMPEG. I'm able to create the .webm file but it's not playable, I ran this command
$ ffmpeg.exe -v error -i lel.webm -f null - >error.log 2>&1to generate an error log, the error log file contains this :



[null @ 000002ce7501de40] Application provided invalid, non monotonically increasing dts to muxer in stream 0 : 1 >= 1


[h264 @ 000002ce74a727c0] Invalid NAL unit size (804 > 74).


[h264 @ 000002ce74a727c0] Error splitting the input into NAL units.


Error while decoding stream #0:0 : Invalid data found when processing input




This is my web server code


const app = require("express")();
const http = require("http").createServer(app);
const io = require("socket.io")(http);
const fs = require("fs");
const child_process = require("child_process");

app.get("/", (req, res) => {
 res.sendFile(__dirname + "/index.html");
});

io.on("connection", (socket) => {
 console.log("a user connected");

 const ffmpeg = child_process.spawn("ffmpeg", [
 "-i",
 "-",
 "-vcodec",
 "copy",
 "-f",
 "flv",
 "rtmpUrl.webm",
 ]);

 ffmpeg.on("close", (code, signal) => {
 console.log(
 "FFmpeg child process closed, code " + code + ", signal " + signal
 );
 });

 ffmpeg.stdin.on("error", (e) => {
 console.log("FFmpeg STDIN Error", e);
 });

 ffmpeg.stderr.on("data", (data) => {
 console.log("FFmpeg STDERR:", data.toString());
 });

 socket.on("message", (msg) => {
 console.log("Writing blob! ");
 ffmpeg.stdin.write(msg);
 });

 socket.on("stop", () => {
 console.log("Stop recording..");
 ffmpeg.kill("SIGINT");
 });
});

http.listen(3000, () => {
 console.log("listening on *:3000");
});



And this is my client code, using HTML, JS :




 
 
 
 
 
 <code class="echappe-js"><script src='http://stackoverflow.com/socket.io/socket.io.js'></script>
<script>&#xA; const socket = io();&#xA; let mediaRecorder = null;&#xA; const startRecording = (someStream) => {&#xA; const mediaStream = new MediaStream();&#xA; const videoTrack = someStream.getVideoTracks()[0];&#xA; const audioTrack = someStream.getAudioTracks()[0];&#xA; console.log("Video trac ", videoTrack);&#xA; console.log("audio trac ", audioTrack);&#xA; mediaStream.addTrack(videoTrack);&#xA; mediaStream.addTrack(audioTrack);&#xA;&#xA; const recorderOptions = {&#xA; mimeType: "video/webm;codecs=h264",&#xA; videoBitsPerSecond: 3 * 1024 * 1024,&#xA; };&#xA;&#xA; mediaRecorder = new MediaRecorder(mediaStream, recorderOptions);&#xA; mediaRecorder.start(1000); // 1000 - the number of milliseconds to record into each Blob&#xA; mediaRecorder.ondataavailable = (event) => {&#xA; console.debug("Got blob data:", event.data);&#xA; if (event.data &amp;&amp; event.data.size > 0) {&#xA; socket.emit("message", event.data);&#xA; }&#xA; };&#xA; };&#xA;&#xA; const getVideoStream = async () => {&#xA; try {&#xA; const stream = await navigator.mediaDevices.getUserMedia({&#xA; video: true,&#xA; audio: true,&#xA; });&#xA; startRecording(stream);&#xA; myVideo.srcObject = stream;&#xA; } catch (e) {&#xA; console.error("navigator.getUserMedia error:", e);&#xA; }&#xA; };&#xA;&#xA; const stopRecording = () => {&#xA; mediaRecorder.stop();&#xA; socket.emit("stop");&#xA; };&#xA; </script>
 
hello world






 

<script>&#xA; const myVideo = document.getElementById("myvideo");&#xA; myVideo.muted = true;&#xA; </script>
 




Any help is appreciated !


Syndiquer tout le site
