جلسه 24 ام آموزش iOS : اپلیکیشن ضبط و پخش ویدئو

در جلسه قبل ، ما نحوه ساخت یک اپ ساده camera را آموزش دادیم. در این مقاله ، قصد داریم نحوه ساخت اپلیکیشن مشابه را آموزش دهیم ، اما با این تفاوت که این اپ ، برای ضبط و پخش ویدئو ، استفاده  می شود..

iOS API ایی که برای ضبط و پخش ویدئوها استفاده می شود ، می تواند برای تازه کارها ، کمی گیج کننده باشد ، زیرا چندین گزینه در آن ، در دسترس می باشد. اگر فقط می خواهیم که یک ویدئو را پخش کنیم ، می توانیم از فریم ورک MediaPlayer ، استفاده کنیم ، که امکان پخش ویدئو را ، چه به صورت محلی بر روی دستگاهی که در آن ذخیره شده ، و چه به صورت از راه دور ، فراهم می کند. با این حال ، اگر به ویژگی های پیشرفته همانند media asset management (مدیریت فایل های رسانه ای) ، media editing (ویرایش رسانه) ، track management و غیره نیاز باشد ، باید از فریم ورک AVFoundation ، استفاده کنیم. ما سعی خواهیم کرد که مطالب آموزشی را ساده نگه داریم و کار را با فریم ورک MediaPlayer ، شروع کنیم.

فریم ورک MediaPlayer ، دو کلاس اصلی برای نمایش ویدئوها و فیلم ها ، برای ما فراهم می آورد. اگر می خواهیم که یک ویدئو را بلافاصله و به صورت درون برنامه ای (inline) پخش کنیم (به طور مثال ، یک subview کوچکتر از اندازه صفحه نمایش) ، ما باید از MPMoviePlayerController ، استفاده کنیم. با استفاده از MPMoviePlayerController ، عملیات پخش در view متعلق به Movie player ، اتفاق می افتد. ما می توانیم یک view ، مربوط به movie player را به view اپ خود اضافه کنیم. برعکس ، اگر بخواهیم یک ویدئو تمام صفحه پخش کنیم ، باید از کلاس MPMoviePlayerViewController ، استفاده کنیم. کلاس MPMoviePlayerViewController ، برای ارائه یک کنترلر ساده view ، برای نمایش فیلم های تمام صفحه (full-screen) ، طراحی شده است.

در این آموزش ، ما بر روی MPMoviePlayerController ، تمرکز خواهیم کرد. اگر شما ، اصول انجام کار را درک کنید ، هیچ مشکلی در استفاده از کلاس MPMoviePlayerViewController ، نخواهید داشت.

بازبینی Demo اپ

همانند سایر آموزش ها ، در اینجا ، یک demo ساده از اپ را ارائه می دهیم ، تا بتوانیم ، شما را به داخل مفاهیم آموزشی امروز بکشانیم. Demo اپ ، بسیار ساده و بدون رابط کاربری تجملی می باشد. هنگامی که اپ باز می شود ، یک صفحه ، با یک کلید “Capture” ، نمایش داده می شود. با ضربه زدن بر روی این کلید ، اپ ، دوربین ویدئویی را برای ضبط ویدئو ، بالا می آورد. هنگامی که ضبط تمام می شود ، ویدئو به طور خودکار ، در صفحه اصلی نشان داده می شود. کاربران ، اجازه پخش ویدئو را به صورت inline خواهند داشت. اپ بسیار ساده ای است ، موافق هستید ؟

ایجاد پروژه Xcode

Xcode را باز کرده و یک پروژه جدید ایجاد می کنیم. تمپلت  Single View Application را انتخاب می کنیم. نام پروژه را VideoApp قرار داده و Class Prefix را به عنوان Video ، تنظیم می کنیم. روی کلید Next و Create ، کلیک کرده و پروژه را ذخیره می کنیم.

طراحی رابط کاربری

در ادامه ، رابط کاریری اپ را طراحی می کنیم. به Main.storyboard می رویم. یک کلید را اضافه کرده و آن را در پایین و وسط صفحه نمایش قرار می دهیم. عنوان آن را به “Capture” تغییر می دهیم. طراحی رابط کاربری ، باید شبیه تصویر زیر باشد:

کار بعدی که باید انجام دهیم ، ایجاد ارتباط بین کلید Capture و کد می باشد. برای انجام این کار ، به Assistant Editor ، سوئیچ می کنیم. یک متد action ، در فایل VideoViewController.h  ، برای کلید Capture ، ایجاد می کنیم. نام متد را “captureVideo” ، قرار می دهیم.

پیاده سازی VideoViewController

فایل VideoViewController.h را باز کرده و کد زیر را ، برای اضافه کردن فایل های header مورد نیاز ، اضافه می کنیم:

#import <MediaPlayer/MediaPlayer.h>
#import <MobileCoreServices/MobileCoreServices.h>

