From 8b896b2a46a04e15ad45a3476f23a0daf08f9253 Mon Sep 17 00:00:00 2001 From: kallaballa Date: Fri, 26 May 2023 00:21:27 +0200 Subject: [PATCH] many small fixes --- modules/v4d/CMakeLists.txt | 41 +-- modules/v4d/include/opencv2/v4d/nvg.hpp | 2 + modules/v4d/include/opencv2/v4d/v4d.hpp | 26 +- modules/v4d/samples/beauty-demo.cpp | 37 ++- modules/v4d/samples/cube-demo.cpp | 17 +- .../v4d/samples/custom_source_and_sink.cpp | 6 +- modules/v4d/samples/display_image.cpp | 9 +- modules/v4d/samples/display_image_fb.cpp | 13 +- .../v4d/samples/example_v4d_beauty-demo.html | 34 ++- .../v4d/samples/example_v4d_cube-demo.html | 271 ++++++++---------- .../example_v4d_custom_source_and_sink.html | 20 -- .../samples/example_v4d_display_image.html | 36 +-- .../samples/example_v4d_display_image_fb.html | 20 -- .../v4d/samples/example_v4d_font-demo.html | 20 -- .../samples/example_v4d_font_rendering.html | 20 -- .../samples/example_v4d_font_with_gui.html | 20 -- .../v4d/samples/example_v4d_nanovg-demo.html | 38 ++- .../v4d/samples/example_v4d_optflow-demo.html | 36 ++- .../samples/example_v4d_pedestrian-demo.html | 36 ++- .../samples/example_v4d_render_opengl.html | 23 +- .../v4d/samples/example_v4d_shader-demo.html | 34 ++- .../samples/example_v4d_vector_graphics.html | 21 +- .../example_v4d_vector_graphics_and_fb.html | 22 +- .../v4d/samples/example_v4d_video-demo.html | 2 +- .../samples/example_v4d_video_editing.html | 36 ++- modules/v4d/samples/font-demo.cpp | 39 ++- modules/v4d/samples/font_rendering.cpp | 9 +- modules/v4d/samples/font_with_gui.cpp | 9 +- modules/v4d/samples/nanovg-demo.cpp | 6 +- modules/v4d/samples/optflow-demo.cpp | 12 +- modules/v4d/samples/pedestrian-demo.cpp | 10 +- modules/v4d/samples/render_opengl.cpp | 6 +- modules/v4d/samples/shader-demo.cpp | 5 +- modules/v4d/samples/vector_graphics.cpp | 7 +- .../v4d/samples/vector_graphics_and_fb.cpp | 11 +- modules/v4d/samples/video-demo.cpp | 7 +- modules/v4d/samples/video_editing.cpp | 5 +- modules/v4d/src/detail/clvacontext.cpp | 24 +- modules/v4d/src/detail/clvacontext.hpp | 7 - modules/v4d/src/detail/framebuffercontext.cpp | 108 ++++--- modules/v4d/src/detail/framebuffercontext.hpp | 11 +- modules/v4d/src/detail/glcontext.cpp | 34 +-- modules/v4d/src/detail/nanoguicontext.cpp | 87 +++--- modules/v4d/src/detail/nanoguicontext.hpp | 16 +- modules/v4d/src/detail/nanovgcontext.cpp | 66 ++--- modules/v4d/src/detail/nanovgcontext.hpp | 10 +- modules/v4d/src/detail/pbodownloader.cpp | 182 ------------ modules/v4d/src/detail/pbodownloader.hpp | 37 --- modules/v4d/src/formhelper.cpp | 1 + modules/v4d/src/nvg.cpp | 11 +- modules/v4d/src/util.cpp | 69 ++--- modules/v4d/src/v4d.cpp | 117 ++++---- modules/v4d/tutorials/00-intro.markdown | 19 +- modules/v4d/tutorials/17-beauty.markdown | 2 +- 54 files changed, 641 insertions(+), 1126 deletions(-) delete mode 100644 modules/v4d/src/detail/pbodownloader.cpp delete mode 100644 modules/v4d/src/detail/pbodownloader.hpp diff --git a/modules/v4d/CMakeLists.txt b/modules/v4d/CMakeLists.txt index edf176db6..2342d9a49 100644 --- a/modules/v4d/CMakeLists.txt +++ b/modules/v4d/CMakeLists.txt @@ -26,7 +26,7 @@ macro(configure_files srcDir destDir) endmacro(configure_files) -macro(add_emscripten_sample sample source) +macro(add_emscripten_sample sample source assets) ocv_add_executable(${sample} ${source}) ocv_target_include_modules(${sample} opencv_core opencv_imgproc opencv_videoio opencv_video opencv_imgcodecs opencv_v4d opencv_face opencv_tracking opencv_objdetect opencv_stitching opencv_optflow opencv_imgcodecs opencv_features2d opencv_dnn opencv_flann) ocv_target_link_libraries(${sample} LINK_PRIVATE opencv_core opencv_imgproc opencv_videoio opencv_video opencv_imgcodecs @@ -39,6 +39,9 @@ macro(add_emscripten_sample sample source) COMMAND ${CMAKE_COMMAND} -E copy "${CMAKE_CURRENT_LIST_DIR}/samples/${sample}.html" "${CMAKE_CURRENT_BINARY_DIR}/../../bin/${sample}.html") + if(${assets}) + target_link_options(${sample} PRIVATE --preload-file assets) + endif() endmacro() macro(add_binary_sample sample) @@ -49,7 +52,7 @@ macro(add_binary_sample sample) endmacro() if(EMSCRIPTEN) - set(EM_LINKER_FLAGS "-sENVIRONMENT=web,worker -sOFFSCREENCANVAS_SUPPORT -sSTANDALONE_WASM -sOFFSCREENCANVASES_TO_PTHREAD=#offscreenCanvas -sEXPORTED_FUNCTIONS=_main,_v4dInitCapture -sEXPORTED_RUNTIME_METHODS=ccall -sPROXY_TO_PTHREAD=1 --use-preload-plugins --preload-file doc/lena.png -sINITIAL_MEMORY=128MB -sALLOW_MEMORY_GROWTH=1 -sUSE_GLFW=3 -sMIN_WEBGL_VERSION=2 -sMAX_WEBGL_VERSION=2 --bind") + set(EM_LINKER_FLAGS "-sENVIRONMENT=web,worker -sWASM_BIGINT=1 -sOFFSCREENCANVAS_SUPPORT -sOFFSCREENCANVASES_TO_PTHREAD=#offscreenCanvas -sEXPORTED_FUNCTIONS=_main,_v4dInitCapture -sEXPORTED_RUNTIME_METHODS=ccall -sPROXY_TO_PTHREAD=1 --use-preload-plugins --preload-file doc/lena.png -sINITIAL_MEMORY=128MB -sALLOW_MEMORY_GROWTH=1 -sUSE_GLFW=3 -sMIN_WEBGL_VERSION=2 -sMAX_WEBGL_VERSION=2 --bind") set(CMAKE_MODULE_LINKER_FLAGS "${CMAKE_MODULE_LINKER_FLAGS} ${EM_LINKER_FLAGS}") set(CMAKE_SHARED_LINKER_FLAGS "${CMAKE_SHARED_LINKER_FLAGS} ${EM_LINKER_FLAGS}") @@ -118,23 +121,23 @@ if(BUILD_EXAMPLES) set(NANOGUI_BUILD_GLFW OFF) include_directories("${CMAKE_CURRENT_SOURCE_DIR}/third/nanogui/ext/glfw/include/") - # add_emscripten_sample(example_v4d_display_image samples/display_image.cpp) - # add_emscripten_sample(example_v4d_display_image_fb samples/display_image_fb.cpp) - # add_emscripten_sample(example_v4d_vector_graphics samples/vector_graphics.cpp) - # add_emscripten_sample(example_v4d_vector_graphics_and_fb samples/vector_graphics_and_fb.cpp) - # add_emscripten_sample(example_v4d_render_opengl samples/render_opengl.cpp) - # add_emscripten_sample(example_v4d_custom_source_and_sink samples/custom_source_and_sink.cpp) - # add_emscripten_sample(example_v4d_font_rendering samples/font_rendering.cpp) - # add_emscripten_sample(example_v4d_font_with_gui samples/font_with_gui.cpp) - # add_emscripten_sample(example_v4d_video_editing samples/video_editing.cpp) - # add_emscripten_sample(example_v4d_cube-demo samples/cube-demo.cpp) - add_emscripten_sample(example_v4d_video-demo samples/video-demo.cpp) - # add_emscripten_sample(example_v4d_nanovg-demo samples/nanovg-demo.cpp) - # add_emscripten_sample(example_v4d_font-demo samples/font-demo.cpp) - # add_emscripten_sample(example_v4d_shader-demo samples/shader-demo.cpp) - # add_emscripten_sample(example_v4d_pedestrian-demo samples/pedestrian-demo.cpp) - # add_emscripten_sample(example_v4d_optflow-demo samples/optflow-demo.cpp) - # add_emscripten_sample(example_v4d_beauty-demo samples/beauty-demo.cpp) + # add_emscripten_sample(example_v4d_display_image samples/display_image.cpp false) + # add_emscripten_sample(example_v4d_display_image_fb samples/display_image_fb.cpp false) + # add_emscripten_sample(example_v4d_vector_graphics samples/vector_graphics.cpp false) + # add_emscripten_sample(example_v4d_vector_graphics_and_fb samples/vector_graphics_and_fb.cpp false) + # add_emscripten_sample(example_v4d_render_opengl samples/render_opengl.cpp false) + # add_emscripten_sample(example_v4d_custom_source_and_sink samples/custom_source_and_sink.cpp false) + # add_emscripten_sample(example_v4d_font_rendering samples/font_rendering.cpp false) + # add_emscripten_sample(example_v4d_font_with_gui samples/font_with_gui.cpp false) + # add_emscripten_sample(example_v4d_video_editing samples/video_editing.cpp false) + # add_emscripten_sample(example_v4d_cube-demo samples/cube-demo.cpp false) + # add_emscripten_sample(example_v4d_video-demo samples/video-demo.cpp false) + # add_emscripten_sample(example_v4d_nanovg-demo samples/nanovg-demo.cpp false) + add_emscripten_sample(example_v4d_font-demo samples/font-demo.cpp false) + # add_emscripten_sample(example_v4d_shader-demo samples/shader-demo.cpp false) + # add_emscripten_sample(example_v4d_pedestrian-demo samples/pedestrian-demo.cpp false) + # add_emscripten_sample(example_v4d_optflow-demo samples/optflow-demo.cpp false) + add_emscripten_sample(example_v4d_beauty-demo samples/beauty-demo.cpp true) else() add_binary_sample(example_v4d_display_image) add_binary_sample(example_v4d_custom_source_and_sink) diff --git a/modules/v4d/include/opencv2/v4d/nvg.hpp b/modules/v4d/include/opencv2/v4d/nvg.hpp index 55204b33e..547515091 100644 --- a/modules/v4d/include/opencv2/v4d/nvg.hpp +++ b/modules/v4d/include/opencv2/v4d/nvg.hpp @@ -488,6 +488,8 @@ CV_EXPORTS void intersectScissor(float x, float y, float w, float h); * A forward to nvgRresetScissor. See https://github.com/memononen/nanovg/blob/master/src/nanovg.h */ CV_EXPORTS void resetScissor(); + +CV_EXPORTS void clear(const cv::Scalar& bgra = cv::Scalar(0, 0, 0, 255)); } } } diff --git a/modules/v4d/include/opencv2/v4d/v4d.hpp b/modules/v4d/include/opencv2/v4d/v4d.hpp index 5d3e5accc..7ce9f2737 100644 --- a/modules/v4d/include/opencv2/v4d/v4d.hpp +++ b/modules/v4d/include/opencv2/v4d/v4d.hpp @@ -116,6 +116,7 @@ class NVG; class CV_EXPORTS V4D { friend class detail::NanoVGContext; friend class detail::FrameBufferContext; + friend class HTML5Capture; cv::Size initialSize_; const string& title_; int major_; @@ -144,8 +145,8 @@ class CV_EXPORTS V4D { std::future futureWriter_; std::function keyEventCb_; uint64_t frameCnt_ = 0; - cv::TickMeter tick_; - float fps_ = 0; + bool showFPS_ = true; + bool printFPS_ = true; public: /*! * Creates a V4D object which is the central object to perform visualizations with. @@ -218,11 +219,6 @@ public: * @param fn A functor that will be called repeatetly until the application terminates or the functor returns false */ CV_EXPORTS void run(std::function fn); - /*! - * Clear the framebuffer. - * @param bgra The color to use for clearing. - */ - CV_EXPORTS void clear(const cv::Scalar& bgra = cv::Scalar(0, 0, 0, 255)); /*! * Called to feed an image directly to the framebuffer */ @@ -333,6 +329,12 @@ public: * Get the frambuffer size. * @return The framebuffer size. */ + + CV_EXPORTS bool getShowFPS(); + CV_EXPORTS void setShowFPS(bool s); + CV_EXPORTS bool getPrintFPS(); + CV_EXPORTS void setPrintFPS(bool p); + CV_EXPORTS bool isFullscreen(); /*! * Enable or disable fullscreen mode. @@ -392,13 +394,8 @@ public: * Print basic system information to stderr */ CV_EXPORTS void printSystemInfo(); - /*! - * Updates and prints the current fps to stderr and/or renders the fps on screen. - * @param print if true prints the current fps to stderr - * @param graphical if true renders the fps on screen - */ - CV_EXPORTS void showFps(bool print = true, bool graphical = true); - FrameBufferContext& fbCtx(); + + CV_EXPORTS void makeCurrent(); private: V4D(const cv::Size& size, const cv::Size& fbsize, const string& title, bool offscreen, bool debug, int major, int minor, bool compat, int samples); @@ -413,6 +410,7 @@ private: bool keyboard_event(int key, int scancode, int action, int modifiers); void setMousePosition(int x, int y); + FrameBufferContext& fbCtx(); CLVAContext& clvaCtx(); NanoVGContext& nvgCtx(); NanoguiContext& nguiCtx(); diff --git a/modules/v4d/samples/beauty-demo.cpp b/modules/v4d/samples/beauty-demo.cpp index d87acf864..db69eee1d 100644 --- a/modules/v4d/samples/beauty-demo.cpp +++ b/modules/v4d/samples/beauty-demo.cpp @@ -27,7 +27,7 @@ using std::string; /** Application parameters **/ constexpr unsigned int WIDTH = 1280; constexpr unsigned int HEIGHT = 720; -constexpr double SCALE = 0.125; //Scale at which face detection is performed +constexpr float SCALE = 0.125; constexpr bool OFFSCREEN = false; #ifndef __EMSCRIPTEN__ constexpr const char *OUTPUT_FILENAME = "beauty-demo.mkv"; @@ -48,10 +48,13 @@ bool side_by_side = false; bool stretch = false; #endif -static cv::Ptr v4d = cv::v4d::V4D::make(cv::Size(WIDTH, HEIGHT), cv::Size(), "Beauty Demo", OFFSCREEN); -static cv::Ptr facemark = cv::face::createFacemarkLBF(); //Face landmark detection +cv::Ptr v4d; +cv::Ptr facemark = cv::face::createFacemarkLBF(); //Face landmark detection +cv::detail::MultiBandBlender blender(false, 5); //Blender (used to put the different face parts back together) + + #ifdef USE_TRACKER -static cv::Ptr tracker = cv::TrackerKCF::create(); //Instead of continues face detection we can use a tracker +cv::Ptr tracker = cv::TrackerKCF::create(); //Instead of continues face detection we can use a tracker #endif /*! @@ -141,6 +144,7 @@ struct FaceFeatures { //based on the detected FaceFeatures guesses a decent face oval and draws a mask. static void draw_face_oval_mask(const vector &lm) { using namespace cv::v4d::nvg; + clear(); for (size_t i = 0; i < lm.size(); i++) { vector> features = lm[i].features(); cv::RotatedRect rotRect = cv::fitEllipse(features[0]); @@ -156,6 +160,7 @@ static void draw_face_oval_mask(const vector &lm) { //Draws a mask consisting of eyes and lips areas (deduced from FaceFeatures) static void draw_face_eyes_and_lips_mask(const vector &lm) { using namespace cv::v4d::nvg; + clear(); for (size_t i = 0; i < lm.size(); i++) { vector> features = lm[i].features(); for (size_t j = 5; j < 8; ++j) { @@ -239,10 +244,11 @@ static bool iteration() { static bool trackerInitalized = false; #endif //Face detector - static cv::Ptr detector = cv::FaceDetectorYN::create("face_detection_yunet_2022mar.onnx", "", cv::Size(v4d->framebufferSize().width * SCALE, v4d->framebufferSize().height * SCALE), 0.9, 0.3, 5000, cv::dnn::DNN_BACKEND_OPENCV, cv::dnn::DNN_TARGET_OPENCL); - //Blender (used to put the different face parts back together) - static cv::detail::MultiBandBlender blender(false, 5); - blender.prepare(cv::Rect(0, 0, WIDTH, HEIGHT)); +#ifndef __EMSCRIPTEN__ + static cv::Ptr detector = cv::FaceDetectorYN::create("assets/face_detection_yunet_2023mar.onnx", "", cv::Size(v4d->framebufferSize().width * SCALE, v4d->framebufferSize().height * SCALE), 0.9, 0.3, 5000, cv::dnn::DNN_BACKEND_OPENCV, cv::dnn::DNN_TARGET_OPENCL); +#else + static cv::Ptr detector = cv::FaceDetectorYN::create("assets/face_detection_yunet_2023mar.onnx", "", cv::Size(v4d->framebufferSize().width * SCALE, v4d->framebufferSize().height * SCALE), 0.9, 0.3, 5000, cv::dnn::DNN_BACKEND_OPENCV, cv::dnn::DNN_TARGET_CPU); +#endif //BGR static cv::UMat input, down, blurred, contrast, faceOval, eyesAndLips, skin; static cv::UMat frameOut(HEIGHT, WIDTH, CV_8UC3); @@ -286,7 +292,7 @@ static bool iteration() { //Detect faces in the down-scaled image detector->detect(down, faces); - //Collect face bounding rectangles thought we will only use the first + //Collect face bounding rectangles though we will only use the first for (int i = 0; i < faces.rows; i++) { faceRects.push_back(cv::Rect(int(faces.at(i, 0)), int(faces.at(i, 1)), int(faces.at(i, 2)), int(faces.at(i, 3)))); } @@ -307,7 +313,6 @@ static bool iteration() { featuresList.push_back(FaceFeatures(faceRects[i], shapes[i], float(down.size().width) / WIDTH)); } - v4d->clear(); v4d->nvg([&]() { //Draw the face oval of the first face draw_face_oval_mask(featuresList); @@ -318,7 +323,6 @@ static bool iteration() { cvtColor(frameBuffer, faceOval, cv::COLOR_BGRA2GRAY); }); - v4d->clear(); v4d->nvg([&]() { //Draw eyes eyes and lips areas of the first face draw_face_eyes_and_lips_mask(featuresList); @@ -345,6 +349,8 @@ static bool iteration() { //boost skin saturation adjust_saturation(blurred,skin, skin_saturation); + blender.prepare(cv::Rect(0, 0, WIDTH, HEIGHT)); + //piece it all together blender.feed(skin, faceSkinMaskGrey, cv::Point(0, 0)); blender.feed(input, backgroundMaskGrey, cv::Point(0, 0)); @@ -379,8 +385,6 @@ static bool iteration() { }); } - v4d->showFps(); - #ifndef __EMSCRIPTEN__ v4d->write(); #endif @@ -404,8 +408,8 @@ int main(int argc, char **argv) { int main() { #endif using namespace cv::v4d; - - facemark->loadModel("lbfmodel.yaml"); + v4d = V4D::make(cv::Size(WIDTH, HEIGHT), cv::Size(), "Beauty Demo", OFFSCREEN); + facemark->loadModel("assets/lbfmodel.yaml"); v4d->setFrameBufferScaling(stretch); @@ -420,6 +424,9 @@ int main() { v4d->setSource(src); Sink sink = makeWriterSink(OUTPUT_FILENAME, cv::VideoWriter::fourcc('V', 'P', '9', '0'), src.fps(), cv::Size(WIDTH, HEIGHT)); v4d->setSink(sink); +#else + Source src = makeCaptureSource(WIDTH, HEIGHT, v4d); + v4d->setSource(src); #endif v4d->run(iteration); diff --git a/modules/v4d/samples/cube-demo.cpp b/modules/v4d/samples/cube-demo.cpp index 13ee6339d..c3f52b8c7 100644 --- a/modules/v4d/samples/cube-demo.cpp +++ b/modules/v4d/samples/cube-demo.cpp @@ -27,7 +27,7 @@ unsigned int shader_program; unsigned int vao; unsigned int uniform_transform; -static cv::Ptr v4d = cv::v4d::V4D::make(cv::Size(WIDTH, HEIGHT), cv::Size(), "Cube Demo", OFFSCREEN); +cv::Ptr v4d; static GLuint load_shader() { #ifndef OPENCV_V4D_USE_ES3 @@ -205,6 +205,9 @@ static void glow_effect(const cv::UMat& src, cv::UMat& dst, const int ksize) { static bool iteration() { using namespace cv::v4d; +// if(!v4d->capture()) +// return false; + //Render using OpenGL v4d->gl(render_scene); @@ -217,15 +220,10 @@ static bool iteration() { }); #endif - v4d->showFps(); - v4d->write(); //If onscreen rendering is enabled it displays the framebuffer in the native window. Returns false if the window was closed. - if (!v4d->display()) - return false; - - return true; + return v4d->display(); } #ifndef __EMSCRIPTEN__ @@ -234,13 +232,16 @@ int main(int argc, char** argv) { int main() { #endif using namespace cv::v4d; - + v4d = cv::v4d::V4D::make(cv::Size(WIDTH, HEIGHT), cv::Size(), "Cube Demo", OFFSCREEN); v4d->printSystemInfo(); #ifndef __EMSCRIPTEN__ Sink sink = makeWriterSink(OUTPUT_FILENAME, cv::VideoWriter::fourcc('V', 'P', '9', '0'), FPS, cv::Size(WIDTH, HEIGHT)); v4d->setSink(sink); +//#else +// Source src = makeCaptureSource(WIDTH, HEIGHT, v4d); +// v4d->setSource(src); #endif v4d->gl(init_scene); v4d->run(iteration); diff --git a/modules/v4d/samples/custom_source_and_sink.cpp b/modules/v4d/samples/custom_source_and_sink.cpp index a2db6ae2c..8bea976d9 100644 --- a/modules/v4d/samples/custom_source_and_sink.cpp +++ b/modules/v4d/samples/custom_source_and_sink.cpp @@ -6,9 +6,9 @@ using namespace cv; using namespace cv::v4d; -static Ptr window = V4D::make(Size(1280, 720), cv::Size(), "Custom Source/Sink"); - int main() { + Ptr window = V4D::make(Size(1280, 720), cv::Size(), "Custom Source/Sink"); + string hr = "Hello Rainbow!"; //Make a Source that generates rainbow frames. Source src([](cv::UMat& frame){ @@ -56,8 +56,6 @@ int main() { text(sz.width / 2.0, sz.height / 2.0, hr.c_str(), hr.c_str() + hr.size()); }); - window->showFps(); - window->write(); //Write video to the Sink return window->display(); //Display the framebuffer in the native window }); diff --git a/modules/v4d/samples/display_image.cpp b/modules/v4d/samples/display_image.cpp index b7327ca2a..9baaf6a8c 100644 --- a/modules/v4d/samples/display_image.cpp +++ b/modules/v4d/samples/display_image.cpp @@ -4,11 +4,11 @@ using namespace cv; using namespace cv::v4d; -//Creates a V4D window for on screen rendering -static Ptr window = V4D::make(Size(1280, 720), cv::Size(), "Show image"); - int main() { - //An image + //Creates a V4D window for on screen rendering + Ptr window = V4D::make(Size(1280, 720), cv::Size(), "Display image"); + + //An image #ifdef __EMSCRIPTEN__ Mat image = read_embedded_image("doc/lena.png"); #else @@ -21,7 +21,6 @@ int main() { window->run([=](){ //Feeds the image to the video pipeline window->feed(image); - window->showFps(); return window->display(); }); } diff --git a/modules/v4d/samples/display_image_fb.cpp b/modules/v4d/samples/display_image_fb.cpp index 8d72dbf89..8d37de0ee 100644 --- a/modules/v4d/samples/display_image_fb.cpp +++ b/modules/v4d/samples/display_image_fb.cpp @@ -4,11 +4,11 @@ using namespace cv; using namespace cv::v4d; -//Creates a V4D object for on screen rendering -static Ptr window = V4D::make(Size(1280, 720), cv::Size(), "Show image"); - int main() { - //Read an image as UMat + //Creates a V4D object for on screen rendering + Ptr window = V4D::make(Size(1280, 720), cv::Size(), "Display image and FB"); + + //Read an image as UMat #ifdef __EMSCRIPTEN__ UMat image = read_embedded_image("doc/lena.png").getUMat(ACCESS_READ); #else @@ -21,8 +21,9 @@ int main() { //Display the framebuffer in the native window in an endless loop window->run([=](){ - window->copyFrom(converted); - window->showFps(); + window->fb([&](UMat& framebuffer){ + converted.copyTo(framebuffer); + }); return window->display(); }); } diff --git a/modules/v4d/samples/example_v4d_beauty-demo.html b/modules/v4d/samples/example_v4d_beauty-demo.html index fdb3ef08b..5ede02bd2 100644 --- a/modules/v4d/samples/example_v4d_beauty-demo.html +++ b/modules/v4d/samples/example_v4d_beauty-demo.html @@ -4,7 +4,7 @@ - Beautifcation Demo + Beautification Demo - - - + + + + - - - - - -
Downloading...
- -
- -
- - -
- -
- - - + + + + - - + } + + window.onerror = function(event) { + // TODO: do not warn on ok events like simulating an infinite loop or exitStatus + Module.setStatus('Exception thrown, see JavaScript console'); + //spinnerElement.style.display = 'none'; + Module.setStatus = function(text) { + if (text) Module.printErr('[post-exception status] ' + text); + }; + }; + + fsButton.addEventListener('click', async function () { + Module.requestFullscreen(false, false) + }); + + window.addEventListener('fullscreenchange', function (event) { + if (document.fullscreenElement) { + console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`); + } else { + fixCanvasSize() + console.log('Leaving fullscreen mode.'); + } + }); + + + + - - diff --git a/modules/v4d/samples/example_v4d_custom_source_and_sink.html b/modules/v4d/samples/example_v4d_custom_source_and_sink.html index cb926beac..ac915568d 100644 --- a/modules/v4d/samples/example_v4d_custom_source_and_sink.html +++ b/modules/v4d/samples/example_v4d_custom_source_and_sink.html @@ -212,26 +212,6 @@ }; let fsButton = document.querySelector("#fullscreenBtn"); - let videoElement = document.querySelector("#video"); - let cameraCanvas = document.querySelector("#cameraCanvas"); - - - function capture() { - let ctx = cameraCanvas.getContext('2d', { willReadFrequently: true }); - ctx.drawImage(videoElement, 0, 0, cameraCanvas.width, cameraCanvas.height); - var imageData = ctx.getImageData(0, 0, cameraCanvas.width, cameraCanvas.height); - let filename = 'v4d_rgba_canvas.raw'; - let stream = FS.open(filename, 'w+'); - if(imageData) { - FS.write(stream, imageData.data, 0, imageData.data.length, 0); - FS.close(stream); - } - } - - function runCapture() { - capture(); - requestAnimationFrame(runCapture); - } fsButton.addEventListener('click', async function () { Module.requestFullscreen(false, false) diff --git a/modules/v4d/samples/example_v4d_display_image.html b/modules/v4d/samples/example_v4d_display_image.html index daceaf899..2df15c02a 100644 --- a/modules/v4d/samples/example_v4d_display_image.html +++ b/modules/v4d/samples/example_v4d_display_image.html @@ -104,21 +104,14 @@ - - - - - - - - + + + +
Downloading...
-
- -
@@ -141,7 +134,6 @@ }, preRun: [], postRun: function() { - }, print: (function() { var element = document.getElementById('output'); @@ -212,26 +204,6 @@ }; let fsButton = document.querySelector("#fullscreenBtn"); - let videoElement = document.querySelector("#video"); - let cameraCanvas = document.querySelector("#cameraCanvas"); - - - function capture() { - let ctx = cameraCanvas.getContext('2d', { willReadFrequently: true }); - ctx.drawImage(videoElement, 0, 0, cameraCanvas.width, cameraCanvas.height); - var imageData = ctx.getImageData(0, 0, cameraCanvas.width, cameraCanvas.height); - let filename = 'v4d_rgba_canvas.raw'; - let stream = FS.open(filename, 'w+'); - if(imageData) { - FS.write(stream, imageData.data, 0, imageData.data.length, 0); - FS.close(stream); - } - } - - function runCapture() { - capture(); - requestAnimationFrame(runCapture); - } fsButton.addEventListener('click', async function () { Module.requestFullscreen(false, false) diff --git a/modules/v4d/samples/example_v4d_display_image_fb.html b/modules/v4d/samples/example_v4d_display_image_fb.html index ca705cf88..b3862f98f 100644 --- a/modules/v4d/samples/example_v4d_display_image_fb.html +++ b/modules/v4d/samples/example_v4d_display_image_fb.html @@ -212,26 +212,6 @@ }; let fsButton1 = document.querySelector("#fullscreenBtn"); - let videoElement1 = document.querySelector("#video"); - let cameraCanvas1 = document.querySelector("#cameraCanvas"); - - - function capture() { - let ctx = cameraCanvas1.getContext('2d', { willReadFrequently: true }); - ctx.drawImage(videoElement1, 0, 0, cameraCanvas1.width, cameraCanvas1.height); - var imageData = ctx.getImageData(0, 0, cameraCanvas1.width, cameraCanvas1.height); - let filename = 'v4d_rgba_canvas.raw'; - let stream = FS.open(filename, 'w+'); - if(imageData) { - FS.write(stream, imageData.data, 0, imageData.data.length, 0); - FS.close(stream); - } - } - - function runCapture() { - capture(); - requestAnimationFrame(runCapture); - } fsButton1.addEventListener('click', async function () { Module.requestFullscreen(false, false) diff --git a/modules/v4d/samples/example_v4d_font-demo.html b/modules/v4d/samples/example_v4d_font-demo.html index 2b2b7140c..46f1616a4 100644 --- a/modules/v4d/samples/example_v4d_font-demo.html +++ b/modules/v4d/samples/example_v4d_font-demo.html @@ -210,26 +210,6 @@ }; let fsButton = document.querySelector("#fullscreenBtn"); - let videoElement = document.querySelector("#video"); - let cameraCanvas = document.querySelector("#cameraCanvas"); - - - function capture() { - let ctx = cameraCanvas.getContext('2d', { willReadFrequently: true }); - ctx.drawImage(videoElement, 0, 0, cameraCanvas.width, cameraCanvas.height); - var imageData = ctx.getImageData(0, 0, cameraCanvas.width, cameraCanvas.height); - let filename = 'v4d_rgba_canvas.raw'; - let stream = FS.open(filename, 'w+'); - if(imageData) { - FS.write(stream, imageData.data, 0, imageData.data.length, 0); - FS.close(stream); - } - } - - function runCapture() { - capture(); - requestAnimationFrame(runCapture); - } fsButton.addEventListener('click', async function () { Module.requestFullscreen(false, false) diff --git a/modules/v4d/samples/example_v4d_font_rendering.html b/modules/v4d/samples/example_v4d_font_rendering.html index f9ba81b26..68323326d 100644 --- a/modules/v4d/samples/example_v4d_font_rendering.html +++ b/modules/v4d/samples/example_v4d_font_rendering.html @@ -212,26 +212,6 @@ }; let fsButton = document.querySelector("#fullscreenBtn"); - let videoElement = document.querySelector("#video"); - let cameraCanvas = document.querySelector("#cameraCanvas"); - - - function capture() { - let ctx = cameraCanvas.getContext('2d', { willReadFrequently: true }); - ctx.drawImage(videoElement, 0, 0, cameraCanvas.width, cameraCanvas.height); - var imageData = ctx.getImageData(0, 0, cameraCanvas.width, cameraCanvas.height); - let filename = 'v4d_rgba_canvas.raw'; - let stream = FS.open(filename, 'w+'); - if(imageData) { - FS.write(stream, imageData.data, 0, imageData.data.length, 0); - FS.close(stream); - } - } - - function runCapture() { - capture(); - requestAnimationFrame(runCapture); - } fsButton.addEventListener('click', async function () { Module.requestFullscreen(false, false) diff --git a/modules/v4d/samples/example_v4d_font_with_gui.html b/modules/v4d/samples/example_v4d_font_with_gui.html index 61961c44a..6653d7202 100644 --- a/modules/v4d/samples/example_v4d_font_with_gui.html +++ b/modules/v4d/samples/example_v4d_font_with_gui.html @@ -213,26 +213,6 @@ }; let fsButton = document.querySelector("#fullscreenBtn"); - let videoElement = document.querySelector("#video"); - let cameraCanvas = document.querySelector("#cameraCanvas"); - - - function capture() { - let ctx = cameraCanvas.getContext('2d', { willReadFrequently: true }); - ctx.drawImage(videoElement, 0, 0, cameraCanvas.width, cameraCanvas.height); - var imageData = ctx.getImageData(0, 0, cameraCanvas.width, cameraCanvas.height); - let filename = 'v4d_rgba_canvas.raw'; - let stream = FS.open(filename, 'w+'); - if(imageData) { - FS.write(stream, imageData.data, 0, imageData.data.length, 0); - FS.close(stream); - } - } - - function runCapture() { - capture(); - requestAnimationFrame(runCapture); - } fsButton.addEventListener('click', async function () { Module.requestFullscreen(false, false) diff --git a/modules/v4d/samples/example_v4d_nanovg-demo.html b/modules/v4d/samples/example_v4d_nanovg-demo.html index 260c7fe8a..8125ddc78 100644 --- a/modules/v4d/samples/example_v4d_nanovg-demo.html +++ b/modules/v4d/samples/example_v4d_nanovg-demo.html @@ -4,7 +4,7 @@ - NanoVG Demo + Nanovg Demo