SlideShare a Scribd company logo
HTML5 Conference 2013
2013 11 30

@futomi

futomi.hatano

http://www.html5.jp/
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
•
•
•
•

1
2

HTML5 Web
HTML5 Web

• W3C

API

•

API

•

• 2013

API
API

1
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
API
•
•
•
•

•
•

(

)
API
•
•
•
•
•

...

HTML5
API

写真:http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos
1
WebRTC DTMF
WebRTC
•
•
• IP
•

/

Skype
/

(

)

(

)
Peer-to-peer DTMF
•
•
•
•
•
•
•

Dual-Tone Multi-Frequency
0 9 A D *
2
Audio Channel

#

16

IVR
• Interactive Voice Response
•
//

//
// RTCDTMFSender
//

createDTMFSender

(100ms
insertDTMF

50ms

)
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
WebAudio API PannerNode
Web Auido API
•
• iOS
•
•
• gUM
•
•
•
•
•
•
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
•
Media Source Extensions
MSE
• HTTP

•

API

•
•
•

•

video
MPEG-DASH
• Dynamic Adaptive Streaming over HTTP
• HTTP
Adaptive Streaming
•
•
•
• XML
• MPD Media Presentation Description
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
MPD
<?xml version="1.0"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500000S" ...>
...
<Period id="" duration="PT0H0M33.00S">
<AdaptationSet segmentAlignment="true" maxWidth="854" maxHeight="480"
maxFrameRate="12800/510" par="854:480">
...
<Representation id="1" mimeType="video/mp4" codecs="avc1.4d4029,mp4a.40.2"
width="854" height="480" frameRate="12800/510" sar="1:1"
audioSamplingRate="48000" startWithSAP="0" bandwidth="1639763">
<AudioChannelConfiguration .../>
<SegmentList timescale="1000" duration="1215">
<Initialization sourceURL="movie_segmentinit.mp4"/>
<SegmentURL media="movie_segment1.m4s"/>
<SegmentURL media="movie_segment2.m4s"/>
...
GPAC MP4Box

http://gpac.wp.mines-telecom.fr/mp4box/dash/
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Media Capture and Streams
screen capture
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
//
//
{ video: { mandatory: { chromeMediaSource: "screen" } } }
//

//
// SSL

PermissionDeniedError
2
Encoding
•
• ArrayBufferView
•
•

•
•

UTF-8, UTF-16LE, UTF-16BE
ArrayBufferView
// Shift_JIS
// ArrayBufferView

Uint8Array
("

// Shift_JIS TextDecoder
//
//

//

")
// UTF-8

TextDecoder

// UTF-8
// Uint8Array

ArrayBufferView

// 16

// "e3 81 82 e3 81 84 e3 81 86 e3 81 88 e3 81 8a"
Web Cryptography API
•
•
•
•
•

(SHA-256, SHA-384, etc.)
//
// Crypto
//
// CryptoOperation
//
DOMMatrix interface
•
• 3x3, 4x4
•
,
,
,
,
• element.style.transform
DOMMatrix
//
DOMMatrix

// Chrome, Opera, Safari

WebKitCSSMatrix
// IE10
MSCSSMatrix
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Transferable objects
//
//

//

buffer
Transferable
// Transferable
//

[buffer]

//
//

buffer
3
Clipboard API and events
document
document
document

copy
cut
paste
// Internet Explorer
// DataTransfer
//

// Internet Explorer
//

// DataTransfer
Base64 utility methods
Base64
• ASCII
•
•
// ASCII

NG

Base64
// "VGhpcyBpcyBhIHN0cmluZy4="

// Base64

ASCII
// "This is a string."
4
The Screen Orientation API
•
•
• Fullscreen
window.screen.addEventListener("mozorientationchange",
function(event) {
//
var ori = window.screen.mozOrientation;
...
},
false);
mozFullScreenEnabled
mozRequestFullScreen()
mozfullscreenchange
mozFullScreenElement
window.screen.mozLockOrientation("landscape");
MediaStream Recording
• Media Capture and Streams
•

• Firefox Aurora

Blob
//

MediaRecorder

//
//
// audio

// Blob
Web Animations 1.0
•
•
•
•
•

CSS

SVG Animations
web-animations-js
//

img

//

//

AnimationEffect

TimingInput

//

Animation

//

Player
SVG
// SVG

path

// SVGPathSegList

//

PathAnimationEffect
//
// parGroup

//

Animation

ParGroup
Player
//
// SeqGroup

//

Animation

SeqGroup
Player
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
http://bit.ly/html5C201311

@futomi

futomi.hatano

http://www.html5.jp/

More Related Content

ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013