[Feat]: Integration with RTMP

[ChoOo7]

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

[ChoOo7]

Dans
function onRecordClicked() {
je met ce code. AU préalable j'injecte la lib socket io, meme version que celui du serveur

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.4/socket.io.js"></script>

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