2021年1月23日 星期六

Chromecast with Google TV - 透過網頁安裝 愛奇藝 TV app 與 愛奇藝手機程式投放到 Chromecast


前陣子不小心買了 Chromecast with Google TV ,想說來試試看,結果裡頭一堆台灣內容提供者 App 不能安裝,如:

  • 動畫瘋
  • 愛奇藝
  • CATCHPLAY+
就明明在 應用程式 -> 娛樂 都有顯示一堆台灣的內容服務,卻說因為國家地區而無法安裝 Orz 推論可能是手上這台是美國貨...有地區限制吧?真是殘念

Updated @ 2021-02-03:

主要是我使用的 Google account 的地區落在美國。可以在 https://play.google.com/store/paymentmethods 的付款方式,查看網頁底部的 地 區資訊 

後來在找了一下,嘿嘿,原來可以靠網頁來安裝程式,立即測試了一下!但不是每一款都能安裝。

在 2021/01/23 成功者:
在 2021/01/23 失敗者:
後續再等看看會不會有什麼變化。

另外,愛奇藝其實有分新加坡(香港)跟北京兩個 App ,其中新加坡(香港)的手機程式可以直接投放到 Chromecast 上,而北京的不行,有興趣可以去找找!

2021年1月22日 星期五

Flutter 開發文件之 iOS 與 Android 實作筆記 - 使用 Firebase 回報 App 使用人數


先說一下,有出類似文件教人怎樣使用 Firebase - Admob 部分,在此僅流水帳紀錄引用 firebase 的用法,體驗一下透過 Flutter 同時開發 ios 和 android app 時,並且使用額外函式庫的過程。

原理:

1. 使用 Android Studio + Flutter plugin 來建立 Flutter 專案
- 在此 package name 使用 org.changyy.study.flutter
- 自動產生 android Package Name = org.changyy.study.flutter_app
- 自動產生 iOS Bundle ID = org.changyy.study.flutterApp
- 假定專案位於 ~/AndroidStudioProjects/flutter_app

2. 建立 Firebase 專案
- 在此使用 org-changyy-study-flutter 作為 firebase project name

3. iOS app
- 使用 Xcode 置入 firebase 的設定檔案 GoogleService-Info.list
- 用指令打開專案 % open ~/AndroidStudioProjects/flutter_app/ios/Runner.xcworkspace/
- 使用 CocoaPods 添加 Firebase 函式庫
- 在 AppDelegate.swift 置入 Firebase 啟動程式碼

4. Android app
- 依照 Firebase 專案建置過程安置 google-service.json 檔案
- 在 <專案>/build.gradle 設置相依套件 com.google.gms:google-service:4.3.4
- 在 <專案>/app/build.gradle 添加 plugin 和引入 com.google.firebase:firebase-analytics

5. 回到 Flutter 專案,分別叫出 iOS simulator 跟 Android emulator 運行


若沒意外,就可以同時在這兩個模擬器上跑出來,並且在 Firebase 專案後臺,看到兩個使用者:



2021年1月14日 星期四

[Javascript] 複寫 XMLHttpRequest 來紀錄 Network Request URL @ Chrome Browser DevTools

最近 podcast 很夯,來研究 <audio> 。之前研究過 <video> 就有發現現在都用很夯 blob 的播放方式,透過 JS 片段下載資料交給 <video> 播放,以至於從 JS 調閱出 <video> 元件時,看不到真實的影片來源,而是一連串 blob (Binary Large Object) 記憶體位置。

原本想說在 Chrome DevTools 下,能不能靠 JS 取得 network request 發送清單來做應用,看著看著突然腦筋一轉,乾脆就用 XMLHttpRequest 好了,多包一層就可以收集了。

用法:

//
// https://stackoverflow.com/questions/7775767/javascript-overriding-xmlhttprequest-open
//
(function() {
var proxied = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function() {
// console.log( arguments );
//
// 只關注 m3u8 來源
//
if (arguments.length >= 2 && arguments[1].indexOf('.m3u8') > 0) {
console.log( arguments );
// return;
}
return proxied.apply(this, [].slice.call(arguments));
};
})();

