在測試以 Web Speech API 來進行語音辨識，本機執行都沒問題，模擬網路存取，由家裡的 Private IP 192.168.2.0/24 連線，麥克風明明設為使用時詢問的，居然連問都沒問就直接被禁用，
 |
| 麥克風被禁用 |
在 Chrome 的設定中查詢，麥克風的選項是灰的，連變更權限的機會都沒有。
 |
| 麥克風選項被鎖定 |
查了一下，在 Chrome 中有個 flag 叫 Insecure origins treated as secure 可以自訂安全名單，在 Chrome 的網址列中先輸入這個：
chrome://flags/#unsafely-treat-insecure-origin-as-secure
然後在輸入區中輸 web server 的網址，並按一下 [Disabled] 的按鈕，讓它變成 [Enabled]
 |
| Chrome flags 設定 |
設定好了，就可以按右下角的 [Relaunch] 來重新啟動 Chrome。
 |
| 麥克風啟用 |
重新啟動 Chrome 以後，設定的主機就可以更改麥克風權限了。
這種事沒用到還不知道會有狀況，又累積了一點經驗。
在教室上課時，學生可以親手去操作電子教具或學具，遠距教學時，因為碰不到，互動的樂趣少了很多。以 HTML5 戳戳樂來說，雖然遠距時可以用「聲控」的，請螢幕那頭的老師依號碼，幫忙按，少了親手按並即時回饋，樂趣大減。為了解決類似這種的半調子戳戳樂，remoteClick 網路遙控器來了！
remoteClick 網路遙控器的主要原理是這樣的(以戳戳樂為例)：學生按下 remoteClick 遙控器上的號碼以後，程式會將號碼送至 WebSocket server，server 再將資料發向老師端的「接收程式」，「接收程式」再依設定去「按」戳戳樂上格子。
簡單說，關鍵在這個「接收程式」，它「駭」進了我自己設計的戳戳樂，透過網路收到號碼以後，幫忙觸發了戳戳樂格子上按下滑鼠的動作。這樣的設計，好處是不需要更動到原有的戳戳樂程式，而且除了戳戳樂以外，也可以應用在其它的工具中。有空，其它的工具也會陸續加上「網路遙控」的外掛。
底下先示範以戳戳樂加上 remoteClick 網路遙控外掛以後，如何讓學生可以透過網路遙控老師家裡的戳戳樂。
 |
| remoteClick 的傳送過程 |
在研究如何在不動原有程式的原則上加「外掛」，不過，原有的程式碼因為想輕量化，利用 LimeJS 的工具，將原始的 JavaScript 程式都簡化了，簡化到函數名稱很難分辨出來。
觀察了一下，全域的變數都會保留原有名稱，正因為如此，總算留有一線曙光。以戳戳樂來說，我所有的格子通通放到 boxLayer 中了，除了第一個是整體的大黑框，boxLayer 的其它 children 都是格子。不過因為函數名稱都變了，無法用原來的 getChildAt() 來取得物件。
倒是 boxLayer 中只有一個變數是帶有 .length 的，這下好辦了，只要在 boxLayer 中找到符合以下條件的，應該就是我要找的東西：
試著用以下的程序：
var n = Object.keys(boxLayer);var box=null;for(var i=0; i<n.length; i++) {if(boxLayer[n[i]] && typeof(boxLayer[n[i]])=='object' && typeof(boxLayer[n[i]]['length'])=='number') {var box = boxLayer[n[i]];break;}}
運氣還不錯，一次中的。
因為當初在新增戳戳樂的格子時，是按順序新增的，以第一格來說，它𡰗是 box[1] (box[0] 是外框，哈! 當初也不知道為什麼要這樣加個雜質進來)，我如果要直接用指令來「按」或者說是「戳」這格時，只要這樣的指令：
box[1].dispatchEvent('mousedown');
它觸發了第一格的 mousedown 事件，也就是模擬了以滑鼠按下去的動作了，這樣一來，可以透過網路來按戳戳樂了，應該很有趣。
之前在計算戳戳樂最佳的行列數時，曾經有將值排序以後，要知道它原來的 key，查了一下，大家都建議利用 Object.entries() 來排序。
像我在設計 HTML5 對對碰時，為了讓洗牌的程序好寫一點，是先以亂數決定所有牌的序號，然後依序取用，轉換成座標；也就是在牌堆中，以左上角為第一個位置為例，第一張牌的位置並不是在左上角，對我來說，不用想什麼複雜的演算法取位置，但是缺點是，倒過來時，要由位置找出是在牌堆中的第幾張牌時變得複雜了。目前的做法只好順便記錄位置編號，再來排序。
 |
