Integrating Stunning Media Experiences in XAML

1. APP-788T Integrating Stunning Media Experiences in XAML Marco Matos Senior Program Manager Microsoft Corporation

2. Agenda • What’s new for media in Windows for XAML apps • Understanding MediaElement, MediaPlayer, and CaptureElement • Enable your Metro style app to play audio in the background • Tackling advanced scenarios around Media You’ll leave with examples of how to • Create apps with rich, integrated media experiences • Incorporate media into your apps in new ways

3. Media powered by Windows 8 • Access the full power of the Windows media platform through XAML. - Playback; Capture; Connect • Simple to use media sourced from these locations: • Application storage; Local libraries; HomeGroup PC libraries, network attached storage; Web servers; Apps • Support for streaming, background audio, communications, playto, extensions, etc.

4. Media Platform <MediaElement /> <MediaPlayer /> <CaptureElement /> Windows Runtime (WinRT) Windows Metro Style Web App (XAML) Streaming Protection MediaControl Capture Transcode Extensibility Windows Runtime (WinRT) Playback/Preview Capture Streaming Extensibility MediaControl Transcode Protection Media Foundation Media Foundation Audio/Video Source Video Decoder Video Effect 1 Video Effect 2 Video Encoder Audio/Video Sink Audio Decoder Audio Effect 1 Audio Effect 2 Audio Encoder DirectX Windows Audio Session API (WASAPI)

5. Audio and video are a key element of visually rich and engaging applications.

6. demo Memories app Take your scrapbooking app and make it come to life with video Video files packaged with the app Video files from disk Camera Capture UI

7. MediaAPIs

8. Familiar MediaElement • Events • CurrentStateChanged • DownloadProgressChanged • MarkerReached • MediaEnded\Opened\Failed • SeekCompleted • VolumeChange • Methods • Play() • Pause() • Stop() • Properties • AspectRatioHeight/Width • AudioStreamSelection • Balance • BufferingProgress • CurrentState • DownloadProgress • Markers • NaturalDuration • Source • Volume

9. MediaElement <code snippet> • //MainPage.xaml • <MediaElementAutoPlay="True" Stretch="Uniform"Height=“250" Width=“250"/> • //MainPage.xaml.cs • if (myME.CurrentState == MediaElementState.Playing) • { • myME.Pause(); • }

10. Building a Media Player

11. MediaPlayer control • Templated control around MediaElement • Windows 8 look and feel transport controls • Targeted for basic playback scenarios • Can be styled like any other XAML control

12. MediaPlayer • <MediaPlayerx:Name=“myMP"AutoPlay="True" Stretch="Uniform" Height=“250" Width=“250"/>

13. Capture

14. demo Capture app CaptureElement Preview Images Playback Video

15. Capture Element • Camera app provides it’s own UI • UI Element for customizing preview scenarios • Capture photos and videos from within XAML application • Integrates with MediaCapture Manager

16. CaptureElement • //MainPage.xaml • <CaptureElementx:Name=“myCaptureElement" Width="320" Height="240"/> • //MainPage.xaml.cs • MediaCapturemediaCaptureMgr = newMediaCapture(); • MediaCaptureInitializationSettingsinitSettings = newMediaCaptureInitializationSettings(); • awaitmediaCaptureMgr.InitializeAsync(initSettings); • myCaptureElement.Source = mediaCaptureMgr; • awaitmediaCaptureMgr.StartPreviewAsync();

17. Building a Media App

18. demo My Media Player Walk through an end to end media application FilePicker MediaPlayer

19. Local Library Access • Allow app user to pick files for your application • Access My Music/Videos/Pictures libraries via capabilities • Visualize user’s library with XAML modern collections • Utilize APIs to access rich set of media related file properties

20. demo My Media Player Walk through an end to end media application Music APIs access Music Library access Visualize Media Full Screen Video

21. Fullscreen video • Respect your application’s XAML tree • Utilize Visibility property • Window.Current.Bounds is your friend • MediaPlayer & MediaElement

22. Background Audio

23. I can listen to my favorite songs while using other Metro style apps

24. demo My Media Player Walk through an end to end media application Background Audio

25. Background Audio • Windows 8 manages playback so users can focus on enjoying their media • Apps opt in via PackageManifest and MediaElement • Hierarchy of media categories for Metro apps • Only use background audio if your scenario requires it

26. Enable Background Audio • <!--package.appxmanifest--> • … • <ExtensionCategory="windows.backgroundTasks" • StartPage="default.html"> • <BackgroundTasks> • <TaskType="audio" /> • </BackgroundTasks> • </Extension> • //MainPage.xaml • <MediaElement x:Name="myME"AudioCategory=“Media"/>

27. Background Audio – “AudioCategory”

28. demo My Media Player Mixing Audio

29. Advanced media scenarios

30. Integrate your Windows 8 device with your home media experiences

31. Play To User Experience Play To Controller Play To Receiver

32. Implementing PlayTo • voidmyPlayToManager_SourceRequested(PlayToManager sender, PlayToSourceRequestedEventArgs e) • { • PlayToSourceDeferralDeferral = e.SourceRequest.GetDeferral(); • e.SourceRequest.SetSource(myMediaElement.PlayToSource); • Deferral.Complete(); • }

33. Media Buttons MediaControlexposes events for media buttons PlaySelected, PauseSelected, PlayPauseSelected FastForwardSelected, RewindSelected NextTrackSelected, PreviousTrackSelected RecordSelected ChannelDownSelected, ChannelUpSelected Will work with USB-HIDdevices

34. Audio Device Type • Choose the audio output device specific to your scenario • Multimedia • Communication (default if AudioCategory=“Communications”) • Users can set the default devices in control panel

35. Media Formats and Codecs System-wide • File format: MP4 (preferred) or ASF • Video: H.264 or VC-1 • Audio: AAC, MP3 or WMA • Broad support across consumer hardware: great performance and battery life Per-app • Your Metro style app can package private plug-ins for its own use (e.g. adaptive streaming)

36. Extended Media Functionality • Audio/Video Effects • MediaFoundation is completely extensible and supports C++/COM components packaged with app • Microsoft will make a SmoothStreaming SDK for Windows Metro style apps available • Microsoft will provide an implementation of PlayReady for Windows 8 Metro style apps.

37. Recap

38. Media powered by Windows 8 • Built-in controls of MediaPlayer • Source media to your app from multiple locations • Enable media multitasking scenarios • Media Platform is completely extensible for your specific scenario

39. Related sessions • [APP-914T] The lifetime of XAML text: from input to display through printing • [PLAT-775T] Immersive video and audio Metro style apps part 1 • [PLAT-776T] Immersive video and audio Metro style apps part 2 • [PLAT-777T] Capturing personal photos, video and audio in Metro style apps • [HW-715T] Tailoring the Metro Camera Experience • [PLAT-783T] Extending the media platform using input, output and processing plug-ins

40. Further reading and documentation Metro style app Dev Center Links • Learn to build Metro style apps • Metro style app samples • Building your first Metro style app with C#, C++, and Visual Basic • Developing basic Metro style apps with C#, C++, and Visual Basic Windows 8 SDK Samples

41. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

42. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.