I am capturing local webcam stream (video and audio) via Javascript MediaRecorder (video/webm;codecs=vp8,opus). I can replay the dataURL object but cannot successfully upload to a php page on the server for downloading at a later stage.
The client code is:
return await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); startRecording(stream) { console.log(`recording started`); this._recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp8,opus' }); this._recorder.addEventListener(`dataavailable`, this); this._recorder.addEventListener(`stop`, this); this._recorder.addEventListener(`error`, this); this._recorder.start(); } async dataAvailable(data) { this._data.push(data); } async recorderStop() { console.log(`recorder stop`); this._blob = new Blob([...this._data], { type: "video/webm" }); this._replay.src = URL.createObjectURL(this._blob); this.btn_upload.href = this._replay.src; this.btn_upload.download = "clip.webm"; } async uploadFile() { const file_reader = new FileReader(); file_reader.addEventListener(`load`, async e => { const xhr = new XHR(); const data = { blob: e.target.result }; const response = await xhr.post_json(`php/video_upload.php`, data); if (response.error) { alert(`Error: ${response.message}`); } else { alert(`Video uploaded successfully.`); } }) file_reader.readAsDataURL(this._blob); } The PHP file has this:
$data = $_POST['blob']; $decodedData = base64_decode($_POST['blob']); $now = (new DateTime('now'))->format('YmdHis'); $filename = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . "video" . DIRECTORY_SEPARATOR . "uploads" . DIRECTORY_SEPARATOR . "video_$now.webm"; // write the data out to the file $fp = fopen($filename, 'wb'); fwrite($fp, $decodedData); fclose($fp); Running the uploaded file through FFProbe says:
ffprobe version 3.4.8-0ubuntu0.2 Copyright (c) 2007-2020 the FFmpeg developers built with gcc 7 (Ubuntu 7.5.0-3ubuntu1~18.04) configuration: --prefix=/usr --extra-version=0ubuntu0.2 --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --enable-gpl --disable-stripping --enable-avresample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librubberband --enable-librsvg --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzmq --enable-libzvbi --enable-omx --enable-openal --enable-opengl --enable-sdl2 --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-chromaprint --enable-frei0r --enable-libopencv --enable-libx264 --enable-shared libavutil 55. 78.100 / 55. 78.100 libavcodec 57.107.100 / 57.107.100 libavformat 57. 83.100 / 57. 83.100 libavdevice 57. 10.100 / 57. 10.100 libavfilter 6.107.100 / 6.107.100 libavresample 3. 7. 0 / 3. 7. 0 libswscale 4. 8.100 / 4. 8.100 libswresample 2. 9.100 / 2. 9.100 libpostproc 54. 7.100 / 54. 7.100 video_20220219131233.webm: Invalid data found when processing input I have very little knowledge of video/audio encoding but would like to just get the streamed video to be downloadable. Any help would be greatly appreciated.
2 Reset to default
