Qt Webassembly Qt程序運行到網頁上

首先說結論吧,現在這個方式有點雞肋,交互性的東西都需要js。現階段不建議使用。下面圖片裏的坑來自於https://blog.csdn.net/EffectiveReport/article/details/90731000,我這邊成功後,有些跟這個說的是一樣的。

業務需求

客戶要播放攝像頭的RTSP視頻流。我們做網頁的同事沒搞過,剛好我這邊有個Qt的demo。然後就想着怎麼把Qt程序運行到網頁上。不能使用ActiveX控件開發技術,因爲ActiveX控件開發技術只支持IE,做網頁的同事做的東西不能在IE上使用,不清楚什麼鬼。

Webassembly環境配置

Qt官方好像指定的有比較適配的版本。我這邊使用的Qt5.14.2,然後官方建議的是1.38.27這個版本。

配置地址參考:https://www.jianshu.com/p/fdf74aad806b。主要參考打招來了這個部分。註釋修改一部分的python代碼,然後去an安裝環境。

  print("\n\n\n")
  print("------------------------------------our need url----------------------------------------------")
  print(url)
  print("-----------------------------------------the end-------------------------------------------------------")
  print("\n\n\n") 
try:
    u = urlopen(url)
    mkdir_p(os.path.dirname(file_name))
    with open(file_name, 'wb') as f:
      file_size = get_content_length(u)
      if file_size > 0: print("Downloading: %s from %s, %s Bytes" % (file_name, url, file_size))
      else: print("Downloading: %s from %s" % (file_name, url))

      file_size_dl = 0
      # Draw a progress bar 80 chars wide (in non-TTY mode)
      progress_max = 80 - 4
      progress_shown = 0
      block_sz = 8192
      if not TTY_OUTPUT:
          print(' [', end='')
      while True:
          buffer = u.read(block_sz)
          if not buffer:
              break

          file_size_dl += len(buffer)
          f.write(buffer)
          if file_size:
              percent = file_size_dl * 100.0 / file_size
              if TTY_OUTPUT:
                  status = r" %10d  [%3.02f%%]" % (file_size_dl, percent)
                  print(status, end='\r')
              else:
                  while progress_shown < progress_max * percent / 100:
                      print('-', end='')
                      sys.stdout.flush()
                      progress_shown += 1
      if not TTY_OUTPUT:
          print(']')
  except Exception as e:
    print("Error downloading URL '" + url + "': " + str(e))
    rmfile(file_name)
    return None
  except KeyboardInterrupt as e:
    print("Aborted by User, exiting")
    rmfile(file_name)
    sys.exit(1)

配置地址參考:https://blog.csdn.net/weixin_44088602/article/details/104251524。這個主要參考Webassembly環境配置好後,也就是你隨便寫個c++的代碼可以在網頁上運行後,編譯Qt的源代碼。

編譯指令:configure -xplatform wasm-emscripten -platform win32-g++ -nomake tests -nomake examples -prefix %CD%\qtbase -no-warnings-are-errors

配置地址參考:https://www.cnblogs.com/jixiaohua/p/10424941.html。這個主要是裏面有一個安裝包的exe。不過版本有點低。

Qt使用Webassembly

參考:https://zhuanlan.zhihu.com/p/103772559,就是把編譯後的webassembly qmake配置到Qt creator裏

 

編譯Qt項目

打開Qt creator ----> 配置項目(選擇設置的webassembly編譯器)---->點擊運行即可

 

會生成這些文件

雙擊.html文件,就會顯示在瀏覽器裏了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章