در آموزش جلسه قبل ، ما از کلاس UIImagePickerController ، برای گرفتن عکس استاتیک ، استفاده کردیم. همان کلاس ، قادر به ضبط ویدئو نیز هست. اگر فراموش کار نباشید ، باید هنوز نحوه استفاده از کلاس UIImagePickerController را به خاطر داشته باشید. در اینجا ، VideoViewController ، باید دو پروتکل UIImagePickerControllerDelegate و UINavigationControllerDelegate را اجرا نماید.

پیش از آن ، ما دو خصیصه (videoURL و videoController ) را در فایل VideoViewController.h ، اضافه خواهیم کرد. خصیصه videoURL ، آدرس URL ویدئو جاری را ذخیره می کند ، در حالی که ، خصیصه videoController ، برای پخش ویدئو اختصاص یافته است. اگر همه چیز را به درستی انجام دهیم ، فایل VideoViewController.h ما ، باید شبیه کد زیر باشد:

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>
#import <MobileCoreServices/MobileCoreServices.h>
 
@interface VideoViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate>
 
@property (strong, nonatomic) NSURL *videoURL;
@property (strong, nonatomic) MPMoviePlayerController *videoController;
 
- (IBAction)captureVideo:(id)sender;
 
@end

پیاده سازی Picker Controller برای ضبط ویدئو

هنگامی که کاربر به کلید “Capture” ضربه می زند ، متد captureVideo: ، فراخوانی می شود . این متد ، مسئول ایجاد ، پیکربندی و نمایش image picker ، برای ضبط ویدئو می باشد. متد را با استفاده از کد زیر ، پیاده سازی خواهیم کرد:

- (IBAction)captureVideo:(id)sender {
    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
        
        UIImagePickerController *picker = [[UIImagePickerController alloc] init];
        picker.delegate = self;
        picker.allowsEditing = YES;
        picker.sourceType = UIImagePickerControllerSourceTypeCamera;
        picker.mediaTypes = [[NSArray alloc] initWithObjects: (NSString *) kUTTypeMovie, nil];
        
        [self presentViewController:picker animated:YES completion:NULL];
    }
}

اگر آموزش جلسه قبل را خوانده باشید ، باید درک اولیه از UIImagePickerController داشته باشید. کد بالا ، نباید برای شما تازگی داشته باشد. این کد ، تقریباً مشابه کدی است که برای گرفتن عکس استفاده کرده ایم ، به غیر این که انواع رسانه های picker را برای kUTTypeMovie تنظیم می کنیم. بسته به نوع رسانه ها ، picker ، ساختار interface متفاوت برای عکس ها یا ویدئوها ، نمایش می دهد. به طور پیش فرض ، نوع رسانه به kUTTypeImage تنظیم شده است ، که photo camera interface را اختصاص می دهد. از آن جایی که ، ما برای راه اندازی video capture interface به picker نیاز داریم ، نوع رسانه را به kUTTypeMovie تنظیم می کنیم.

پیاده سازی پخش ویدئو

زمانی که کاربر ، ضبط ویدئو را به اتمام رساند و ویدئو را برای ذخیره سازی ، تأیید نمود ، اپ به طور خودکار ، ویدئو را در صفحه اصلی پخش خواهد کرد. به منظور پیاده سازی پخش ویدئو (video playback) ، چند کار کوچک داریم ، که باید انجام دهیم:

1. دریافت کردن URL سیستم از ویدئو ضبط شده.
2. حذف کردن UImagePickerController.
3. پخش ویدئو ، با استفاده از کلاس MPMoviePlayerController ، که یک کلاس داخلی برای پخش ویدئو از یک فایل (یا یک network stream) می باشد.

همان طور که می دانید ، متد didFinishPickingMediaWithInfo: ، هنگامی که کاربر ، استفاده از ویدئو را تأیید می نماید ، فراخوانی می شود. URL فایل ویدئو ، در پارامتر info جاسازی می شود. بنابراین ، در این متد ، اولاً ما URL ویدئو را می گیریم (توجه داشته باشید که این ویدئو در کتابخانه عکس ، ذخیره نشده است ، مگر این که ، به صراحت ، این کار را انجام دهیم). دوماً ، picker را مرخص می کنیم. در آخر ، کلاس MPMoviePlayerController را معرفی کرده و آن را با  URL ویدئو ، برای پخش پاس می دهیم. هم چنین ، اندازه view را تغییر می دهیم ، تا فضای آزاد برای کلید “Capture” داشته باشیم. و در آخر ، view را نمایش داده و ویدئو را پخش می کنیم.

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    
    self.videoURL = info[UIImagePickerControllerMediaURL];
    [picker dismissViewControllerAnimated:YES completion:NULL];
    
    self.videoController = [[MPMoviePlayerController alloc] init];
    
    [self.videoController setContentURL:self.videoURL];
    [self.videoController.view setFrame:CGRectMake (0, 0, 320, 460)];
    [self.view addSubview:self.videoController.view];
    
    [self.videoController play];
    
}

