首先說結論吧,現在這個方式有點雞肋,交互性的東西都需要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文件,就會顯示在瀏覽器裏了。