2022年1月31日 星期一

MindAR: 使用Python Flask來實現WebAR

MindAR教學網站：https://hiukim.github.io/mind-ar-js-doc/face-tracking-quick-start/webpage

 Flask教學網站：https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application

1. 安裝Flask套件，開啟cmd應用程式，輸入下列命令。
pip install Flask


2.使用IDLE來編輯程式，並儲存成test.html。


3.切換到工作目錄，使用python test.py來啟動網站。


4.開啟Chrome進行測試，並輸入127.0.0.1:5000。


5.編輯face_ar.html文件，並儲存在templates資料來中，範例程式摘自Minimal Example。

程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera active="false" position="0 0 0"></a-camera>

      <a-entity mindar-face-target="anchorIndex: 1">
    <a-sphere color="green" radius="0.1"></a-sphere>
      </a-entity>
    </a-scene>
  </body>
</html>

6.改寫Flask程式-test.py，黃底是新增的部份。

1
2
3
4
5
6
7
8
from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def hello_world(name=None):
    return render_template('face_ar.html', name=name)

7.測試時要記得在cmd中按下Ctrl+C來中止網站，再執行Python test.py命令重新啟動網站。
8.重新更新Chrome的內容，就可看到AR。


張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)