هنوز یک کار مانده ، که انجام نداده ایم. ما باید متد imagePickerControllerDidCancel: را پیاده سازی کنیم. ما به این متد در بخش قبل اشاره کرده ایم. وقتی که کاربر ضبط ویدئو را cancel می نماید ، این متد فراخوانی می شود. در این صورت ، به سادگی می توانیم Picker را مرخص نماییم.

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {
    
    [picker dismissViewControllerAnimated:YES completion:NULL];
    
}

کامپایل کردن و تست اپ

بسیار خوب! اکنون ، زمان کامپایل و تست اپ ما فرا رسیده است. همانند اپ دوربین ، که در جلسه قبل توسعه دادیم ، این اپ را نیز نمی توانیم با استفاده از شبیه ساز داخلی iPhone تست نماییم. باید از یک دستگاه واقعی برای تست استفاده کنیم ، زیرا شبیه ساز iPhone ، دوربین ندارد.

اگر اپ را بر روی iPhone کامپایل و اجرا نماییم ، باید بتوانیم video camera interface را پس از ضربه زدن بر روی کلید “Capture” ببینیم. هنگامی که ضبط ویدئو تمام شد ، به طور خودکار ، ویدئو ضبط شده در صفحه اصلی ، پخش می شود.

استفاده از Movie Player Notification

قابلیت جذابی که  MPMoviePlayerController  دارد ، این است که یک  مجموعه از notification ها (اعلان ها) را دارد ، که ما می توانیم برای کنترل پخش ویدئو ، از آنها استفاده کنیم. برای مثال ، هنگامی که پخش ویدئو تمام شد ، MPMoviePlayerPlaybackDidFinishNotification  ارسال می شود. کد زیر  را به متد didFinishPickingMediaWithInfo:  ، درست قبل از عبارت [self.videoController play] اضافه می کنیم.

[[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(videoPlayBackDidFinish:)
                                                 name:MPMoviePlayerPlaybackDidFinishNotification
                                               object:self.videoController];

ممکن است  NSNotificationCenter ، برای شما تازگی داشته باشد. آن را به عنوان هاب مرکزی از notification های داخل اپ تصور کنید. از طریق آن ، هر بخش از اپ می تواند به وسیله سایر بخش های اپ notify شود و یا notify ارسال کند. کد بالا ، به NSNotificationCenter می گوید که به MPMoviePlayerPlaybackDidFinishNotification گوش فرا دهد و متد videoPlayBackDidFinish: ، را بر طبق آن فراخوانی نماید.

در این مورد ، متد videoPlayBackDidFinish: ، ویدئو را متوقف می کند ، view آن را حذف کرده و یک پیام هشدار ، نمایش می دهد. البته ، ما notification را حذف خواهیم کرد. در غیر این صورت ، دو بار فراخوانی خواهد شد. کد زیر را در فایل VideoAppController.m ، اضافه می کنیم:

- (void)videoPlayBackDidFinish:(NSNotification *)notification {
    
    [[NSNotificationCenter defaultCenter]removeObserver:self name:MPMoviePlayerPlaybackDidFinishNotification object:nil];
    
    // Stop the video player and remove it from view
    [self.videoController stop];
    [self.videoController.view removeFromSuperview];
    self.videoController = nil;
    
    // Display a message
    UIAlertView *alert = [[UIAlertView alloc]
                                    initWithTitle:@"Video Playback" message:@"Just finished the video playback. The video is now removed." delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [alert show];
    
}

اکنون ، اپ را دوباره کامپایل و تست می نماییم. سعی می کنیم یک ویدئو را ضبط کنیم. اپ ، به طور خودکار ، ویدئو را پخش خواهد کرد. اما ، هنگامی که پخش ویدئو ، کامل می شود ، Player ، از view ، حذف می شود.

خلاصه

در حال حاضر ، شما باید ایده خوبی از پیاده سازی ضبط ویدئو و پخش آن را در iOS به دست آورده باشد. UIImagePickerController ، باعث می شود که قابلیت ضبط ویدئو در اپ ما ساده شود. با چند خط کد مختصر ، توانستیم دوربین عکس و ویدئو داخلی را در اپ بالا بیاوریم.  از سوی دیگر ، فریم ورک MediaPlayer ، امکانات مناسب را برای پخش ویدئو و فیلم ، فراهم می کند. استفاده از فریم ورک ، محدود به پخش ویدئو ، نمی باشد. این فریم ورک ، هم چنین به توسعه دهندگان اجازه می دهد که به کتابخانه iPod ، پخش موسیقی ، پادکست و فایل های صوتی کتاب ، دسترسی یابند. کار را در اینجا  موقف نکنید. مرجع رسمی اپل Apple’s official reference  را برای یادگیری و کسب اطلاعات بیشتر در مورد فریم ورک ، مطالعه کنید.