Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Language Bindings
  4. Web Assembly and decalarative-camera example.
Forum Updated to NodeBB v4.3 + New Features

Web Assembly and decalarative-camera example.

Scheduled Pinned Locked Moved Unsolved Language Bindings
4 Posts 2 Posters 1.5k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Julian Guarin 0J Offline
    Julian Guarin 0J Offline
    Julian Guarin 0
    wrote on last edited by Julian Guarin 0
    #1

    Hey, recently I've been interested in learning web assembly with qt.

    So I followed the tutorial on building an app by @morten-sorvig to build and run classic QtQuick's declarative camera example :
    https://blog.qt.io/blog/2018/11/19/getting-started-qt-webassembly/

    I tweaked the Makefile produced by qmake, just to avoid some nasty error:

    em++ -s WASM=1 -s FULL_ES2=1 -s ALLOW_MEMORY_GROWTH=1 -s USE_WEBGL2=1 -s NO_EXIT_RUNTIME=0 -s ERROR_ON_UNDEFINED_SYMBOLS=1 --bind -s "BINARYEN_TRAP_MODE='clamp'" -O3 -L/home/jg/opensource/qt/5.12.0/m/qtbase/lib -lqtfreetype -s USE_LIBPNG=1 -o declarative-camera.js qmlcamera.o declarative-camera.js_plugin_import.o declarative-camera.js_qml_plugin_import.o qrc_declarative-camera.o   -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/platforms -L/home/jg/opensource/qt/5.12.0/m/qtbase/lib -s USE_ZLIB=1 -s USE_LIBPNG=1 -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/mediaservice -lqtmedia_audioengine -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/video/videonode -leglvideonode -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/playlistformats -lqtmultimedia_m3u -s -s -s -s -s -s -s -s -s -s -s -s -lwasm -lQt5EventDispatcherSupport -s -s -s -s -lQt5FontDatabaseSupport -s -s -s -s -lqtfreetype -s -s -lQt5EglSupport -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/imageformats -lqgif -s -s -s -s -lqicns -s -s -s -s -lqico -s -s -s -s -lqjpeg -s -s -s -s -lqtga -s -s -s -s -lqtiff -s -s -s -s -s -lqwbmp -s -s -s -s -lqwebp -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/qml/QtQuick.2 -lqtquick2plugin -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/qml/QtMultimedia -ldeclarative_multimedia -lQt5MultimediaQuick -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -lQt5Quick -s -s -s -s -s -s -s -s -s -s -s -s -lQt5Multimedia -s -s -s -s -s -s -lQt5Gui -s -s -lqtharfbuzz -s -lQt5Qml -s -s -s -lQt5Network -s -s -lQt5Core -s -lqtpcre2   
    emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
      in   ret double 0x7FF4000000000000 in _Z5qSNaNv() 
    emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
      in   store double 0x7FF4000000000000, double* %37, align 8, !tbaa !15 in _Z16qt_asciiToDoublePKciRbRi18StrayCharacterMode() 
    emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
    emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
    emcc: warning: cannot represent a NaN literal '0x216f45a0' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
      in   %177 = select i1 %.0187.off0, double 0xFFF8000000000000, double 0x7FF8000000000000 in _ZNK17double_conversion23StringToDoubleConverter12StringToIeeeIPKcEEdT_ibPi() 
    error: undefined symbol: _ZN7QThread4exitEi
    warning: To disable errors for undefined symbols use `-s ERROR_ON_UNDEFINED_SYMBOLS=0`
    Error: Aborting compilation due to previous errors
    shared:ERROR: '/home/jg/opensource/em/node/8.9.1_64bit/bin/node /home/jg/opensource/em/emscripten/1.38.25/src/compiler.js /tmp/tmpi_PmAI.txt /home/jg/opensource/em/emscripten/1.38.25/src/embind/emval.js /home/jg/opensource/em/emscripten/1.38.25/src/embind/embind.js /home/jg/opensource/em/emscripten/1.38.25/src/library_pthread_stub.js' failed (1) 
    

    Ok, then I ran the emscripten server... :

    $[12:18:jg]@webcam[master !?]> emrun --no_browser --port 8081 .
    Web server root directory: /home/jg/Code/hacks/wasm/qml/webcam
    Now listening at http://localhost:8081/
    The html page you are running is not emrun-capable. Stdout, stderr and exit(returncode) capture will not work. Recompile the application with the --emrun linker flag to enable this, or pass --no_emrun_detect to emrun to hide this check.
    

    And I got the application to run!!!!
    However.... camera is not being accessed by the application:

    0_1550079862384_3369179a-5993-4d32-ac9e-3bded29d11fc-image.png

    So I'm almost there!!! However... .would like to understand why the camera is not being accessed, my guess is this is related to browser authorizations to use the camera etc....

    Any clues?
    Any help @morten-sorvig or anyone greatly appreciated.....

    raven-worxR 1 Reply Last reply
    0
    • Julian Guarin 0J Julian Guarin 0

      Hey, recently I've been interested in learning web assembly with qt.

      So I followed the tutorial on building an app by @morten-sorvig to build and run classic QtQuick's declarative camera example :
      https://blog.qt.io/blog/2018/11/19/getting-started-qt-webassembly/

      I tweaked the Makefile produced by qmake, just to avoid some nasty error:

      em++ -s WASM=1 -s FULL_ES2=1 -s ALLOW_MEMORY_GROWTH=1 -s USE_WEBGL2=1 -s NO_EXIT_RUNTIME=0 -s ERROR_ON_UNDEFINED_SYMBOLS=1 --bind -s "BINARYEN_TRAP_MODE='clamp'" -O3 -L/home/jg/opensource/qt/5.12.0/m/qtbase/lib -lqtfreetype -s USE_LIBPNG=1 -o declarative-camera.js qmlcamera.o declarative-camera.js_plugin_import.o declarative-camera.js_qml_plugin_import.o qrc_declarative-camera.o   -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/platforms -L/home/jg/opensource/qt/5.12.0/m/qtbase/lib -s USE_ZLIB=1 -s USE_LIBPNG=1 -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/mediaservice -lqtmedia_audioengine -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/video/videonode -leglvideonode -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/playlistformats -lqtmultimedia_m3u -s -s -s -s -s -s -s -s -s -s -s -s -lwasm -lQt5EventDispatcherSupport -s -s -s -s -lQt5FontDatabaseSupport -s -s -s -s -lqtfreetype -s -s -lQt5EglSupport -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/plugins/imageformats -lqgif -s -s -s -s -lqicns -s -s -s -s -lqico -s -s -s -s -lqjpeg -s -s -s -s -lqtga -s -s -s -s -lqtiff -s -s -s -s -s -lqwbmp -s -s -s -s -lqwebp -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/qml/QtQuick.2 -lqtquick2plugin -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -L/home/jg/opensource/qt/5.12.0/m/qtbase/qml/QtMultimedia -ldeclarative_multimedia -lQt5MultimediaQuick -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -s -lQt5Quick -s -s -s -s -s -s -s -s -s -s -s -s -lQt5Multimedia -s -s -s -s -s -s -lQt5Gui -s -s -lqtharfbuzz -s -lQt5Qml -s -s -s -lQt5Network -s -s -lQt5Core -s -lqtpcre2   
      emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
        in   ret double 0x7FF4000000000000 in _Z5qSNaNv() 
      emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
        in   store double 0x7FF4000000000000, double* %37, align 8, !tbaa !15 in _Z16qt_asciiToDoublePKciRbRi18StrayCharacterMode() 
      emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
      emcc: warning: cannot represent a NaN literal '0x1fda4c40' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
      emcc: warning: cannot represent a NaN literal '0x216f45a0' with custom bit pattern in NaN-canonicalizing JS engines (e.g. Firefox and Safari) without erasing bits!
        in   %177 = select i1 %.0187.off0, double 0xFFF8000000000000, double 0x7FF8000000000000 in _ZNK17double_conversion23StringToDoubleConverter12StringToIeeeIPKcEEdT_ibPi() 
      error: undefined symbol: _ZN7QThread4exitEi
      warning: To disable errors for undefined symbols use `-s ERROR_ON_UNDEFINED_SYMBOLS=0`
      Error: Aborting compilation due to previous errors
      shared:ERROR: '/home/jg/opensource/em/node/8.9.1_64bit/bin/node /home/jg/opensource/em/emscripten/1.38.25/src/compiler.js /tmp/tmpi_PmAI.txt /home/jg/opensource/em/emscripten/1.38.25/src/embind/emval.js /home/jg/opensource/em/emscripten/1.38.25/src/embind/embind.js /home/jg/opensource/em/emscripten/1.38.25/src/library_pthread_stub.js' failed (1) 
      

      Ok, then I ran the emscripten server... :

      $[12:18:jg]@webcam[master !?]> emrun --no_browser --port 8081 .
      Web server root directory: /home/jg/Code/hacks/wasm/qml/webcam
      Now listening at http://localhost:8081/
      The html page you are running is not emrun-capable. Stdout, stderr and exit(returncode) capture will not work. Recompile the application with the --emrun linker flag to enable this, or pass --no_emrun_detect to emrun to hide this check.
      

      And I got the application to run!!!!
      However.... camera is not being accessed by the application:

      0_1550079862384_3369179a-5993-4d32-ac9e-3bded29d11fc-image.png

      So I'm almost there!!! However... .would like to understand why the camera is not being accessed, my guess is this is related to browser authorizations to use the camera etc....

      Any clues?
      Any help @morten-sorvig or anyone greatly appreciated.....

      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by raven-worx
      #2

      @Julian-Guarin-0
      i would be suprised if the QtMultimedia module (and a backend) was ported for the QtWebAssembly module.
      I guess a special backend would be needed which accesses the browser capabilities.

      I might be wrong though, but i couldn't find any info at a quick glance which proves me wrong.

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      1
      • Julian Guarin 0J Offline
        Julian Guarin 0J Offline
        Julian Guarin 0
        wrote on last edited by
        #3

        Ok, however when I've configured Qt to be built from sources I can see the following modules in Qt:

        Qt Multimedia:
        ALSA ................................... no
        GStreamer 1.0 .......................... no
        GStreamer 0.10 ......................... no
        Video for Linux ........................ no
        OpenAL ................................. yes
        PulseAudio ............................. no
        Resource Policy (libresourceqt5) ....... no
        Windows Audio Services ................. no
        DirectShow ............................. no
        Windows Media Foundation ............... no

        So I guess you are right. Does this confirm what you did see?

        raven-worxR 1 Reply Last reply
        0
        • Julian Guarin 0J Julian Guarin 0

          Ok, however when I've configured Qt to be built from sources I can see the following modules in Qt:

          Qt Multimedia:
          ALSA ................................... no
          GStreamer 1.0 .......................... no
          GStreamer 0.10 ......................... no
          Video for Linux ........................ no
          OpenAL ................................. yes
          PulseAudio ............................. no
          Resource Policy (libresourceqt5) ....... no
          Windows Audio Services ................. no
          DirectShow ............................. no
          Windows Media Foundation ............... no

          So I guess you are right. Does this confirm what you did see?

          raven-worxR Offline
          raven-worxR Offline
          raven-worx
          Moderators
          wrote on last edited by
          #4

          @Julian-Guarin-0 said in Web Assembly and decalarative-camera example.:

          So I guess you are right. Does this confirm what you did see?

          as i said, i didnt see anything ;)
          But the configure clearly shows that you might only be possible to play sound files, i don't know if thats really true though for QtWebAssembly.

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved