Reputation: 1
I'm trying to send two video stream from browser as array buffer (webcam and screen share video) to server via Web RTC data channels and want ffmpeg to add webcam as overlay on screen share video and send it to youtube RTMP server, the RTC connections are established and server does receives buffer , Im getting error in Ffmpeg..error is at bottom , any tips on to add overlay and send it to youtube RTMP server would be appreciated.
` const webCamStream = await navigator.mediaDevices.getUserMedia({ video: true ,audio:true }); const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const webcamRecorder = new MediaRecorder(webCamStream, { mimeType: 'video/webm' });
webcamRecorder.ondataavailable = (event) => {
if (event.data.size > 0 && webcamDataChannel.readyState === 'open') {
const reader = new FileReader();
reader.onload = function () {
const arrayBuffer = this.result;
webcamDataChannel.send(arrayBuffer);
};
reader.readAsArrayBuffer(event.data);
}
};
webcamRecorder.start(100); // Adjust the interval as needed
// Send screen share stream data
const screenRecorder = new MediaRecorder(screenStream, { mimeType: 'video/webm' });
screenRecorder.ondataavailable = (event) => {
if (event.data.size > 0 && screenDataChannel.readyState === 'open') {
const reader = new FileReader();
reader.onload = function () {
const arrayBuffer = this.result;
screenDataChannel.send(arrayBuffer);
};
reader.readAsArrayBuffer(event.data);
}
};
screenRecorder.start(100);
`
const youtubeRTMP = 'rtmp://a.rtmp.youtube.com/live2/youtube key';
// Create PassThrough streams for webcam and screen
const webcamStream = new PassThrough();
const screenStream = new PassThrough();
// FFmpeg arguments for processing live streams
const ffmpegArgs = [
'-re',
'-i', 'pipe:3', // Webcam input via pipe:3
'-i', 'pipe:4', // Screen share input via pipe:4
'-filter_complex', // Complex filter for overlay
'[0:v]scale=320:240[overlay];[1:v][overlay]overlay=10:10[out]',
'-map', '[out]', // Map the output video stream
'-c:v', 'libx264', // Use H.264 codec for video
'-preset', 'ultrafast', // Use ultrafast preset for low latency
'-crf', '25', // Set CRF for quality/size balance
'-pix_fmt', 'yuv420p', // Pixel format for compatibility
'-c:a', 'aac', // Use AAC codec for audio
'-b:a', '128k', // Set audio bitrate
'-f', 'flv', // Output format (FLV for RTMP)
youtubeRTMP // Output to YouTube RTMP server
];
// Spawn the FFmpeg process
const ffmpegProcess = spawn('ffmpeg', ffmpegArgs, {
stdio: ['pipe', 'pipe', 'pipe', 'pipe', 'pipe']
});
// Pipe the PassThrough streams into FFmpeg
webcamStream.pipe(ffmpegProcess.stdio[3]);
screenStream.pipe(ffmpegProcess.stdio[4]);
ffmpegProcess.on('close', code => {
console.log(`FFmpeg process exited with code ${code}`);
});
ffmpegProcess.on('error', error => {
console.error(`FFmpeg error: ${error.message}`);
});
const handleIncomingData = (data, stream) => {
const buffer = Buffer.from(data);
stream.write(buffer);
};
pc.ondatachannel = event => {
const dataChannel = event.channel;
pc.dc = event.channel;
pc.dc.onmessage = event => {
// Spawn the FFmpeg process
// console.log('Message from client:', event.data);
const data = event.data;
if (dataChannel.label === 'webcam') {
handleIncomingData(data, webcamStream);
} else if (dataChannel.label === 'screen') {
handleIncomingData(data, screenStream);
}
};
pc.dc.onopen = e=>{
// recHead.innerText = "Waiting for user to send files"
console.log("channel opened!")
}
};
[in#0 @ 0000020e585a1b40] Error opening input: Bad file descriptor
Error opening input file pipe:3.
Error opening input files: Bad file descriptor
Upvotes: 0
Views: 56