2021年1月9日 星期六

[開箱] Chromecast with Google TV - 2020/09/30 發表

Chromecast with Google TV

沒想到一進入 2021年,突然又手癢了!立馬買了 Chromecast with Google TV 來把玩。之前沒那麼想入手是因為台灣還買不到,以及自己已經有 Chromecast Ultra,興趣缺缺,但人果真很善變,過了幾個月就突然想起,又快速下手買了一個 XD 這次嘗試粉色系,連內附的電池外裝也粉色!

Chromecast with Google TV

這次體驗的心情,就像 Apple TV 的感受一樣,有個遙控器,並且跟市面上的新電視或電視和一樣支援語音輸入(語音搜尋),我之前對 Apple TV / Android TV 沒這麼愛的主因是輸入難用並認為手機就是本體,凡事都走投影來釋放手機資源,但對 Google TV 可以安裝 App 仍感興趣,這次測試了一下 NETFLIX 後,感覺 NETFLIX 的 UX 體驗在各平台皆非常相近,當下也不會覺得不方便(感興趣都在首頁,滑一滑點一下就可以觀看)

之前有朋友很想要觀看 NETFLIX 4K 內容,查了一下 Chromecast with Google TV 是有支援的,若真的可以用 49.99 美金買到,真的物超所值。這在 NETFLIX 官方文件也有提到:

以下 Chromecast 型號目前支援 Netflix 超高畫質串流功能:

Chromecast Ultra

Chromecast with Google TV

ref: 如何在 Chromecast 上使用 Netflix 

回過頭來,聊聊裝置的啟用,就包括會經過 Google Home app 掃描電視上的 QRCode,而手機過程也可以看到能多訂閱很多項目、音控辨識是否個人化等等,其中有個過程是會配對遙控器紅外線跟電視聲音的控制,十分貼心,因為許多類似設備就算有遙控器也沒規劃用紅外線去控制電視的聲音。

Chromecast with Google TV

感受比較深的是多了很多內容,以前用投影的方式必須自己去尋找有哪些內容,而採用 Google TV 則是大家為主動擠到這個 Android TV Google play 上,像是美國已上線的 Disney+ 等等,有趣的,我反而在 Android TV Google play 上,無法下載 myVideo, LiTV 這類本土程式,不知道是不是 Chromecast with Google TV 內有地區資訊,若是這種綁定關係,在意的就只能再等等吧?不知是不是本土商只在 TW region 上架,還是哪邊可以更改 Chromecast with Google TV 設備的所在地:

Chromecast with Google TV

Updated @ 2021/01/23:使用 Google Play 網頁版安裝愛奇藝

Updated @ 2021/02/03:主要是我使用的 Google account 的地區落在美國。可以在 https://play.google.com/store/paymentmethods 的付款方式,查看網頁底部的 地區 資訊

其餘細節是這款要求外部電源供應,直接插電視 USB 會提醒這是行不通的:

Chromecast with Google TV

最後,Google TV 上面的預設首頁也會隨著使用過的內容 App 節錄出該 App 的熱門內容,效果跟 NETFLIX 首頁很像,這樣一眼可以得知哪些感興趣可以點擊:

Chromecast with Google TV

相關文章:

2021年1月8日 星期五

[Linux] 使用 FlyVPN 與 EZCast EZC-5200 Hotspot 設置跳板開發服務(RTL8821CU Linux Driver) @ Ubuntu 20.04 Desktop

ezcast ezc-5200 ic

最近要模擬俄羅斯客戶使用產品上碰到的問題,由於產品是需要聯網的,手頭上的 AWS/GCP 都沒有俄羅斯節點,只好透過 FlyVPN 翻牆到莫斯科,而 FlyVPN 操作方式是非常簡單的,並且提供了各類平台的運行程式。

若服務邏輯可以在 PC 上執行,那就很搭配 FlyVPN 快驗證完,但如果是要在聯網裝置驗證,下一刻就得研究如何讓設備也處於莫斯科環境了!想了想,就是拿一台 Ubuntu Desktop 建立 Hostspot 環境,再讓 IoT 等設備透過 Hotspot 聯外就對了。

