從瀏覽器錄音傳送到伺服器

最近研究了幾個人工智慧的開源專案,漸漸有了想把它們兜起來的想法。一個當然是利用文字輸入,另一個就是語音了。當然文字是簡單點,但是語音就更人性化了,所以研究了一下怎麼在 web 上錄音傳都後端去。做法有2種,首先是一邊錄一邊送,第二種就是錄完再一起送。這邊就選擇比較簡單的第2種開始。

原本參考的原始碼在這,它的做法是在本地端錄音、播放、存檔。

使用麥克風的限制

從很早開始(至少 Firefox 60),要錄制麥克風就有一些限制。

  1. 要使用 https 連線的錄音,限制才最少
  2. 若是連到 local 端,也可以沒限制
  3. 若是要連到 http 錄音,預設是不允許的,要透過 about:config 來開始 insecure.enable 類的選項。但每次還是會問允不允許,不能儲存。

試了很多下,最後還是沒辦法,只能透過 https 來做這些測試。我的方法是透過 stunnel 這個工具來做代理,轉接到 busybox 的 httpd,這樣就可以使用我最熟悉的工具,做簡單的測試就好。

busybox + stunnel 網頁伺服器架設

一般我是習慣用 busybox 的 http server,但大部份 Linux 內建的並不包含 CGI 的支援,需要自己編譯時開啟。如果你有自己慣用的 https server 可以略過我這邊的做法。

首先建立一個 web/ 資料夾,接下來的操做皆在才下進行

安裝設定 stunnel 套件

然後建立憑証檔案

產生 stunnel 設定檔

建立 http 檔案

建立 public_html/index.html

建立 public_html/cgi-bin/run.sh

建立啟動腳本

編輯 myweb.sh

然後啟動該 myweb.sh ,就可以建立一個 listen 在 port 8887 https server 了。再次強調一下,這邊的 busybox 請使用有支援 cgi 的版本 (大部份需要自己編)

 

執行畫面與結果

最後開啟網頁,可以看到如下的畫面。

 

當 start / stop 後,檔案就會傳至 cgi-bin/run.sh 來做處理。從 cgi script 可以看到,我僅是將其存檔轉換成 wav 檔而已。這也僅是方便將來利用做準備。

 

 

Leave a Reply(Name請以user_開頭,否則會被判定會垃圾息)

請輸入答案 94 − 89 =