I'm trying transcode webcam blob data to a rtmp server from browser by using ffmpeg.wasm .
first, i create a MediaStream.
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
});
then, i create a MediaRecorder.
const recorder = new MediaRecorder(stream, {mimeType: "video/webm; codecs:vp9"});
recorder.ondataavailable = handleDataAvailable;
recorder.start(0)
when data is available, i call a function called handleDataAvailable.
here is the function.
const handleDataAvailable = (event: BlobEvent) => {
console.log("data-available");
if (event.data.size > 0) {
recordedChunksRef.current.push(event.data);
transcode(event.data)
}
};
in above code, i use another function which called transcode it's goal is going to send data to rtmp server using use ffmpeg.wasm.
here it is.
const transcode = async (inputVideo: Blob | undefined) => {
const ffmpeg = ffmpegRef.current;
const fetchFileOutput = await fetchFile(inputVideo)
ffmpeg?.writeFile('input.webm', fetchFileOutput)
const data = await ffmpeg?.readFile('input.webm');
if (videoRef.current) {
videoRef.current.src =
URL.createObjectURL(new Blob([(data as any)?.buffer], {type: 'video/webm'}));
}
// execute by node-media-server config 1
await ffmpeg?.exec(['-re', '-i', 'input.webm', '-c', 'copy', '-f', 'flv', "rtmp://localhost:1935/live/ttt"])
// execute by node-media-server config 2
// await ffmpeg?.exec(['-re', '-i', 'input.webm', '-c:v', 'libx264', '-preset', 'veryfast', '-tune', 'zerolatency', '-c:a', 'aac', '-ar', '44100', '-f', 'flv', 'rtmp://localhost:1935/live/ttt']);
// execute by stack-over-flow config 1
// await ffmpeg?.exec(['-re', '-i', 'input.webm', '-c:v', 'h264', '-c:a', 'aac', '-f', 'flv', "rtmp://localhost:1935/live/ttt"]);
// execute by stack-over-flow config 2
// await ffmpeg?.exec(['-i', 'input.webm', '-c:v', 'libx264', '-flags:v', '+global_header', '-c:a', 'aac', '-ac', '2', '-f', 'flv', "rtmp://localhost:1935/live/ttt"]);
// execute by stack-over-flow config 3
// await ffmpeg?.exec(['-i', 'input.webm', '-acodec', 'aac', '-ac', '2', '-strict', 'experimental', '-ab', '160k', '-vcodec', 'libx264', '-preset', 'slow', '-profile:v', 'baseline', '-level', '30', '-maxrate', '10000000', '-bufsize', '10000000', '-b', '1000k', '-f', 'flv', 'rtmp://localhost:1935/live/ttt']);
}
after running app and start streaming, console logs are as below.
ffmpeg >>> ffmpeg version 5.1.3 Copyright (c) 2000-2022 the FFmpeg developers index.tsx:81:20
ffmpeg >>> built with emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784) index.tsx:81:20
ffmpeg >>> configuration: --target-os=none --arch=x86_32 --enable-cross-compile --disable-asm --disable-stripping --disable-programs --disable-doc --disable-debug --disable-runtime-cpudetect --disable-autodetect --nm=emnm --ar=emar --ranlib=emranlib --cc=emcc --cxx=em++ --objcc=emcc --dep-cc=emcc --extra-cflags='-I/opt/include -O3 -msimd128' --extra-cxxflags='-I/opt/include -O3 -msimd128' --disable-pthreads --disable-w32threads --disable-os2threads --enable-gpl --enable-libx264 --enable-libx265 --enable-libvpx --enable-libmp3lame --enable-libtheora --enable-libvorbis --enable-libopus --enable-zlib --enable-libwebp --enable-libfreetype --enable-libfribidi --enable-libass --enable-libzimg index.tsx:81:20
ffmpeg >>> libavutil 57. 28.100 / 57. 28.100 index.tsx:81:20
ffmpeg >>> libavcodec 59. 37.100 / 59. 37.100 index.tsx:81:20
ffmpeg >>> libavformat 59. 27.100 / 59. 27.100 index.tsx:81:20
ffmpeg >>> libavdevice 59. 7.100 / 59. 7.100 index.tsx:81:20
ffmpeg >>> libavfilter 8. 44.100 / 8. 44.100 index.tsx:81:20
ffmpeg >>> libswscale 6. 7.100 / 6. 7.100 index.tsx:81:20
ffmpeg >>> libswresample 4. 7.100 / 4. 7.100 index.tsx:81:20
ffmpeg >>> libpostproc 56. 6.100 / 56. 6.100 index.tsx:81:20
ffmpeg >>> Input #0, matroska,webm, from 'input.webm': index.tsx:81:20
ffmpeg >>> Metadata: index.tsx:81:20
ffmpeg >>> encoder : QTmuxingAppLibWebM-0.0.1 index.tsx:81:20
ffmpeg >>> Duration: N/A, start: 0.000000, bitrate: N/A index.tsx:81:20
ffmpeg >>> Stream #0:0(eng): Video: vp8, yuv420p(progressive), 640x480, SAR 1:1 DAR 4:3, 15.50 tbr, 1k tbn (default)
the problem is when ffmpeg.wasm try to execute the last command.
await ffmpeg?.exec(['-re', '-i', 'input.webm', '-c', 'copy', '-f', 'flv', "rtmp://localhost:1935/live/ttt"]).
it just calls a GET Request, I will send further details about this request.
as u can see, i try to use lots of arg sample with ffmpeg?.exec, but non of them works.
the network tab in browser, after ffmpeg.wasm execute the command is as below.
it send a GET request to ws://localhost:1935/
and nothing happened after that.
for backend, i use node-media-server and here is my output logs when ffmpeg.wasm trying to execute the args
11/28/2023 19:33:18 55301 [INFO] [rtmp disconnect] id=JL569YOF
[NodeEvent on doneConnect] id=JL569YOF args=undefined
at last here are my ques
- how can i achive this option?
- is it possible to share webcam to rtmp server?
