WP7のメディアを使い倒す

株式会社システムフレンド

西村誠

Agenda

・自己紹介

・画像ファイルを使い倒す

・音声ファイルを使い倒す

・動画ファイルを使い倒す

自己紹介

・西村誠

パティシエ歴5年

プログラマー歴5年

ケーキを作るのと同じぐらいプログラミングができる！！

自己紹介

・twitter coelacanth

・ブログ

「眠るシーラカンスと水底のプログラマー」

・facebook 西村 誠

主にwindows phone 7について発信してます

自己紹介

近況：IS12Tを予約して購入！！

自己紹介

開発用端末をいただきました！！

自己紹介

ぁ、被った・・・・

開発用端末をいただきました！！

今日の目的

・色々なメディアを使ったアプリを作れるようになる

・メディアを使ったアプリのアイデアのヒントを与える

・Windows Phone 7を好きになる！！

画像ファイルを使い倒す

画像ファイルを使い倒す

さっとカメラで撮影して、

Webに画像をアップ！！

モバイルの楽しみの一つですよね！！

画像を使ったアプリで

楽しい体験を提供しましょう

画像ファイルを使い倒す

DEMO.1

Calorine

食べたものを記録するライフログアプリ

画像ファイルを使い倒す

カメラで撮影した画像を利用する

画像ファイルを使い倒す

登場人物

CameraCaptureTask

カメラを起動する カメラを起動すると、撮影が終わるまで

アプリの制御を外れる

タスク=OSの機能を呼び出す 例：Emailを送信

Meでtwitter,facebookで発言

画像ファイルを使い倒す

登場人物

PhotoResult

撮影結果を取得できる

撮影データはBitmapImageクラスに

セットして表示できる

画像ファイルを使い倒す

var cam = new CameraCaptureTask(); // カメラ撮影終了時に呼び出すイベントハンドラー cam.Completed += new EventHandler<PhotoResult>(this._cameraCaptured); // カメラ起動(本当はtry/catchしてね) cam.Show();

画像ファイルを使い倒す

軽 触

戻

画

画像ファイルを使い倒す

