ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Post on 08-Sep-2014
44 Views
Preview:
DESCRIPTION
Transcript
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
top related