web 최신 기술 동향 및 플랫폼의 web 최신 기술 지원 방향 · tizen web engine...
TRANSCRIPT
![Page 1: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/1.jpg)
Web 최신 기술 동향 및 Tizen 플랫폼의 Web 최신 기술 지원 방향
삼성전자 SWC | Web Platform Lab | 박중헌
삼성전자 SWC | Web Platform Lab | 김현준
![Page 2: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/2.jpg)
Tizen Web Engine - Blink
Progressive Web App
WebRTC
WebVR
01
02
03
04
Contents
![Page 3: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/3.jpg)
Presenter
JOONGHUN PARK
Samsung Electronics
Tizen Web Engine Developer
WebKit Committer
E-mail: [email protected]
![Page 4: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/4.jpg)
Tizen 3.0 플랫폼의 Web Engine - Blink
Tizen Web Layout Engine의 변경
• 2013년 4월 3일 Google Blink forking 발표
• Tizen 2.4 WebKit -> Tizen 3.0 Blink
Blink
https://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html
![Page 5: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/5.jpg)
Tizen 3.0 플랫폼의 Web Engine - Blink
Tizen이 Blink로의 Web Engine 변경을 통해 얻고자 하는 것
• Rich HTML5 Features Support
• Fast Support for the latest HTML5 Features – W3C 최신 표준의 빠른 지원
Progressive Web App, WebRTC, WebVR, etc
2016년 11월 기준
Chrome Canary 56와 Safari Technology Preview 17의
html5test.com score 비교
Chrome Canary 56 Safari Technology Preview 17
![Page 6: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/6.jpg)
Tizen 2.4 플랫폼의 Web Engine – WebKit
https://webkit.org/status/#specification-service-workers
In WebKit Project,
Progressive Web App의
Core Component -
Service Worker
Not supported yet
![Page 7: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/7.jpg)
Tizen 3.0 플랫폼의 Web Engine - Blink
https://www.chromestatus.com/features/6461631328419840
In Blink Project,
Progressive Web App의
Core Component -
Service Worker
Enabled by default
from chrome 40
![Page 8: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/8.jpg)
Progressive Web App
App과 같은 사용자 경험을 제공하는 Web Model
Web의 장점 + App의 장점
websites (O), packaged web app (X)
Progressive Web App
Tizen 3.0 - Blink Engine Adoption을 통해 Progressive Web App 지원
![Page 9: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/9.jpg)
Progressive Web App
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Progressive Web App Example - Flipboard
![Page 10: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/10.jpg)
Progressive Web App
1. Platform App Installer를 이용하는 명시적 Install 과정이 필요없다(Service Worker)
2. 불안정한 network 혹은 offline 환경에서도 loading이 빠르다(App Shell – Service Worker)
3. push notification을 제공한다(Push API + Notification API)
4. home screen에 아이콘을 둘 수 있다(App manifest)
5. top-level로서 full screen으로 동작할 수 있다
https://en.wikipedia.org/wiki/Progressive_web_app
Progressive Web App의 장점 5가지
![Page 11: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/11.jpg)
Progressive Web App
App Shell – user interface를 구성하는 HTML, CSS 그리고 Javascript
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
![Page 12: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/12.jpg)
Progressive Web App
Progressive Web App의 등장배경
웹을 앱으로 만들려는 이전의 시도 – Hybrid Apps
![Page 13: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/13.jpg)
Progressive Web App
https://s3.amazonaws.com/dfc-wiki/en/images/c/c2/Native_html5_hybrid.png
• Full System API 접근가능
• 패키징되어 단일 플랫폼에서만 실행가능
• Full System API 접근가능
• 모든 플랫폼에서 실행가능
• 부분적 System API 접근가능
• 모든 플랫폼에서 실행가능한 리소스(HTML, CSS, Javascript)
![Page 14: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/14.jpg)
Progressive Web App
Hybrid Web App
using
Apache Cordova
Apache Cordova
http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/
public class CordovaViewTestActivity extends Activity implements CordovaInterface { CordovaWebView cwv; /* Called when the activity is first created. */ public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); cwv = findViewById(R.id.tutorialView); Config.init(this); cwv.loadUrl(“file:///index.html”); }
http://docs.phonegap.com/en/3.0.0/guide_platforms_android_webview.md.html#Android%20WebViews
Hybrid App Framework
![Page 15: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/15.jpg)
Progressive Web App
offline에서 동작
home screen에 위치
system API들에 접근
user들을 다시 불러옴(push notification)
App Packaging 수행
App Store를 통한 배포 및 앱검색
앱스러움(Appyness)
URLs and Links
검색엔진을 통한 컨텐츠 직접접근
App Packaging 불필요
멀티플랫폼에서 동일한 사용성 보장
웹스러움(Webyness)
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Hybrid App의 단점 – 앱이 되기 위해(Appyness) 웹의 일부(Webyness)를 포기
![Page 16: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/16.jpg)
Progressive Web App
• Adobe AIR Applications
• Windows Store Apps
• Chrome Packaged Applications
• Firefox OS Packaged Applications
• Cordova/PhoneGap and Crosswalk Apps
• BlackBerry WebWorks Apps
• W3C Widgets (these enjoyed several implementations)
• WebOS Apps
• Chromium Embedded Framework
• Electron
앱스러움(Appyness)을 위해 웹스러움(Webyness)을 포기한 프로젝트 사례들
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
![Page 17: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/17.jpg)
Progressive Web App
Web App Manifest
Service Worker
Push API
…
Progressive Web App의 구성
Specifications
![Page 18: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/18.jpg)
Progressive Web App
Web App Manifest
https://www.w3.org/TR/appmanifest/
![Page 19: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/19.jpg)
Web App Manifest
Web App Manifest
- Web App metadata를 모아놓는 json 파일
- Web App이 갖는 여러 속성을 지정한다(앱 이름, display type, icon link 등)
![Page 20: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/20.jpg)
Web App Manifest
Web App Manifest의 기술과 참조
(1) 기술
• manifest.json
(2) 참조
• manifest 파일경로 지정
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
![Page 21: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/21.jpg)
Web App Manifest
Web App Manifest 속성 기능
(1) 시작 url 지정
(2) icon customizing
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
"start_url": "/?utm_source=homescreen" "start_url": "/?utm_source=homescreen" "start_url": "/?utm_source=homescreen"
![Page 22: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/22.jpg)
Web App Manifest
Web App Manifest 속성 기능
(3) splash screen 추가
1) Image, Title 지정
Image : icons array
Title : short_name (home screen에서 사용)
, name (install banner에서 사용)
2) background color 지정
3) theme color 지정
“theme_color” : “aliceblue”
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
![Page 23: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/23.jpg)
Web App Manifest
Web App Manifest 속성 기능
(4) launch style 지정
1) display type
![Page 24: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/24.jpg)
Web App Manifest
Web App Manifest 속성 기능
(4) launch style 지정
2) initial orientation
![Page 25: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/25.jpg)
Web App Manifest
Web App Manifest 속성 기능
(4) launch style 지정
3) site-wide theme color
![Page 26: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/26.jpg)
Progressive Web App
Service Worker
https://www.w3.org/TR/service-workers/
![Page 27: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/27.jpg)
Progressive Web App
Service Worker – Event-driven background processing
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
sw
Navigation / Resource Request
sw sw
Page Page Page
scope 1 scope 2 scope 3
1. fetch event
2. onfetch event handler
Cache
3. Cache.matchAll
4. Matched Resource
7. Response To Client
5. Request Resource
6. Request Response
Web App Resource Caching을 통한
Offline 실행 지원
![Page 28: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/28.jpg)
Service Worker
Service Worker를 기반으로 하는 아래의 specification들이 가능해짐
Push notifications
Background Sync
Periodic Background Sync
…
https://www.w3.org/TR/service-workers/
![Page 29: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/29.jpg)
Service Worker
1. Offline 우선으로 동작
2. background event 처리
3. 웹 서버 업데이트가 곧 앱 업데이트를 의미
Service Worker의 특징 3가지
![Page 30: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/30.jpg)
Service Worker
1. Same Origin에서 동작
2. HTTPS 기반으로 동작
3. Registration 기반으로 동작 – sw가 위치한 scope 아래의 페이지만 제어 가능.
4. 버전 관리를 위해 waiting worker, active worker 존재
5. 필요없을 때는 종료되고, 필요할때 재시작
6. ES6 Promise 기반으로 동작
Service Worker의 기본동작
![Page 31: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/31.jpg)
Service Worker
Service Worker Life Cycle Install var sw = navigator.serviceWorker;
sw.register(scriptURL, {scope: scopeURL});
Resource Pre-caching oninstall = e=> { /* cache here */ }
Managing Cached Resource onactivate = e => { /* delete old cached resourses */ }
Handling Fetch Event Proxying network.
onfetch = e=> { /* processing for e.request */}
Update According To 24 Hours-Rule Invoke registration.update() every navigation.
Bypass any browser caches if the previous fetch occurred over
24 hours.
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
또는 이전버전의 SW
현재 버전의 SW
install
다음 페이지 방문시 현재 버전의
SW activation
install 실패.
이전 버전의
SW및 resource
계속 사용
SW 버전관리 목적
![Page 32: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/32.jpg)
Progressive Web App
Push Notification
=
Push API
https://www.w3.org/TR/push-api/
+
Notification API
https://notifications.spec.whatwg.org/
![Page 33: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/33.jpg)
Push Notification
Facebook made push
notification available
on their site
http://www.androidauthority.com/facebook-push-notifications-now-available-via-chrome-no-official-app-needed-641986/
![Page 34: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/34.jpg)
Push Notification
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/permissions-subscriptions
![Page 35: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/35.jpg)
Progressive Web App
![Page 36: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/36.jpg)
Presenter
HYUNJUNE KIM
Samsung Electronics
Tizen Web Engine Developer
Chromium Committer
E-mail: [email protected]
![Page 37: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/37.jpg)
WebRTC
WebRTC
https://www.w3.org/TR/mediacapture-streams/ https://www.w3.org/TR/webrtc/
![Page 38: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/38.jpg)
WebRTC
• Support Audio/Video Chat
• Support P2P data transportation
• Support Javascript API for developers
• No need to install Plug-In
![Page 39: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/39.jpg)
WebRTC
WebRTC RTCPeer
Connection
Media
Stream
RTCData
Channel
![Page 40: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/40.jpg)
WebRTC - MediaStream
MediaStream
MediaElement
<video, audio>
RTCPeerConnection
MediaRecoder
ImageCapture
Web Audio
Network
Streaming
Data (RTCPeerConnection)
Video
Tracks
Audio
Tracks
“All tracks in a MediaStream are intended to be synchronized when rendered”
![Page 41: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/41.jpg)
WebRTC - MediaStream
![Page 42: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/42.jpg)
WebRTC - MediaStream
EXAMPLE
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
navigator.getUserMedia({video: true, audio: true},
successCallback, errorCallback);
function successCallback(stream) {
// Sink MediaStream to MediaElement, RTCPeerConnection or etc.
videoElement.src = window.URL.createObjectURL(stream);
}
![Page 43: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/43.jpg)
WebRTC - RTCPeerConnection
Hand
shake
SDP
ICE Candidate
Signaling
server
![Page 44: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/44.jpg)
WebRTC - RTCPeerConnection
Caller Callee Signaling Server STUN Server
Offer with SDP
Offer with SDP
Answer with SDP
Answer with SDP
Get (host:port) from STUN server
Send candidate(host:port) to Callee
Get (host:port) from STUN server
Send candidate(host:port) from STUN
Send candidate(host:port) to Caller
Send candidate(host:port) to Caller
![Page 45: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/45.jpg)
WebRTC - RTCPeerConnection
SDP : Session Description Protocol (RFC 4566)
• Metadata to understand Resolution and Codec for peers
v=0
o=- 1832107925485887680 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
... (Omit) …
m=video 9 RTP/SAVPF 100 116 117 96
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
… (Omit) …
a=rtcp-mux
a=rtpmap:100 VP8/90000
a=ssrc:2305936986 imageattr:* [x=720,y=576]
a=ssrc:2305936986 framerate:30
... (Omit) …
a=ssrc:2305936986 mslabel:I3PeRUhDIUPcnWJPvLVD2BwTmotHwfgxu9DO
a=ssrc:2305936986 label:34d44b3d-e3cb-4220-bc7c-5b3e72b7b7ee
https://tools.ietf.org/id/draft-nandakumar-rtcweb-sdp-01.html
![Page 46: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/46.jpg)
WebRTC - RTCPeerConnection
ICE (STUN, TURN)
• What’s the problem?
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
Signaling
Server
Client B
1
2
![Page 47: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/47.jpg)
WebRTC - RTCPeerConnection
ICE (STUN, TURN)
• What’s the problem?
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
Signaling
Server
Client B
1 NAT
Local
IP/PORT
Public
IP/PORT
![Page 48: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/48.jpg)
WebRTC - RTCPeerConnection
ICE (STUN, TURN) STUN(RFC 5389)
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
STUN
Server
Client B
1
NAT Local
IP/PORT
Public
IP/PORT
Signaling
Server 2
3
![Page 49: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/49.jpg)
WebRTC - RTCPeerConnection
ICE (STUN, TURN) TURN(RFC 5766)
http://help.estos.com/help/en-US/procall/5/erestunservice/dokumentation/htm/IDD_FUNCTIONALITY.htm
Client A
STUN
Server
Client B
1
NAT Local
IP/PORT
Public
IP/PORT
Signaling
Server 2
TURN
Server 3
![Page 50: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/50.jpg)
WebRTC - RTCPeerConnection
ICE (STUN, TURN)
What’s the ICE?
STUN TURN
![Page 51: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/51.jpg)
WebRTC - RTCPeerConnection
Candidate
Client A
STUN
Server
Client B
1
NAT Local
IP/PORT
Public
IP/PORT
Signaling
Server 2
3
![Page 52: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/52.jpg)
WebRTC - RTCPeerConnection
Signaling server
• Exchange SDP and candidate information(Basically)
• How to Websocket, REST API, …
![Page 53: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/53.jpg)
WebRTC - RTCDataChannel
EXAMPLE
var pc = new RTCPeerConnection();
var dataChannel = pc.createDataChannel(“Test”, options);
dataChannel.onopen = function () { dataChannel.send(‘Hello World!!”); }
dataChannel.onmessage = function (e) { console.log(e.data); }
dataChannel.onerror = function (e) {}
dataChannel.onclose = function () {}
• Send string data, binary data
• Familiar API
![Page 54: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/54.jpg)
WebRTC - Debug
• chrome://webrtc-internals
• Event Logs
• SDP, Candidate Logs
• Multimedia Information
![Page 55: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/55.jpg)
WebRTC - DEMO
![Page 56: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/56.jpg)
WebVR
WebVR
https://w3c.github.io/webvr/
![Page 57: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/57.jpg)
WebVR
Web VR API
(position, orientation, projection matrix, … )
WebVR API
WebGL API
![Page 58: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/58.jpg)
WebVR
EXAMPLE
var vrDisplay;
navigator.getVRDisplays().then(function (displays) {
if (displays.length > 0)
vrDisplay = displays[0];
});
![Page 59: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/59.jpg)
WebVR
EXAMPLE var frameData = new VRFrameData();
function onVRFrame() {
vrDisplay.requestAnimationFrame(onVRFrame);
vrDisplay.getFrameData(frameData);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
vrDisplay.submitFrame();
}
vrDisplay.requestPresent([{ source: canvas }]).then(function() {
vrDisplay.requestAnimationFrame(onVRFrame);
} );
Left Right
![Page 60: Web 최신 기술 동향 및 플랫폼의 Web 최신 기술 지원 방향 · Tizen Web Engine Developer WebKit Committer E-mail: jh718.park@samsung.com . Tizen 3.0](https://reader036.vdocuments.site/reader036/viewer/2022081405/5f08edfb7e708231d42468fd/html5/thumbnails/60.jpg)
Copyright ⓒ 2016 SAMSUNG ELECTRONICS. ALL RIGHTS RESERVED
THANK YOU