Posted on 5. February 2023

Відтворення аудіо та відео в додатках .NET MAUI за допомогою нового MediaElement

Відтворення аудіо та відео в додатках .NET MAUI за допомогою нового MediaElement

 

Вийшов один з найбільш очікуваних елементів управління для .NET MAUI – MediaElement. За допомогою MediaElement ви можете легко відтворювати аудіо та відео з вашого додатку .NET MAUI. В цій статті ви дізнаєтеся все, що вам потрібно знати про цю першу версію і про плани на майбутнє! Media Element є частиною .NET MAUI Community Toolkit, бібліотеки, створеної спільнотою, яка підтримується чудовими розробниками з усього світу, як з боку спільноти, так і з боку корпорації Майкрософт.

 

Що таке MediaElement?

З MediaElement ви отримуєте потужний елемент керування, який дозволяє відтворювати мультимедійні дані у вашому додатку .NET MAUI.


Можливо, ви вже знайомі з MediaElement з інструментарію спільноти Xamarin, куди його додали завдяки чудовій роботі учасника спільноти Пітера Фута. Хоча та версія була вже досить непоганою, вона також мала місце для вдосконалення, особливо на Android.


Саме тому, при перенесенні MediaElement на .NET MAUI, ми перебудували все з нуля. Таким чином, ми змогли зберегти всі ті частини, які вже є хорошими, і в той же час покращити ті речі, які потребують доопрацювання.

 

Під капотом

Для Android ми вирішили використовувати ExoPlayer як аналог платформи, замінивши Android MediaPlayer, який ми використовували для Xamarin. Таким чином, ми автоматично отримуємо багато додаткових функцій, які доступні нам з коробки, наприклад, відтворення HTTP-відео в прямому ефірі (HLS), чудові елементи керування транспортуванням платформи та багато іншого.


На iOS та macOS ми використовуємо платформу AVPlayer, як і для MediaElement в Xamarin. Також без змін залишився Tizen-плеєр, який використовує Tizen.Multimedia.Player.


Тепер, коли .NET MAUI будується на основі WinUI, а не UWP, ми використовуємо новий елемент MediaPlayerElement WinUI. Хоча цей елемент керування також є дуже молодим для WinUI, він вже є дуже повним і виглядає багатообіцяючим.

Підтримка різних медіаформатів відрізняється на різних платформах (і, можливо, залежно від того, які кодеки ви встановили), але, використовуючи нативні медіаплеєри платформи, для кожної операційної системи ми використовуємо всю потужність і пов’язану з цим оптимізовану продуктивність.

 

Початок роботи

Почати роботу з MediaElement дуже просто. По-перше, вам потрібно встановити пакет CommunityToolkit.Maui.MediaElement NuGet. Це окремий пакунок від основного пакунка Community Toolkit.


Після завершення встановлення перейдіть до вашого MauiProgram.cs і додайте наступний рядок ініціалізації до MauiAppBuilder:


public static MauiApp CreateMauiApp()

{

    var builder = MauiApp.CreateBuilder();

    builder

        .UseMauiApp<App>()

        // Initialize the .NET MAUI Community Toolkit MediaElement by adding the below line of code

        .UseMauiCommunityToolkitMediaElement()

        // After initializing the .NET MAUI Community Toolkit, optionally add additional fonts, and other things

        .ConfigureFonts(fonts =>

        {

            fonts.AddFont(“OpenSans-Regular.ttf”, “OpenSansRegular”);

            fonts.AddFont(“OpenSans-Semibold.ttf”, “OpenSansSemibold”);

        });


    // Continue initializing your .NET MAUI App here


    return builder.Build();

 

}


Тепер ви готові почати використовувати MediaElement у своєму додатку! Простий приклад у XAML можна знайти нижче.

 

xmlns=“http://schemas.microsoft.com/dotnet/2021/maui”

             xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml”

             xmlns:toolkit=“http://schemas.microsoft.com/dotnet/2022/maui/toolkit”

             x:Class=“MediaElementDemos.GettingStarted”

             Title=“MediaElement Getting Started”>


     x:Name=“mediaElement”

                      ShouldAutoPlay=“True”

                      ShouldShowPlaybackControls=“True”

                      Source=“https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4”

                      HeightRequest=“300”

                      WidthRequest=“400”

                      … />

 