void _cameraCaptured(object sender, PhotoResult e) { // 写真を撮影したかどうか if (e.TaskResult == TaskResult.OK) { var bitmapImage = new BitmapImage(); // Imageコントロールにセット bitmapImage.SetSource(e.ChosenPhoto); imageCntroll.Source = bitmapImage;

画像ファイルを使い倒す

保存した画像を利用する

画像ファイルを使い倒す

登場人物

PhotoChooserTask

PictureHubから画像を選択する

画像ファイルを使い倒す

【保存してある画像を使う】 // タスクを生成

PhotoChooserTask pix = new PhotoChooserTask(); // PhotoResultは先ほど見ましたね！！ pix.Completed += new EventHandler<PhotoResult>(_choosePhotoCompleted); // trueだとやっぱカメラで撮るわ―ってできる pix.ShowCamera = true; pix.Show();

画像ファイルを使い倒す

PhotoChooserタスクも選択した後は

PhotoResultクラスを受け取るので、その後の処理は同じ

画像を選択し終わるまで制御が外れるのも同じ

画像ファイルを使い倒す

画像を保存する

画像ファイルを使い倒す

登場人物

MediaLibrary

画像を保存します。

(シークの位置に注意！！)

画像ファイルを使い倒す

画

Stream stream = e.ChosenPhoto;

String photo_name = “hoge_image";

MediaLibrary lib = new MediaLibrary();

// シークしてあげます。

stream.Seek(0, SeekOrigin.Begin);

lib.SavePicture(photo_name, stream );

画像ファイルを使い倒す

MediaLiblaryは

Microsoft.Xna.Frameworkを参照に追加する必要がある

画像ファイルを使い倒す

これまでカメラの映像を使うときは、

先ほども言ったようにアプリの制御を外れていたのでARのようなアプリはできませんでした。

しかし、Windows Phone OS 7.1(Mango)からカメラ映像を自由に利用できるようになりました！！

画像ファイルを使い倒す

DEMO.2

落書き

画像ファイルを使い倒す

わーい、

マーケットで3番目に表示されてる！！

と思って昨日確認したら

画像ファイルを使い倒す

DEMO.2

落書き

画像ファイルを使い倒す

登場人物

PhotoCamera

カメラ映像を扱うクラス

Canvasのブラシにセットすると

カメラ映像をはめ込んだように使用できる

画像ファイルを使い倒す

登場人物

VideoBrush

背景などに使えるブラシ

他にもSolidColorBrush(単色)などがある

Silverlight4ベースになった

MangoからはVideoBrushが使えるようになった！！

画像ファイルを使い倒す

【カメラ画像をブラシとして利用する】

<Canvas x:Name="cameraView“>

<Canvas.Background>

<VideoBrush x:Name=“videoBrush" />

</Canvas.Background>

</Canvas>

画像ファイルを使い倒す

【カメラ画像をブラシとして利用する】

var camera = new PhotoCamera();

camera.Initialized += new EventHandler<CameraOperationCompletedEventArgs>(_camera_Initialized);

this.videoBrush.SetSource(this._camera);

音声ファイルを使い倒す

音声ファイルを使い倒す

音楽プレイヤー、マイクロフォンを利用したアプリ

アプリに埋め込んだ音声の再生

音声を利用したアプリも色々ネタが広がりますね！！

音声ファイルを使い倒す

DEMO.3

そーしゃるぷれいやー

音声ファイルを使い倒す

登場人物

MediaPlayer

WindowsPhone7デフォルトの

「Music+Videos」

のようなプレイヤーを作成できる

音声ファイルを使い倒す

登場人物

MediaLibrary

登録された曲の一覧

を表すクラス

音声ファイルを使い倒す

var timer = new DispatcherTimer();

timer.Interval = TimeSpan.FromMilliseconds(50);

timer.Tick += delegate

{

FrameworkDispatcher.Update();

// 定期に呼び出される処理を書く

};

timer.Start();

音声ファイルを使い倒す

MediaPlayerクラスのプロパティ

MediaPlayer.Queue.ActiveSong.Duration; // 曲の時間

MediaPlayer.PlayPosition; // 再生している位置

MediaPlayer.Queue.ActiveSong.Album.Name;

MediaPlayer.Queue.ActiveSong.Artist.Name;

MediaPlayer.Queue.ActiveSong.Name;

音声ファイルを使い倒す

MediaPlayerクラスのプロパティ2

MediaPlayer.IsShuffled // シャッフル再生

MediaPlayer.IsRepeating // リピート再生

音声ファイルを使い倒す

曲リストなどはMediaLibraryクラスから取得

Var library = new MediaLibrary();

this._song_collection = library.Songs;

音声ファイルを使い倒す

DEMO.4

クラウディアボイス

効果音

音声ファイルを使い倒す

For Android & For iPhone

私作ってないけど移植されてたｗ

音声ファイルを使い倒す

登場人物

MediaElement

音楽、動画なんでもござれ

のメディア開発者(？)御用達のクラス

一人芝居級です

音声ファイルを使い倒す

// MediaElementクラスを利用

mediaElement.Source = new uri(“resources/40chui.wav”);

mediaElement.Play();

基本Web版Silverlightと同じ感覚

音声ファイルを使い倒す

DEMO.5

かんたん録音

音声ファイルを使い倒す

一つだけ音声が録音できる

シンプルな録音プレイヤー

決して

複数対応が面倒

だったわけではない！！

音声ファイルを使い倒す

登場人物

Microphone

マイクを利用するためのクラス

これで録音開始ー

音声ファイルを使い倒す

登場人物

DynamicSoundEffectInstance

録音した音を再生ー

他にもいろいろできそうだけど

また使いこなせていない

音声ファイルを使い倒す

登場人物

FrameworkDispatcher

監督がXNA系の場合に良く登場する俳優

色々重宝する・・・というか知らないと

うまく動かなくて悩む・・・・

音声ファイルを使い倒す

【録音開始】 // Microphoneクラスを利用(newしない) mic = Microphone.Default; // バッファーのデータ処理可能になったら呼び出すよー mic.BufferReady += new EventHandler<EventArgs>(_mic_BufferReady); // 録音開始 mic.Start();

音声ファイルを使い倒す

// バッファーがたまる毎に分離ストレージに書き込む int sampleSize = _mic.GetSampleSizeInBytes(mic.BufferDuration); byte[] extraBuffer = new byte[sampleSize]; int extraBytes = mic.GetData(extraBuffer); // この後分離ストレージに書き込む処理が続く

音声ファイルを使い倒す

【録音終了処理】

// 録音終了

mic.Stop();

音声ファイルを使い倒す

// Microphoneクラスを利用(newしない) playback = new DynamicSoundEffectInstance(mic.SampleRate, AudioChannels.Mono); // 長いけど再生用のクラスに音声データを呼び出しているんだー using (IsolatedStorageFileStream stream = storage.OpenFile("record", FileMode.OpenOrCreate, FileAccess.Read)) { byte[] buffer = new byte[stream.Length]; stream.Read(buffer, 0, buffer.Length); playback.SubmitBuffer(buffer); }

音声ファイルを使い倒す

// 再生

playback.Play()；

// 終了

playback.Stop()

音声ファイルを使い倒す

timer = new DispatcherTimer();

// OnTimerTick内ではFrameworkDispatcher.Updateしている

timer.Interval = TimeSpan.FromTicks(333333);

timer.Tick += OnTimerTick;

FrameworkDispatcher.Update();

timer.Start();

音声ファイルを使い倒す

FrameworkDispatcherって何？

XNAはwhile文のように決められたメソッドが定期的に呼び出される

その動作をSilverlightで再現するおまじないクラス

1フレームに一回Update()を呼び出す

動画ファイルを使い倒す

動画ファイルを使い倒す

・Web上から動画を再生

・Smooth Streaming動画を再生

動画ファイルを使い倒す

DEMO.6

MoviePlayer

動画ファイルを使い倒す

Web上に置かれたwmvファイルを

再生するサンプル

音声ファイルを使い倒す

登場人物

MediaElement

またまた登場

音楽も動画も再生できる便利なクラス

動画ファイルを使い倒す

MediaElement media = new MediaElement(); // 動画の再生に失敗(これが無いと失敗した理由がわからない) media.MediaFailed += new EventHandler<ExceptionRoutedEventArgs>(MediaFailed); // 再生終了時のイベント media.MediaEnded += new RoutedEventHandler(MediaEnded); media .Source = new Uri("http://coelacanth.heteml.jp/sl7_video_bord/vb.wmv"); media.Play();

動画ファイルを使い倒す

MediaElement.Sourceには

リソースファイルの動画もセットできる

一家に一台の便利なクラス！！！

動画ファイルを使い倒す

DEMO.7

SmoothStreamingSample

動画ファイルを使い倒す

SmoothStreaming形式の動画を

再生する

動画ファイルを使い倒す

SmoothStreamingとは？

動画を何種類かのビットレートで配信し、

ユーザーの状態に合わせて切り替える配信方式

動画ファイルを使い倒す

視聴者の帯域に合わせた動画配信が可能

シーク時にビットレートを下げることで高速なシークを実現

一つのビットレートをモバイル用にすることでモバイルでも同じ動画を再生できる

動画ファイルを使い倒す

つまりこういうこと！！

高画質 → 光回線ユーザー

中画質 → ADSLユーザー

低画質 → WP7ユーザー

全員が快適に適切な画質で

同じ動画が見れる！！

音声ファイルを使い倒す

登場人物

Smooth Streaming Client 1.5

SmoothStreaming再生するための

ライブラリ

http://www.microsoft.com/download/en/details.aspx?id=8227

音声ファイルを使い倒す

登場人物

MMP Player Framework 2.5

Microsoft Media Platform: Player Framework

http://smf.codeplex.com/releases/view/63434

音声ファイルを使い倒す

Mangoのβ2の頃は

うまく動きませんでしたが

今は大丈夫！！

音声ファイルを使い倒す

<core:SMFPlayer> <core:SMFPlayer.Playlist> <media:PlaylistItem DeliveryMethod="AdaptiveStreaming" MediaSource="http://ecn.channel9.msdn.com/o9/content/smf/smoothcontent/bbbwp7/big buck bunny.ism/manifest"/> </core:SMFPlayer.Playlist> </core:SMFPlayer>

まとめよう

以上、色々なファイルの触り方を

紹介しましたがいかがでしたか？

Windows phone 7

コードの書きやすさが伝われば光栄です

まとめよう

ご清聴ありがとうございました