WebRTC Taiwan

WebRTC Taiwan. http://rtc.tw 前威有限公司

Transcript

1. WebRTC – 前威有限公司 http://rtc.tw 1. WebRTC 簡介 2. P2P Browser to Browser call control 3. Browser to Server call control for media play & record – 側錄影像通話 4. Browser to SIP/PSTN call control – 從瀏覽器打電話 5. WebRTC Streaming Broadcasting – 線上直播 6. Video/Audio Inbound/Outbound Conferencing – 多方視訊 7. NAD(Network Announcement Detection) for outbound call – 外撥語音偵測 8. Screen Sharing over WebRTC – 螢幕分享 9. Audio Transcoding & Video Transcoding 10. 電信整合應用可能架構 11. WebRTC 7x24 Live Demonstrations : Demo-1 : WebRTC P2P Demo-2 : WebRTC Conference-1 Demo-3 : WebRTC Conference-2 Demo-4 : WebRTC x SIP x PSTN Demo-5 : WebRTC Video IVR Demo-6 : Realtime Speech to Text (即時對話-語音轉文字) Demo-7 : Desktop Chrome Screen Share Demo-8 : Youtube 直播線上字幕 Demo-9 : Vision Text Detection (影像文字辨識) Demo-10 : WebCall to 台灣電話
2. Service Provider Device Device APIs Browser RTC APIs Browser RTC WebRTC Media Control Plane Web application Web application Web Site ›Real-time audio, video directly from browsers without plugins › 1. Media handling – standardized in IETF › 2. Java Script APIs – standardized in W3C › 3. Control plane - not specified , left open for innovation WebRTC – 簡介 Lin Chih-Cheng phone:0928260333 email:lin260333@gmail.com
3. P2P Browser to Browser call control P2P call control : Signaling 係透過 Web Server , Media 則是採用點對點方式 , 直接 互送聲音與影像封包(SRTP) 如左圖.如果瀏覽器之間有 firewall 阻隔 , 則必須透過 Turn Server 做封包交換如右圖.
4. OPUS (Full Band 48 K) - Audio Codec Browser to Server(Server to Browser) call control for media play & record . Browser to Server 模式 , 是指 WebRTC Server 本身扮演 Browser 角色 , 直接與瀏 覽器做 webrtc-handshake 建立 media channel , 進一步做聲音影像交換 , 這種模式 可以讓 Server端動態播放各種影片聲音 , 同時也可以錄製瀏覽器所傳入的聲音影像 . [註1] : 側錄video call 產生格式為 webm(VP8/VP9) / mp4(H264) , 可直接拉到chrome播放.以640x480解析度 , 一分鐘影像聲音size 大約 3.5MB. [註2] : 側錄audio call 產生格式為雙聲道wave(使用者說出與聽到 的聲音分為左右兩個聲道),一分鐘聲音size大約 480 KB.
5. OPUS (Full Band 48 K) - Audio Codec Browser to SIP/PSTN(SIP/PSTN to Browser) call control Browser to SIP/PSTN 模式 , 是兩段式整合 , 第一段 Browser to Server + 第二段 Server to SIP / PSTN , 對Server 而言是兩通 call leg , 一邊採用webrtc , 另一邊採用 SIP / PSTN(ISUP,ISDN) , 透過 Server bridge 兩邊的 signaling 及 media . Media 部分 ( voice & video) 如有 codec 不相同情況 , 必須由 Server 進行 transcoding . 由於這種模式 media 會經過Server , 所以Server可以進行雙向側錄功能 .
6. OPUS (Full Band 48 K) - Audio Codec Streaming Broadcasting 線上直播 WebRTC Server 支援 RTSP / RTMP / HLS 可連接 Streaming Server (or IP Cam) , 其 他 client 包括 Browser , WebRTCApp , SIP phone … 可多人分享同一視訊源 . WebRTC Server Encoder Source 訊號 (HDMI) Camara 主控台 ( RTMP ) ( RTSP ) Chrome / Firefox / SIP phone WebRTCAPP / WebRTCWeb Streaming Server ( HLS/RTMP/RTSP) IP Cam ( WEBRTC) Web Cam
7. OPUS (Full Band 48 K) - Audio Codec Video/Audio Inbound/Outbound Conferencing 1. 參加者可以由 Browser , SIP , PSTN , APP 等不同 device 組成 . 2. 會議室最大人數為 30 . 3. audio call 或 video call 可以同時存在於 同一會議室. 4. 接通方式可以採用 inbound / outbound 或並行,outbound方式必須解決語音信 箱接通偵測問題,避免會議室干擾(參考 下頁 NAD) 5. 可啟動側錄功能.
8. NAD(Network Announcement Detection) for outbound call Outbound 的語音信箱偵測問題 : 例1. 您所撥的電話無回應 , 您的電話將轉接到語音信箱 , 嘟聲後開始計費 …...嘟(connect) 你已進入xx信箱…. 例2. The number you dialed is no response , your call is transferred to ….….嘟(connect) ……... 例3. 您撥的號碼是空號 , 請查明後再撥 ……..重複60秒 …….... release . 當上述 Announcement 播放的時候 , 並無法透過signaling知道發生什麼事 , 尤其是當外撥進入語音信箱時 , 對 外撥設備而言無法判斷是否為真人接聽 , 這時候將聲音導入會議室會產生干擾與無效的外撥費用 . 另外 , 藉由偵測Announcement , 可以提前得知發生事件 , 大幅縮短撥號時間. 傳統鈴聲進入語音信箱過程 : 1. Ring tone … 2. 語音事件宣告 …. (NAD偵測點) 3. Connect Tone (嘟) 4. 留言宣告 … 5. Record Tone (Bi) 6. Recording ….. 來電答鈴進入語音信箱過程 : 1. RBT Music …… 2. 語音事件宣告 …. (NAD偵測點) 3. Connect Tone (嘟) 4. 留言宣告 … 5. Record Tone (Bi) 6. Recording …..
9. OPUS (Full Band 48 K) udio Codec Screen Sharing over WebRTC Screen sharing over WebRTC 原理是將 media source由”camera” 改為“screen” , 相當直覺 , 桌機 版 Firefox & Chrome 都內建此一功能 , 但基於安全性考量 , default 是關閉此項功能 . 其中 Firefox 第一次分享必須手動修改瀏覽器環境設定啟動 , 方法如下 : 1.打開 Firefox : 輸入 about:config 2.選擇欄位: media.getusermedia.screensharing.allowed_domains , 加入 “rtc.tw” ,表示只針對 https://rtc.tw 這個網站開放 screen share功能. 新版Chrome 則取消環境設定模式 , 改採用Extension的方式 : 服務網站必須製作一個專屬的screen share extension模組, 上傳至Google web store , 並經過 Google驗證模組及網站合法性 ; 雖然程序較為繁複 , 但對第一次分享的用戶來說反而不必手動設 定 , 可以透過網頁偵測用戶端瀏覽器是否已安裝 ? 經同意後直接 inline install (如下左圖) . 安裝後 即可在會談過程中分享螢幕畫面( Chrome 除全螢幕外還可以選擇某應用程式視窗-如下右圖 )
10. OPUS (Full Band 48 K) udio Codec Android Screen Sharing Android 手機上的Chrome最近加入Screen sharing 功能 , 因為還在測試階段 , default 是關閉此項 功能 .手機Chrome要啟動此項功能 , 方法如下 : 1. 打開 Android的Chrome : 輸入 chrome://flags#enable-usermedia-screen-capturing , 出現"screen share"選項=>選擇"enable“. 2. 測試方法 : 重啟chrome連接 https://rtc.tw =>按下網頁的 “Screen Share”鈕(下圖左) =>看到local view變成 screen => 進入會議室(任選1~15) , 其他人進入該會議室 ,看到該手機screen畫面(下圖中/右),這時 候手機可以自由操作以及互相交談.
11. OPUS (Full Band 48 K) - Audio Codec Audio Transcoding Support audio transcoding between : G711(PSTN) , iLBC(SIP phone) , AMR-NB(3G) ,AMR-WB(4G) , AAC(MP3), vorbis(Webm) ,OPUS(WebRTC) ,G729. PSTN : G.711 Sip-Phone : Speex : iLBC 3G-Video : AMR-NB 4G-VoLTE : AMR-WB WebRTC : Opus
12. Mandatory Video Codec of WebRTC : VP8 & H264 H.264 長期被廣泛用於電腦與網路串流媒體如iTunes Store以及所有DVD播放器 , 許多世界大廠共同擁有H264專利, 它的封裝檔是MP4 . VP8 由 Google 所領導的影像 codec , 藉著與 HTML5 的整合，以及對手機、平板 電腦等運算能力較低的手持裝置最佳化，提供無專利問題的解決方案，來挑戰 H.264龍頭霸主的地位。它的封裝檔是Webm . VP8的下一代是VP9(壓縮效率提升 40%),Chrome 及Firefox都已內建VP8/VP9 . Youtube 幾年前就開始把上架影片從 H264汰換成VP8及VP9. 手機 App android 手機 App ios 桌機 Chrome 手機 Chrome 手機 ios Safari 11 手/桌機 Firefox 手/桌機 Opera 手機 Android Edge 桌機 Win10 Edge VP8 v v v v v v v v H264 v v v v v v v v v VP9 v v v v v H265
13. VP9 SVC可伸縮視訊編碼 SVC(Scalable Video Coding)係針對具有不同能力的參與者來調整視訊位元率. VP9 SVC可在Chrome使用,但預設是關閉,啟用VP9執行命令： chrome.exe --force-fieldtrials=WebRTC-SupportVP9SVC/EnabledByFlag_2SL3TL/
14. 4G-VoLTE 3G-MSC 3G Sip-Phone 4G IMS Internet 電信整合應用可能架構 AMR-WB H264 G.711, AMR-NB iLBC/OPUS H264/VP8 Browser App OPUS H264/VP8 G.711 PSTN Media-Server AP-Server Service Streaming Server IP-CAM AAC H264 CTI
15. Why Use WebRTC?
16. Demo-1 P2P 使用瀏覽器執行下面網址: https://rtc.tw:8080?roomkey=201 81234 其中 roomkey 是8碼任意數字 (1000000~99999999)，代表P2P 會議室號碼，使用相同roomkey 就可以兩兩交談。 # 適用瀏覽器: chrome, firefox , opera , edge safari (11.0.2以上)
17. Demo-2 Conference-1 使用瀏覽器執行網址: https://rtc.tw/room.html?room=1 (可任選1~15 個會議室). Ｗindows Chrome可以選擇Screen Share做螢幕分享. # 適用瀏覽器: chrome, firefox , opera , edge , safari .
18. Demo-3 Conference-2 使用瀏覽器執行網址: https://rtc.tw/cf2.html 立即進入30人的會議室,新加入者會自動新增顯示視窗(下圖),default 為小的靜態視窗(pause video,為避免同時太多動態視窗,造成頻寬壅 塞),可以按任何小視窗=>大的動態視窗,再按一下=>回到小的靜態視 窗,可自由依照頻寬環境及觀看需求,自行點選數個動態視窗. #適用瀏覽器: chrome, firefox , opera , edge .
19. Demo-4 WebRTC x SIP x PSTN 1. 使用瀏覽器執行下面網址: https://rtc.tw/ivr.html 輸入 userid使用7000~8000之間4位數字 => 按”Login”登入. 2. 使用SIP,請先註冊rtc.tw, userid使用9500~9700,密碼不限. 3. 任兩方登入後, 即可互撥,使用瀏覽器輸入對方userid於Peerid欄位,按下”Video Call” or “Audio Call” ,受話方”Answer”後即可通訊. # PSTN demo : 可以由webrtc 直接撥至一般手機或家裡電話. # 適用瀏覽器: chrome, firefox , opera , edge , safari (11.0.2以上)
20. Demo-5 : Video-IVR 瀏覽器執行網址: https://rtc.tw/wivr.html?userid=3005&videocall=1 1 依下面按鍵操作: “1” : 進入自我錄影模式=>按任意鍵結束=>播放所錄=>回影片 “#” : 播放下一部影片 “*” : 播放上一部影片 2. 結束按”Hang Up”後，可以按”play record-input”觀看側錄 或按”play record-output”觀看所播放的側錄 #適用瀏覽器: chrome, firefox , opera , edge , safari (11.0.2以上)
21. Demo-6 : 即時對話-語音辨識 使用瀏覽器執行網址: https://rtc.tw/asr.html # 適用瀏覽器: chrome, firefox , opera , edge , safari (11.0.2) 1. 輸入UserID(1000~8000之間任4位數字),再按下”Login”=>完成登入. 2. 單人模式: 登入後,按下”Video Call” or “Audio Call”,即可開始說話辨識. 3. 雙人對話模式: 任兩方登入後, 主叫方輸入對方userid於PeerID欄位,按下”Video Call” or “Audio Call”,受 話方彈出來電視窗=>按”Answer”後,即可開始對話. 4. 說話過程中,請特別注意瀏覽器畫面最上一行:藍色Speech detecting…..與紅色Speech detected.Recognizing….這是說話者聲音的端點偵測,為提升辨識率與辨識成本,只有在用戶開始說話後, 才會進行語音辨識,辨識結果會即時出現在: MySpeech: 我現在的說話內容&PeerSpeech: 對方現在的說 話內容. 5. 瀏覽器畫面下方有一個歷史對話盒,me:代表我的說話內容, peer:代表對方. 6. 掛斷電話:按下”HangUp”鍵,掛斷後可以按”play record-mix”播放側錄影音,或按”show speech-text”顯示 對話辨識結果 https://cloud.google.com/speech-to-text/pricing
22. OPUS (Full Band 48 K) udio Codec 桌機版Chrome 第一次進入https://rtc.tw/room.html?room=1 ,按下網頁的 “Screen Share”鈕(下圖 左) , 彈出”是否新增RTC Screen Share”視窗(下圖中) , 同意安裝後即可在會談過程中分享螢幕畫 面. => 選擇所要分享的screen畫面(下圖右), => 進入會議室(任選1~15) , 其他人進入該會議室 , 即 可看到分享的screen,並可互相交談. Demo-7 : Desktop Chrome Screen Sharing
23. OPUS (Full Band 48 K) udio Codec Demo-8 : Youtube 直播線上字幕 使用瀏覽器執行網址: https://rtc.tw/youtube.html?v=uiJ4zibW8_M
24. Demo-9 : Vision Text Detection (截圖與影像文字辨識) 瀏覽器執行網址: https://rtc.tw/vtext.html?userid=3005&videocall=1 1. 可按”Switch Camera”=>切換前後鏡頭 2. 對準圖片文字後按下”Catch Text”=>截圖＆文字辨識 3. 每次新的截圖＆文字辨識顯示在下方 Current Vision Text … # 適用瀏覽器: chrome, firefox , opera , edge , safari
25. Demo-10 : WebCall to 台灣電話 瀏覽器執行網址: https://rtc.tw/wpstn.html?userid=3055&audiocall=1 進入後約１～2秒，聽到撥號音(Dial Tone)，即可使用下面鍵盤撥出任何台灣的電話號碼,就像使用家裡話 機一樣.（本測試有2分鐘通話時間限制） # 適用瀏覽器: chrome, firefox , opera , edge , safari