整個過程就是先從 EZCast 官網左下角的產品型錄(Product Catalog),得知 EZCast EZC-5200 是採用瑞昱的 RTL8821CU 晶片,接著研究一下 RTL8821CU Driver,就屬 brektrou/rtl8821CU 維護這份最不錯(很奇怪為何不在 RealTek 的官網找到 XD 或是類似官方 github.com/rtlwifi-linux 找到),且各處的程式碼編譯上都可能有問題,例如 linux kernel 大於 5.8 會踩到一些重複    定義的 structure 問題等等,總之,這次在 github.com/brektrou/rtl8821CU 得到很好的編譯體驗。

而挑選 Ubuntu Desktop 是比較適合打包成 VM ,方便傳遞給需要的同事當作測試環境,類似的做法在 Windows 也是能對應實現的(在 Windows 跑 FlyVPN 、建置熱點等等)。在此使用 VirutalBox 並且把 USB 設定自動掛在這 EZC-5200 網卡

virtualbox-usb-device-auto-mount

流水帳 - 環境建置:

$ sudo apt update 

$ sudo apt upgrade

$ sudo apt autoremove

$ sudo apt autoclean

$ sudo apt install net-tools git curl wget tmux vim dkms build-essential bc unzip linux-headers-$(uname -r) -y

流水帳 - 編譯 Linux Driver:

$ git clone https://github.com/brektrou/rtl8821CU.git

$ cd rtl8821CU

$ sudo ./dkms-install.sh

$ sudo usb_modeswitch -KW -v 0bda -p 1a2b

$ sudo systemctl start bluetooth.service

$ sudo vim /lib/udev/rules.d/40-usb_modeswitch.rules

在 LABEL="modeswitch_rules_end" 之前添加

# Realtek 8211CU Wifi AC USB

ATTR{idVendor}=="0bda", ATTR{idProduct}=="1a2b", RUN+="/usr/sbin/usb_modeswitch -K -v 0bda -p 1a2b"

$ sudo reboot

接著進入系統後,從右上角就可以看到無線網路了,進入無線網路的設定,想要開啟熱點時,會收到 "系統原則禁止做為熱點" ,查了一下貌似 Ubuntu 20.04 的 bug ?主因是權限不夠大,但這段應當要有用 sudo 來運行的方式才對?總之,就改用 root 登入即可,而 GUI 預設是不允許 Root 登入的。

ubuntu-20.04-wifi-hotspot-error

流水帳 - 啟用 Root 登入 GUI 方式:

先替 Root 設定密碼:

$ sudo passwd

開放 Root 登入權限:

$ sudo vim /etc/gdm3/custom.conf

添加

AllowRoot = true

$ sudo /etc/pam.d/gdm-password

添加 # 註解下段限制

# auth   required        pam_succeed_if.so user != root quiet_success

$ sudo reboot

最後在 GUI 登入介面上,挑選其他帳號(點擊"沒有列出來?"),就可以靠輸入帳號密碼的方式,用 root 登入,登入後就可以順利建制 Hotspot 出來使用

流水帳 - 查看是否有偵測到 USB WIFI:

$ lsusb

Bus 001 Device 003: ID 0bda:XXXX Realtek Semiconductor Corp. 802.11ac NIC

...

Ubuntu 20.04 Hotspot 建立方式:

右上角網路Icon -> 無線網路未連線 -> Wi-Fi 設定值 -> 新視窗的右上角 ... -> 開啟 Wi-Fi 熱點 -> 設定 SSID 跟 PSK 就可以完成啟動

ubuntu-20.04-wifi-setup

關於 FlyVPN 的啟動方式,就參考官網即可,建議先完成 FlyVPN 的連線後,再開啟 Hotspot ,例如用手機連上 Hotspot 時,可以開瀏覽器瀏覽 ipinfo.io 看看顯示的地區是否有正確更換。

流水帳 - FlyVPN :

$ ./flyvpn login

$ ./flyvpn list

$ sudo .flyvpn connect "Moscow #13"

選 tcp 即可

如此在 Ubuntu 可以另外再開個 terminal 運行 curl ipinfo.io 就得知 IP 是否有變換到莫斯科了