ようこそ、html5裏apiの世界へ - html5 conference 2013

2013 11 30

@futomi futomi.hatano

http://www.html5.jp/

HTML5 Conference 2013

• • 1 HTML5 Web API

• 2 HTML5 Web API

•

• W3C API •

API

•

• 2013 1

API

•

• ( )

•

•

•

•

写真：http://www.bridalguide.com/planning/engagement/rock-climbing-engagement-photos

API

•

•

•

•

• ...

HTML5

API

1

WebRTC DTMF

WebRTC

• Skype

• / /

• IP

• ( ) ( )

Peer-to-peer DTMF

• Dual-Tone Multi-Frequency

•

• 0 9 A D * # 16

• 2

• Audio Channel

•

• IVR

• Interactive Voice Response

•

//

//

// RTCDTMFSender

createDTMFSender

// (100ms 50ms )

insertDTMF

WebAudio API PannerNode

Web Auido API

•

• iOS

•

•

• gUM

•

•

•

•

•

•

•

Media Source Extensions

MSE

• HTTP

• videoAPI

• •

•

•

MPEG-DASH

• Dynamic Adaptive Streaming over HTTP

• HTTP Adaptive Streaming

•

•

•

• XML • MPD Media Presentation Description

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"/>

...

http://gpac.wp.mines-telecom.fr/mp4box/dash/

GPAC MP4Box

Media Capture and Streams screen capture

//

//

{ video: { mandatory: { chromeMediaSource: "screen" } } }//

//

// SSL PermissionDeniedError

2

Encoding

• • ArrayBufferView

•

•

• • UTF-8, UTF-16LE, UTF-16BE

ArrayBufferView

// Shift_JIS Uint8Array

// ArrayBufferView (" ")

// 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

// Chrome, Opera, Safari

WebKitCSSMatrix// IE10

MSCSSMatrix

DOMMatrix

Transferable objects

//

//

// buffer

Transferable

// Transferable

//

[buffer]

// buffer

//

3

Clipboard API and events

document copy

document cut

document paste

// Internet Explorer

// DataTransfer

//

// Internet Explorer

// DataTransfer

//

Base64 utility methods

Base64

• ASCII

• NG

•

// ASCII 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

•

Blob

• Firefox Aurora

//

MediaRecorder

//

//

// Blob

// audio

Web Animations 1.0

•

• CSS SVG Animations

•

•

•

web-animations-js

// img

// AnimationEffect

// TimingInput

// Animation

// Player

SVG

// SVG path

// SVGPathSegList

// PathAnimationEffect

// Animation

// parGroup

ParGroup// Player

// Animation

// SeqGroup

SeqGroup// Player

@futomi futomi.hatano

http://www.html5.jp/

http://bit.ly/html5C201311