20230710

壹、週會議

• 將演講者視窗與觀眾功能分開
• 繼續研討螢幕分享與共編功能

貳、決定先升級上去

目前版本資訊

輸入指令 flutter run —force 強制升級

• flutter sdk version 3.10.5
• dart version 3.0.5

原本Project對應處理

要將套件升級到對應(找到terminal報錯的部分，到該pub頁面進行版本升級)

• Error

Error: No named parameter with the name 'vsync'.

將anmationBottoomBar內vsync註解，因為dart3無提供其服務，便可正確執行

pubspec.yaml檔內的sdk envirment更新如下

參、Share Screen

先往Agora以外的方向查詢

一、Youtube嵌入

• 相關套件

youtube_player_iframe | Flutter Package

webview_flutter | Flutter Package

Error

近幾天的報錯一直與flutter.h取得套件相關(但並未使用其功能)

flutter_inappwebview | Flutter Package

輸入指令 flutter build ios -v

二、Youtube_Player_flutter

• Git clone 此網站並且 flutter run

GitHub:sarbagyastha/youtube_player_flutter

YouTube Player In Flutter

執行畫面

• 可load連結、執行Video stack內的影片(跳轉下一個)
• 可調整速度
• 切換螢幕大小
• 實況影片也可以

當我們把isLive參數設為true時會在影片右下角出現”Live”字樣

三、flutter_inappwebview，1.1k Star，其中的第三方登入可參考

Git clone本專案並且到example/ third_party_oath_user_sign_in 進行flutter run

Github.com/pichillilorenzo/flutter_inappwebview_examples

第三方登入可以參考

肆、Agora白板 again

跑出來了！可能跟有upgrade有關係😎

git clone本網站，並且到example內執行flutter run

GitHub - netless-io/Whiteboard-Flutter: A flutter library for Agora Whiteboard

• 提供三種功能：Room、Replay、Window

五、相關error

• 真機Apple ID上限已達(7 Day 只能10個)

後續可能會需要切換帳號來執行

20230711

壹、Youtube miniplayer

Is there a way to implement video mini player as in youtube?

或是參考本github，git clone後對套件進行升級便可以使用

Flutter Challenge: YouTube (Picture-In-Picture)

github.com/deven98/YouTubeFlutter

並且將NavigationBottomBar的titile改為lable便可使用

[Day8]Flutter Netflix UI 底部導航欄

貳、Flat Board Demo

• 可同步
• 上一步下一步
• 縮放
• 繪圖功能
• 新增頁面
• 外接嵌入：投影片、YT

測試連結：

前端：

https://github.com/netless-io/flat

後端：

https://github.com/netless-io/flat-server

二、Agora Flat

官方文件：

Flat Online Classroom

Agora All sdk參考：

• Flutter
  

SDKs Download | Agora Docs

• Web

SDKs Download | Agora Docs

netless-flat open source應用相關問題：

Is it possible to use "Agora Flat Open Source Virtual Classroom" within a Flutter application?

💡 Flutter上的執行應該會往webview的方向發展，也可以看到當作為產品時會需要繳費

• Live Demo：

可以用網頁測試：

Fastboard Demo

其他參考文件：

Agora Flat：开源、可定制的在线互动教室 - 掘金

• 開源專案參考：

Agora Flat：在线教室的开源初体验 - 专栏 - 声网 RTE 开发者社区

• 程式相互架構：

Interactive Whiteboard Fastboard quickstart | Agora Docs

• 原本interactive Whiteboard SDK App Server/Client & Agora Server 交互流程

• FastBoard SDK

• Flat 開源架構圖：

需要參考架構圖延伸學習

• WebRTC架構

WebRTC 总体架构概述 - 专栏 - 声网 RTE 开发者社区

參、Webview

• Bard

‎Try Bard, an AI experiment by Google

Git clone 本專案，並到 /packages/packages/webview_flutter/webview_flutter/example 執行flutter run

替換掉Podfie，並且將藍框url替換為測試demo網站

執行結果顯示：

互動過程：

• 可以看到YT或嵌入式需要再行調整，尚不能完整顯示
• 筆畫可以即時呈現
• PPT共筆/下載可正常執行

WebView的URL會隨著互動變動

20230712

壹、群組同步問題

• 因為群組超過Notion 1000 Block之限制，所以在相互連結上做其他設定

原先遇使用export到hackmd的做法，但因為export notion note會有圖片顯示問題，故最後採用移至在個人頁面並用page連結的方式達成空間問題解法(Notion對個人頁面無Block數限制)

貳、flutter_inappwebview

往在app內的webview方向研究

InAppWebView: The Real Power of WebViews in Flutter | InAppWebView

一、相關範例(官網Show Case)

Showcase | InAppWebView

二、相關Example(功能)

Project Examples | InAppWebView

• 檔案下載

• WebRTC(即時相關)

• 第三方登入

在webview上的登入問題

Flutter: login through a webview

其他login：

• FB, Google

https://github.com/plateaukao/flutter_webview_login_demo

[Flutter] WebView

Flutter Web

官網Multi-Platform

Multi-Platform

參、WebSocket

一、WebSocket 原理

