Transcript Media platform Windows Metro Style App Playback/Preview Audio/Video Source Media Foundation WinRT (Windows.Media) Transcode Capture Video Decoder Video Effect 1 Video Effect N Video Encoder Audio Decoder Audio Effect 1 Audio Effect N Audio Encoder Streaming Audio/Video Sink.

Media platform
Windows Metro Style App
<audio src=“…”>
<video src=“…”>
Playback/Preview
Audio/Video
Source
Media Foundation
WinRT (Windows.Media)
Transcode
Capture
Video
Decoder
Video
Effect 1
Video
Effect N
Video
Encoder
Audio
Decoder
Audio
Effect 1
Audio
Effect N
Audio
Encoder
Streaming
Audio/Video
Sink
HTML5 Media Elements
• W3C HTML5 Spec
• You can create rich media
experiences by combining
with CSS and JavaScript and
DOM events
• Fully hardware accelerated
• Performance, battery life and
reliability
Select methods and attributes
•
•
•
•
•
•
•
•
•
•
•
•
•
•
play()
pause()
load()
audioTracks
readyState
controls
currentTime
duration
error
src
playbackRate
preload
volume
…
HTML VIDEO TAG EVENTS
•
•
•
•
•
•
•
•
•
•
•
abort
canplay
canplaythrough
durationchange
emptied
ended
error
loadeddata
loadedmetadata
loadstart
pause
•
•
•
•
•
•
•
•
•
•
•
play
playing
progress
ratechange
seeking
seeked
suspend
stalled
timeupdate
volumechange
waiting
<!-- Attributes allowed on both tags: src, preload, autoplay,
loop, controls. Video tags also support poster, width, height,
muted. Both support many events (e.g. volumechanged) -->
<audio id="myAudioTag" src="mySong.wma" preload="none" />
<audio src="mySong.m4a" autoplay loop controls />
<video
<video
<video
<video
id="myVideoTag" src="myVideo.mp4" preload="none" />
src="myVideo.wmv" autoplay loop controls />
src="myVideo.mp4" autoplay muted />
src="myAudio.mp3" poster="myImage.jpg" controls />
<audio id="myAudio" src="http://www.contoso.com/track1.mp3" autoplay />
<script type="text/javascript">
var audio = document.getElementById("myAudio");
// Handle when the audio track has reached the end
audio.addEventListener("ended", function() {
// Switch the audio src to a new track
audio.src = "http://www.contoso.com/track2.m4a";
});
</script>
<video id="player" controls autoplay />
<script type="text/javascript">
// Invoke a file picker for the user to select media from the file system
var
// Create a URL to represent the local file
var
"player"
<script>
// Programmatically select the file (could also be from home network storage)
var file = new
Windows.Storage.KnownFolders.musicLibrary.getFileAsync("track.mp3").
// From the file, extract media-specific properties
then(function(myFile) {
myFile.properties.getMusicPropertiesAsync().
then(function(musicProps) {
var album = musicProps.album;
var artist = musicProps.artist;
var title = musicProps.title;
// etc.
});
});
•
•
•
•
•
•
•
•
3D video
Audio and video effects and extensibility
Audio output selection such as Bluetooth
Background audio
DRM such as PlayReady
Low-latency support for communications & games
Play To for streaming to TVs & audio systems
Zoom and mirror mode for video
Programming Model
Windows.Media APIs
Much more than playing video and audio
Windows.Media.
Capture
Snap a picture, record video and audio
Devices
Input and output audio devices such as Bluetooth
Playlists
Work with audio playlists
PlayTo
Protection
Stream media to a television or audio system
Use PlayReady or other content protection systems
Transcoding
Convert music or video to other formats or resolutions,
trim, or make effects permanent
VideoEffects
Insert or remove well-known video effects such as
Stabilization
id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay
type="text/javascript">
// Step 1: Obtain PlayToManager object for app’s current view.
var
// Step 2: Register for the sourcerequested event (user selects Devices button).
"sourcerequested"
var
// Step 3: Specify the media to be streamed (to filter devices)
var
"videoplayer"
// The media will then be streamed to the device chosen by the user in the UI.
x:Name="videoplayer" Source="http://www.contoso.com/clip.mp4"
AutoPlay="true"
// Step 1: Obtain PlayToManager object for app’s current view.
// Step 2: Register for the SourceRequested event (user selects Devices button).
// Step 3: Specify the media to be streamed.
// The media will then be streamed to the device chosen by the user in the UI.
Camera Capture UI
It’s easy to snap a photo or record video by
invoking the built-in capture UI.
// Application manifest capabilities required to access camera and microphone
<Capabilities>
<DeviceCapability Name="webcam" />
<DeviceCapability Name="microphone" />
</Capabilities>
id="preview"
type="text/javascript">
// Invoke the camera capture UI for taking a photo
var captureUI = new Windows.Media.Capture.CameraCaptureUI();
captureUI.captureFileAsync(Windows.Media.CameraCaptureUI.Mode.photo).
then(function(capturedItem) {
if (capturedItem) {
// Display the photo
document.getElementById("preview").src =
URL.createObjectURL(capturedItem);
}
});
Convert media files into different formats,
resolutions or trim to a specific timeframe.
var
var
var
// Choose a popular output format and quality
var
// Create the file to transcode into, and select the input file to read from
"output.mp4"
"test.wmv"
// Transcode the file
// log "done"
var
var
var
// Specify the start and stop time defining the portion to keep
transcoder.trimStartTime = 900;
transcoder.trimStopTime = 6000;
// Create the file to transcode into, and select the input file to read from
"EditedVacation.mp4"
"vacation.mp4"
// Trim the file: profile isn’t changing so profile argument isn’t needed
// log "done"
A word on formats
Recap
Design guidelines for Play To receivers
Streaming media to devices using Play To
Play To & media streaming for Metro style apps
http://forums.dev.windows.com
http://bldw.in/SessionFeedback
BACKUP
// Define capture element in XAML
x:Name="preview" Width "320" Height "240" Margin "10,5,10,5"
// Initialize
// Assign the source
// Start the preview
// Select the input file to read from
// Create the file to transcode into
// Choose a popular output format and quality
// Transcode the file
// Select the input file to read from
// Create the file to transcode into
// Specify the start and stop time defining the portion to keep
transcoder.TrimStartTime = 900;
transcoder.TrimStopTime = 6000;
// Trim the file: profile isn’t changing so profile argument isn’t needed