link實習日誌 20230317

link09:00 任務名稱

思考如何取得攝影機畫面。搜尋 how to display camera image on canvas，找到 Capturing an image from the user。參考文中說明，撰寫程式碼。

嘗試串連攝影機和影片元素

1linkconst constraints = {

2link    video: true,

3link};

4linknavigator.mediaDevices.getUserMedia(constraints).then((stream) => {

5link    videoElement.srcObject = stream;

6link});

確定可以在 canvas 當中看到攝影機畫面後，調整 canvas 的尺寸，還有加上 viewport 設定。

link12:00 午餐

link13:00 回到家裡

調整完各種設定，看起來應該是確定可以正常運作。和之前在用的 TensorFlow 相比，現在正在用的 MediaPipe 順暢許多。在 README.md 紀錄參考資料和目前進度。可以去改公司的專案了。

確定有拿到權限後，git clone 下載公司的專案。之前看過的執行結果有好幾個頁面，打開原始碼來看才知道只有一個 index.php 檔案。HTML + CSS + JS + jQuery + PHP，全部放在同一個檔案中。

本來想說只有一個檔案要如何切換多個頁面，仔細閱讀後得知，是用 jQuery 來切換顯示不同頁面。變成另類的 SPA 了。

本來是想要拿 MediaPipe 來替換 TensorFlow，不過公司的專案和我自己的專案相比複雜許多，一時之間無法判斷哪些部分是 TensorFlow。

link17:00 回報進度

目前嘗試用 MediaPipe
比 Tensorflow 順暢
不過要替換到公司的專案中有點困難
因為 index.php 的程式碼有點複雜
我不確定哪裡是 TensorFlow 的部分

導師回覆

你寫在這嗎？
https://github.com/TzuHanChen/segmentation-facemesh
我拿下來測試

我回覆

MediaPipe demo 在這裡
https://tzuhanchen.github.io/segmentation-facemesh/html/mediapipe.html

導師回覆＂真的很順誒 但不知道貼了衣服在上面會怎麼樣＂，並附上測試用的網址。

打開來看是 FB AR 特效，有標示正在測試中。

我回覆導師

我用手機測試還算順暢
下周再試看看能不能把 TensorFlow 換成 MediaPipe
我先下班了
謝謝

link18:00 下班

link本日心得

我覺得這幾周的任務不是技術的考驗，而是意志的考驗。