ChoOo7
commented
1 month ago Dans function onRecordClicked() { je met ce code. AU préalable j'injecte la lib socket io, meme version que celui du serveur
https://github.com/apivideo/browserLiveStream (url du serveur et du flux rtmp à adapter)
En retour, le flux live sur api.video est sacadé Mon retour ffmpeg m'indique que mon est bien au dela de 1X donc ça ne semble pas être un souci de vitesse d'encodage sur ma VM Je ne pense pas que ce soit non plus la taille des paquets, car lorsque je fais un test avec browserLiveStream j'arrive à avoir quelque chose de consistant en terme de taille qui se passe bien
Je ne comprends pas pourquoi pur le live, la visualisation via le code embed freeze toutes les secondes
Auriez vous des choses à conseiller ? Merci
var canvas = composer.getCanvas(); var mediaStream = canvas.captureStream(15); console.log(' stream', mediaStream);
var socketio_address = "wss://172.201.YYY.XXX:1437/";
var framerate = 15; var audiobitrate = 0; var socketOptions = { secure: true, reconnection: true, reconnectionDelay: 1000, timeout:15000, pingTimeout: 15000, pingInterval: 45000, query: {framespersecond: framerate, audioBitrate: 0} };
//start socket connection console.log('socketio_address', socketio_address); var socket = io.connect(socketio_address, socketOptions); console.log('socket', socket); socket.emit('config_rtmpDestination', 'rtmp://broadcast.api.video/s/69fe07c4-XXXX-PPPP-OOOO-b96fe435d95f'); socket.emit('start','start');
socket.on("connect_timeout", (timeout) => { console.log("state on connection timeout= " + timeout); }); socket.on("error", (error) => { console.log("state on connection error= " + error, error); });
socket.on("connect_error", function () { console.log("state on connection error= "); });
socket.on("message", function (m) { //console.log("state on message= " + state); console.log("recv server message", m); });
socket.on("fatal", function (m) { console.log("fatal socket error!!", m); console.log("media recorder restarted");
});
socket.on("ffmpeg_stderr", function (m) { console.log("FFMPEG:" + m); });
socket.on("disconnect", function (reason) { console.log("ERROR: server disconnected!" + reason); });
let mediaRecorder = new MediaRecorder(mediaStream, { mimeType: 'video/webm;codecs=h264', videoBitsPerSecond: 50*1000, });
mediaRecorder.addEventListener('dataavailable', (e) => { console.log('data', e.data, socket); socket.emit("binarystream",e.data); });
mediaRecorder.start(1000); // Start recording, and dump data every 1s
Version
Last
Environment that reproduces the issue
Chrome
Use case description
Bonjour
Je cherche à faire une intégration de record a video avec un flux RTMP
J'ai pris connaissance de https://github.com/apivideo/browserLiveStream avec un serveur node qui pousse un stream envoyé par websocket vers node, qui encode et envoie vers un serveur RTMP
Sur ce simple projet, on recupère un stream et on l'upload https://github.com/apivideo/browserLiveStream/blob/main/public/index.html#L309
Sur ce projet (recordavideo) l'upload est directement fait vers une création de VOD
Cela se passe sur ce projet github https://github.com/apivideo/api.video-typescript-media-stream-composer
Je me demandais s'il était possible, en utilisant la methode getCanvas https://github.com/apivideo/api.video-typescript-media-stream-composer?tab=readme-ov-file#getcanvas-htmlcanvaselement--undefined d'utiliser ensuite un captureStream() pour retrouver quelque chose de "connu" et faire un upload de ce stream par websocket ver le server node
Que pensez-vous de cette intégration ?
Par avance, merci
Proposed solution
No response
Alternative solutions
No response