| HTML5 對對碰 |
cardsLayer['numbers'] 的值是每一張牌對應到的牌面編號(故意兩兩一組分開一點，比較好看)，例如：
[0, 5, 10, 4, 8, 11, 2, 7, 3, 6, 1, 9]
第一張牌在第 0 個位置，而和它配對的第二張牌在第 5 個位置，以此類推。
我需要按編號排序後，再取出它在牌堆中的索引值：
var index = Object['entries'](cardsLayer['numbers']).sort( function(a,b) {
return (a[1]-b[1]);
});
這樣的結果會是：
0: ["0", 0]
1: ["10", 1]
2: ["6", 2]
3: ["8", 3]
4: ["3", 4]
5: ["1", 5]
6: ["9", 6]
7: ["7", 7]
8: ["4", 8]
9: ["11", 9]
10: ["2", 10]
11: ["5", 11]
來檢驗一下：
編號 0 的第一張牌(HORSE)在牌堆(cardsLayer)的索引值
0: ["0", 0]
應該是 index[0][0] ，也就是 0 ；而和它配對的是馬的圖片，使用者看到則是五個位置的牌
5: ["1", 5]
index[5][0] 是多少呢？答案是「1」，這也就是牌堆(cardsLayer)中索引值 1。
編號 1 的牌(DOG)，它的索引值
1: ["10", 1]
index[1][0] 為 10 ，表示 DOG 在牌堆中的索引值是 10，和它配對的索引值是 11，找一下 index 中：
9: ["11", 9]
應該編號 9 的那張牌，是不是小狗的圖片呢？
我的 Flash 版對對碰 match 是 2009 年的作品，後續還有一個 2010年的 Flahs 版 match2；HTML5 版則是 2014年完成雛形，之後則沒什麼大變動。本次有了 HTML5 戳戳樂的基礎，將 HTML5 對對碰做了大幅的增強。它目前具有以下的功能：
 |
| HTML5 對對碰 |
可以在 HTML5 FUN 網站中試玩及下載打包好的檔案：
HTML5 戳戳樂內建的音效是由南投縣的江明勳老師所錄製的，程式啟動以後，它會去讀取預設的設定檔 poke_set.js 中，有個名為 soundFilename 的參數內容，再和 mediaFolder 參數所指定的資料夾名稱，組合成音效檔的路徑。所以重點來了，照預設值：
底下的影片說明如何以 sound_pop.mp3 來當音效：
HTML5 戳戳樂抽中的問題對話框中，文字會自動調整字體的大小，預設值，它以不超過框高度的 80%來處理；不過，如果遇到字串較長，又不帶空格的，會因為較難分析斷點，而產生計算失誤的問題，字超出版面的寬度，而無法完整呈現。這個問題，遇到英文、數字及半形的符號比較容易發生，中文似乎好一點。
有人遇到字體大小的問題了，問到要如何改大小？
解決字體大小的問題有兩種：
在 2010年四月，和 TPET 的老朋友們於噗浪上一番激盪後，我們創造了名為「戳戳樂」的 Flash 數位小教具，詳細的過程可以在底下的這篇舊文中，找到噗文的連結，探尋到它的發展歷程：
後來為了讓戳戳樂能夠在不支援 Flash 的手機、平板上使用，我在 2012年年末，以 LimeJS 將戳戳樂改版為 HMTL5 版，當初的想法就是盡量維持 Flash 版的運作模式，所以設定檔的格式及可以設定的參數，和 Flash 版幾乎是一樣的。沒錯！如果想要改掉範例設定的內容，將它換成自己的題庫，你需要打開「設定檔」，然後......。哈！通常很多人聽到這些，就打退堂鼓了。所以我每次去別的學校分享，開場白都得是：
它真的很簡單......如果今天研習結束時，有人不會改成自己的題庫，就不要踏出電腦教室的門！
不過，說歸說，開場完全是開玩笑的話，所有人由最簡單的玩一玩，然後修改一個自訂參數，體驗了呈現出預定效果的驚奇與成就感，到最後其它工具也自己修改，時間到了反而是自己捨不得離開呢！
 |