Це додасть елемент управління MediaElement на сторінку, яка почне автоматично відтворюватися при завантаженні відео, результат запуску на iOS і Windows можна побачити нижче.



У цій статті автор не вдається в подробиці про багаті функції, які вже є в цій першій версії, але важливо зазначити одну річ. Ви, як розробник, несете відповідальність за використання ресурсів MediaElement. Наприклад, додаток може відтворювати відео в режимі “картинка в картинці” або відтворювати аудіо у фоновому режимі, і в цих сценаріях неможливо автоматично визначити, коли потрібно очистити ресурси MediaElement.

Для цього потрібен лише один рядок коду. У фрагменті коду нижче ви можете побачити, як звільняються ресурси, коли користувач переходить зі сторінки ContentPage, на якій відображається елемент управління MediaElement.


public partial class FreeResourcesPage : ContentPage

{

    void ContentPage_Unloaded(object? sender, EventArgs e)

    {

        // Stop and cleanup MediaElement when we navigate away

        mediaElement.Handler?.DisconnectHandler();

    }


}

 

Щоб дізнатися більше про всі поточні функції MediaElement, відвідайте сторінку документації.

 

Source




Posted on 18. May 2017

Announcing Project Rome iOS SDK

Project Rome – это платформа для обеспечения беспрепятственного межсетевого и кросс-платформенного использования.  Цель Project Rome очень проста - работа пользователя с приложением не должна быть привязана к одному устройству больше, чем данные, которые должны привязываться к одному устройству. Ваши приложения, также как и ваши данные, должны перемещаться вместе с вами.

Раньше это означало переход между устройствами при сохранении одного пользовательского интерфейса на другом устройстве Windows. Несколько месяцев назад функции Project Rome были расширены на платформу Android, что позволяет вам начать сеанс пользования приложением на телефоне Android и продолжить его на ПК с операционной системой Windows, на Xbox One или даже в Surface Hub.

На сегодняшний день, поддержка Project Rome также доступна для платформы iOS. Здесь вы можете скачать Project Rome SDK для iOS.


Рассмотрение музыкального приложения Contoso

Пример Contoso Music хорошо показывает сценарии работы пользователя с приложением на разных устройствах.

Это приложение для потоковой передачи музыки UWP, которое работает на нескольких устройствах Windows, привязанных к одной и той же учетной записи Microsoft (MSA). Используя Project Rome, приложение работает таким образом, чтобы пользователь, передающий песню на ПК с ОС Windows, мог передать эту песню на свой Xbox. После этого, он всегда может переместить текущий плейлист на свой Windows Phone перед тем, как выйти на пробежку.

Расширение для iOS

Представим себе, что, основываясь на успехе версий Windows и Android, разработчик создает iOS-версию Contoso Music. Изучая его телеметрию через несколько месяцев, видим, что все приложения успешны также, как и его версии для Windows и Android. Однако в отзывах пользователей есть общая тема: Пользователи затрудняются с переключением между устройствами. Итак, планируем добавить такую возможность, чтобы пользователь могу слушать музыку на iPhone через наушники, а затем войти в гостиную и незамедлительно переключиться на воспроизведение той же музыкальной композиции через свой Xbox, подключенный к качественным динамикам.

С Project Rome iOS SDK мы можем создать мост между устройствами iOS и устройствами Windows в два этапа:

 

  • RemoteSystems API позволяет приложению обнаруживать устройства Windows, которыми владеет пользователь. RemoteSystems API позволит приложению Contoso Music обнаруживать эти устройства в той же сети или через облако.
  • После обнаружения устройств, RemoteLauncher API  запустит приложение Contoso Music на другом устройстве Windows.

 

Как это работает?

Чтобы переключиться с воспроизведения музыки с устройства iOS на устройство Windows, приложение должно распознать другое устройство. Для этого требуется использование MSA OAuth, чтобы получить разрешение на запрос для устройств, а затем обнаруживать дополнительные устройства, как показано на диаграмме ниже.


 

 

 

// Asynchronously initialize the Rome Platform.
  // Pass in self as class implements the CDOAuthCodeProviderDelegate protocol.
  [CDPlatform startWithOAuthCodeProviderDelegate:self completion:^(NSError* clientError) {
                                              if (clientError)
                                              {
                                                  // Handle error
                                                  return;
                                              }
 
                                              // Handle success, show discovery screen
                                      }];
 
