View
2.116
Download
0
Category
Preview:
Citation preview
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
コードの書きやすさが伝われば光栄です
まとめよう
ご清聴ありがとうございました
Recommended