国庆假期，整整七天，我使用Flutter终于做出了即时通信！！!😤-阿里云开发者社区

💡 WebSocket比起HTTP最大的不同在於Client與Server端皆可以發出請求(全雙工)，可以符合雙向供通的需求

• Flutter體驗 Day 23-WebSocket

Flutter體驗 Day 23-WebSocket - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

二、web_socket_channel

• Package

web_socket_channel | Dart Package

Flutter體驗 Day 23-WebSocket - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

肆、其他資源＆注意：

• 自製API使用相關問題

有關自製簡易API給APP使用 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

💡 注意：電腦若頁面太多＆Simulator專案開多時記得刪除一些正在執行的，避免出現當機(今天出現黑屏無法呼喚的情況，需要按下螢幕中間的按鈕重啟)

• flutter串接Agora製作視訊ithome

flutter 串接API

• Open-Source-Flutter-Apps

Top Flutter Project Ideas from Beginner to Expert

github.com/tortuvshin/open-source-flutter-apps

伍、FastBoard Docs

一、Fastboard SDK

• 如藍框範圍：Only Android & Web & IOS

Interactive Whiteboard Fastboard quickstart | Agora Docs

二、Interactive White Board V.S Fast Board

• 流程：Interactive White Board v.s. Fast Board

Interactive White Board	Fast Board

💡 兩者都僅只有Web SDK，所以應用Web實現在Flutter App上

20230713

壹、FastBoard_Flutter

嘗試使用本Package改編：

fastboard_flutter | Flutter Package

API reference：

fastboard_flutter - Dart API docs

一、Example Running

二、連結自己的帳戶—-創立房間

首先看到程式碼內有constants.dart，存放四種資料資訊

三、官網端

而我們在Agora帳戶頁面可以取得App ID與SDK Token(此為“帳戶”的sdkToken，而非”房間”的)

而我們需要透過AppID與SDK Token創建房間並且得到RoomID 與RoomToken作為使用

💡 所以我們需要透過javascript腳本取得Room資訊，且腳本需要放在App Server上

💡 而sdkToken需要另存紀錄！作為使用各類功能的密鑰，最好先記錄起來

四、Js腳本端—-A、取得uuid

• 稀土掘金：使用 Fastboard 快速接入白板互动系统

稀土掘金:使用 Fastboard 快速接入白板互动系统

• 官網：

透過線上編譯器執行後可取得uuid

💡 到時候需要研究如何在Server上調用API的方式，並將window.fetch置換

五、Js腳本端—-B、取得RoomToken

• 由於稀土掘金網站內程式碼置入錯誤，以網站內附圖為準後更新程式碼如下

執行後Console端輸出的一串字碼就是Room Token

💡 注意：基於安全性考量，SDK Token的操做也需要放於後端

六、Flutter端相異設備的測試

補足Example/lib/constant.dart檔的Room UUID與Room Token為剛剛生成的資訊

💡 UNIQUE_CLIENT_ID可設為隨意數字(到時候再連結App端的葉子辨識ID)

我們用兩個git clone的example專案（當作兩部設備的測試），將Example/lib/constant.dart檔資訊統一，成功達成SDK版本的即時資訊（同時可以發現比起WebView，terminal是會隨data互動而變動的）

注意：目前還沒有「關閉Room」的功能

20230714

壹、Fast Board

一、問題

• 問題：白板有連線，但帳戶並未出現時間計算？
• 猜測：可能是白板連線並不屬於付費功能，又或者連線內尚未使用到付費功能區塊
• 已確認：當room ID改為錯誤號碼後會無法進入白板畫面，改回後又可出現，所以房間確認有創建成功！

注意：當Room ID錯誤或不存在時會無法進入Quick Start的白板畫面(報錯如右圖)

二、相關資料

Flutter Package — 用Agora製作視訊功能（一）

Flutter Package — 用Agora製作視訊功能（二）

貳、WebRTC架構

Flutter-WebRTC: A Complete Guide

WebRTC 总体架构概述 - 专栏 - 声网 RTE 开发者社区

• 低延遲、開源軟體的即時通訊協定

• 架構層面執行，P2P架構

• SDP協議

• TURN, STUN, NAT相關技術 (IP相關端口傳輸問題)

參、Flutter 串接

一、相關資料

Flutter Package - 串接api（一）

Flutter Package - 串接api（二）

二、相關套件—-Retrofit

應該是偏向API生成的部分！

• 套件：retrofit: ^4.0.1 (Pub Dev 1.2K Star)

retrofit | Dart Package

三、HTTP v.s. Dio

Flutter : Dio vs HTTP

四、Bloc v.s. Cubit

Flutter學習筆記Week3-State Management(BLOC)

肆、Dio

Networking in Flutter using Dio - LogRocket Blog

創立新專案後用Test測資跑，可取得API資料，但在獲取指定Attribute時會出現以下問題：

• 由Future方便檢查錯誤問題

• Terminal顯示畫面(黃框：取得JSON、藍框：JSON decode解碼失敗)

伍、其他相關

一、Server VNC登入

如何使用 macOS 內建的 VNC client

二、測試用公開API

• Public API for Test

GitHub - public-apis/public-apis: A collective list of free APIs