| HTML5 戳戳樂啟始畫面 |
最近在增強 HTML5 幸運轉輪時，將它改成可以即時修改題庫，不但不用再開啟文字編輯器來修改設定檔，甚至可以直接以拖曳的方式來將圖片加入題庫中，更改完題目，可以立即套用，這種使用者經驗應該會是較美好的。有了這個雛形，讓 HTML5 版的戳戳樂打開了「噴射引擎」，在幾天之內就進化了。以下是 HTML5 版戳戳樂新增的幾個主要功能：
 |
| 抽到文字+圖片的題目 |
其它的功能則可以參考 Flash 版戳戳樂的說明。
我將大部份的 HTML5 版的小工具都集中在 HTML5 FUN 的網頁中了，所以到這個網址中去找就對了：
本來只是想將 HTML5 WHEEL 幸運轉輪加個按鈕而已，結果一發不可收拾，連玩了幾天，多了一些新的功能：
 |
| 2021.05.27 .v4 的 HTML5 WHEEL |
 |
| 同時使用三種素材的題目 |
 |
| Google Meet : 設定 : 攝影機 |
關於把 Android 手機當電腦的 Webcam ，在「雄 : Android : 手機變電腦的 Webcam : OBS」這篇中，使用的是跨平臺的 OBS 抓取 IP Webcam 傳來的 Android 手機鏡頭畫面，然後變成虛擬相機。如果電腦使用的是 Windows，則多了一個選擇，可以使用本篇所要介紹的 IP Camera Adapter ，搭配 Android 上 IP Webcam 或 DroidCam 來建立虛擬相機，並應用在 Zoom、Google Meet ...... 等需要 Ｗebcam 的地方。
 |
| Google Meet & Chrome 攝影機設定 |
 |
| Google Meet & Chrome 攝影機設定 |
GNU Wget 是一個自由軟體，也是一個強大的下載工具。
之前除了下載單一檔案外，也應用在讀取網址清單，批次下載清單中檔案 (參數： -i ) 。其它的功能則還沒有玩遍。最近又試了一下，抓取完整網頁內容的參數，更為驚豔了！
不過，一開始照著參數說明去試，失敗 n 回，才發現，原來我之前在 Windows 中安裝過的 Wget 是 GNU Wget 1.11.4，這版本是 GNU Win ( http://gnuwin32.sourceforge.net/ ) 中下載的，有一點舊了。在底下的網站中下載較新的版本，所有問題都解決了：
這次的目標是要下載某一個網頁中的所有內容，包括裡面的 mp3 檔案，但是不繼續擷取網頁中連結到其它頁面的網頁。執行的指令如下：
wget -m -k -E -p -np http://aaa.bbb.ccc.ddd/eeeee/fffff.php
底下是各參數的說明(可以用 wget --help 查到)：
會需要加 -E 的參數，主要是因為這個頁面的檔名是 .php ，在本機用瀏覽器開啟時，可能要多一個指定程式的動作，所以乾脆由 Wget 順便幫忙改檔名為 .html ，較方便；而如果去掉 -np 的參數， Wget 抓回來的就不會只有一個網頁了。
Wget 還有很多參數可以玩，有空再來試試吧！
發表文章
所有留言
