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文件，就会显示在浏览器里了。