UI gets stuck when recording!

[rudresh-ajgaonkar]

Hey i am experiencing the following issue when i try to run the the cccapture code using ffmpegserver

Here is the codepen. The code captures frames but doesn't allow to move the plotly graph.

I copy pasted my code in the test.html file for convenience.

http://codepen.io/rudi8292/pen/pbQpgA

[greggman]

Sorry, ffmpegserver wasn't meant for realtime capture it was just meant to capture non-interactive animation playback for very long animations.

I don't know what to recommend for realtime capture. Maybe start with one of the browser side gif compressor libraries like https://jnordberg.github.io/gif.js/

[rudresh-ajgaonkar]

Found a Workaround . Just added a settimeout around requestAnimationFrame in Ccapture.js

But having problem now in forming the video. It gives some error in an alert. Cannot figure out whats wrong.

[rudresh-ajgaonkar]

[]({
"result": {
"code": 1,
"stdout": "",
"stderr": "ffmpeg version 2.5.3- http://johnvansickle.com/ffmpeg/ Copyright %28c) 2000-2015 the FFmpeg developers\n built on Jan 10 2015 09:24:27 with gcc 4.9.2 (Debian 4.9.2-10)\n configuration: --enable-gpl --enable-version3 --disable-shared --disable-debug --enable-runtime-cpudetect --enable-libmp3lame --enable-libx264 --enable-libx265 --enable-libwebp --enable-libspeex --enable-libvorbis --enable-libvpx --enable-libfreetype --enable-fontconfig --enable-libxvid --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-gray --enable-libopenjpeg --enable-libopus --disable-ffserver --enable-libass --enable-gnutls --cc=gcc\n libavutil 54. 15.100 / 54. 15.100\n libavcodec 56. 13.100 / 56. 13.100\n libavformat 56. 15.102 / 56. 15.102\n libavdevice 56. 3.100 / 56. 3.100\n libavfilter 5. 2.103 / 5. 2.103\n libswscale 3. 1.101 / 3. 1.101\n libswresample 1. 1.100 / 1. 1.100\n libpostproc 53. 3.100 / 53. 3.100\nInput #0, image2, from '/home/rudresh/Documents/Working_Folder/scatter_solo_feature/experiments/ffmpegserver.js/output/untitled-3-%d.png':\n Duration: 00:00:03.47, start: 0.000000, bitrate: N/A\n Stream #0:0: Video: png, rgba, 539x375, 30 fps, 30 tbr, 30 tbn, 30 tbc\n[libx264 @ 0x3f418a0] width not divisible by 2 (539x375)\nOutput #0, mp4, to '/home/rudresh/Documents/Working_Folder/scatter_solo_feature/experiments/ffmpegserver.js/output/untitled-3.mp4':\n Stream #0:0: Video: h264, none, q=2-31, 128 kb/s, 30 fps\n Metadata:\n encoder : Lavc56.13.100 libx264\nStream mapping:\n Stream #0:0 -> #0:0 (png (native) -> h264 (libx264))\nError while opening encoder for output stream #0:0 - maybe incorrect parameters such as bit_rate, rate, width or height\n"
}
})

This the error i get.

[rudresh-ajgaonkar]

How can i specify Width and height ? I tried to manipulate the canvas size and it worked. But i am looking for a full time solution

[datermine]

I'm having the same issue regarding the UI becoming unresponsive. I've added a setTimeout around the requestAnimationFrame call, but it didn't seem to help.

Anyone get this working? I'm trying to implement a canvas that can be drawn upon. I experimented with having the mouse/touch events touch something other than the canvas, but that didn't do fix anything.

POC:
https://pastebin.com/raw/A4FDcTnT
https://pastebin.com/raw/yaw5ZL2D
https://pastebin.com/raw/n6TVnEMN

[greggman]

As it mentions above this isn't a solution for interactive demos. You'd probably need to look into the screen capture API and setting up a server to receive the stream

https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture

[greggman]

this example shows capturing video on the client

https://webrtc.github.io/samples/src/content/getusermedia/record/

Combined with https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture

you could probably capture your stuff in realtime

Also

https://stackoverflow.com/questions/16571044/how-to-record-webcam-and-audio-using-webrtc-and-a-server-based-peer-connection

[datermine]

None of these will work on iOS right now, afaict.