// Implementation of CDOAuthCodeProviderDelegate
// The Rome SDK calls this delegate method when it needs an OAuth Access Code from the application.
- (NSError*)getAccessCode:(NSString*)signinUrl completion: (void (^)(NSError* error, NSString* accessCode))completion {
 
// Stash away the callback the SDK gives us
_getTokenCallback = completion;
 
  // Show the interactive OAuth Web View flow.
  // Once the OAuth flow completes or fails, invoke this callback.
  ...
 
// Return nil as there was no error
  return nil;
}

 

 

После инициализации, приложение может распознавать все устройства на графике устройства пользователя MSA, инициировав распознание с помощью CDRemoteSystemDiscoveryManager. Информация об обнаруженных устройствах создается через протокол CDRemoteSystemDiscoveryManagerDelegate. В примере Microsoft каждое обнаруженное устройство сохраняется в свойстве NSMutableArray.

 

// Create instance and pass ‘self’ as the delegate as it implements CDRemoteSystemDiscoveryManagerDelegate.
CDRemoteSystemDiscoveryManager* remoteSystemDiscoveryManager = [[CDRemoteSystemDiscoveryManager alloc] initWithDelegate:self];
 
// Start discovery.
[remoteSystemDiscoveryManager startDiscovery];
 
// CDRemoteSystemDiscoveryManagerDelegate implementation
- (void)remoteSystemDiscoveryManager:
            (CDRemoteSystemDiscoveryManager*)discoveryManager
                             didFind:(CDRemoteSystem*)remoteSystem {
  @synchronized(self) {
     [self.discoveredSystems addObject:remoteSystem];
      // Refresh UI based upon updated state in discoveredSystems e.g. populate table
   }
}
 
- (void)remoteSystemDiscoveryManager:
            (CDRemoteSystemDiscoveryManager*)discoveryManager
                           didUpdate:(CDRemoteSystem*)remoteSystem {
  NSString* id = remoteSystem.id;
 
// Loop through and update the Remote System instance if previously seen.
  @synchronized(self) {
    for (unsigned i = 0; i < self.discoveredSystems.count; i++) {
      CDRemoteSystem* currentRemoteSystem =
          [self.discoveredSystems objectAtIndex:i];
      NSString* currentId = currentRemoteSystem.id;
 
      if ([currentId isEqualToString:id]) {
        [self.discoveredSystems replaceObjectAtIndex:i withObject:remoteSystem];
        break;
      }
    }
 
       // Refresh UI based upon updated state in discoveredSystems e.g. populate table
  }
}

 

 

Теперь пользователь может выбрать устройство, на которое он хочет перенести проигрывание музыки, из списка обнаруженных устройств. Из выбранной CDRemoteSystem образец создания CDRemoteSystemConnectionRequest показан на диаграмме последовательности ниже. Используя CDRemoteLauncher, можно удаленно запускать приложение на выбранном устройстве, а также добавлять необходимую дополнительную контекстуальную информацию, такую как воспроизводимая в данный момент песня.

 

 

Здесь вы можете ознакомиться с тем, как дистанционно запустить http://www.bing.com  на вашем устройстве:

 

// Create a connection request using the CDRemoteSystem instance selected by the user
  CDRemoteSystemConnectionRequest* request =
       // Using the RemoteSystem above, [self.discoveredSystems addObject:remoteSystem];
      [[CDRemoteSystemConnectionRequest alloc] initWithRemoteSystem:system];
 
NSString* url = @”http://www.bing.com”;
 
  [CDRemoteLauncher
           launchUri:uri
           withRequest:request
           withCompletion:^(CDRemoteLauncherUriStatus status) {
            // Update UI on launch status
            }];

 

 

Как видите достаточно легко расширить поддержку кросс-устройств для iOS в своем приложении.

В Завершении

Project Rome разрушает барьеры, изменяя представления о том, что такое «приложение», и фокусируясь на пользователе независимо от того, где он находится или какое устроство использует. Теперь приложение не обязательно должно означать что-то, что привязано к одному устройству, вместо этого оно может быть чем-то, что существует между вашими устройствами и оптимизировано для нужного устройства в нужное время.

Чтобы узнать больше о Project Rome, ознакомьтесь с предоставленными ниже ссылками.