Эта статья является 22-м днем в серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .
День 22. Мы обошли все вокруг Windows 8, но сегодня мы поговорим о функции, которой, похоже, не хватает прессы; Играть. Вчера я сказал, что сегодня мы поговорим о том, как отправить фотографии и видео на другую машину, и это именно то, что мы собираемся сделать; с Play To.
Давайте настроим это немного. Я необычный клиент. У меня много компьютеров, смартфонов, телевизоров, подключенных к Интернету, XBOX и так далее. Я даже был в долгом процессе домашней автоматизации. В основном, если ему нужно электричество, я, вероятно, хочу его. Но я также семейный человек, который делает много фотографий, видео и еще много чего. Когда у вас есть все эти замечательные технологии, почему бы не использовать их в полной мере?
И тогда есть программное обеспечение. Я люблю программное обеспечение. Мне нравится тот факт, что мы можем сделать что-то, что удовлетворяет потребности нас делать что-то еще. Мне нравится, что я могу просто сесть и создать что-то простое, например, On Time, и, надеюсь, немного облегчить жизнь докладчикам.
Место, которое мне всегда нравилось, — это интеграция между ними. Если вы когда-нибудь пытались окунуть носок в пространство домашней автоматизации, тогда вы точно знаете, откуда я. Это похоже на то, как кто-то бросил электронные компоненты в комнате и оставил вам отвертку с плоской головкой, чтобы попытаться заставить их всех работать вместе.
Теперь Play To не спаситель, но это отличное начало. Это объединяет очень важный пробел, который мы имеем сегодня, обмен СМИ. Под медиа я имею в виду изображения, аудио и видео. Медиа сегодня — это беспорядок, от производителей, до провайдеров, просто моя собственная организация моей музыки и картинок. Я могу сказать, что мы не собираемся исправлять это здесь, но, возможно, мы сможем отправить этот беспорядок на ваши различные устройства и приложения.
Это первая статья, в которой нам понадобится несколько устройств для эффективного тестирования. Сегодня я собираюсь использовать две разные машины: одну, на которой я занимаюсь разработкой, и планшет Samsung Build. Это не значит, что нет никакого оборудования, которое вы могли бы использовать для тестирования. У Microsoft есть отличный маленький сайт, на котором будут перечислены различные совместимые устройства .
Прежде чем мы перейдем к кодированию, я хочу убедиться, что у вас есть способ проверить эту функциональность. В Windows 8 откройте приложение Windows Media Player. (Вы знаете, приложение, которое вы не открывали на Windows-машине 10 лет?
Выберите «Разрешить дистанционное управление моим проигрывателем…». Вам будет предложено подтвердить свой выбор, просто чтобы убедиться, что это именно то, что вы хотите сделать.
Как только вы подтвердите этот выбор, ваша машина будет зарегистрирована в сети как устройство, доступное для воспроизведения контента. Хорошо, давайте перейдем к кодированию, чтобы мы могли видеть, что это на самом деле означает.
Отправить
Самый простой способ думать о Play To — это просто другое устройство. Если вы вспомните, как мы взаимодействовали с принтерами в Devices Charm , то это скорее то же самое. Первое, что нам нужно сделать, это создать Play To Manager.
var _playToMgr = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
Как только мы это получим, нам нужно зарегистрироваться для события, запрашиваемого источником . Это волшебный соус, который регистрирует ваше приложение в Windows и говорит, что у нас есть контент, который мы можем отправить вместе.
_playToMgr.addEventListener("sourcerequested", sourceRequestHandler, false);
Когда наше событие зарегистрировано, нам просто нужно реализовать этот обработчик. Это сработает, когда пользователь активирует брелок устройства. Когда начинается наше событие, мы должны сообщить ему, какой элемент мы хотим отправить.
function sourceRequestHandler(e) {
if (e)
e.sourceRequest.setSource(_audioElement.msPlayToSource);
}
Как ни странно, это все. Вот большая часть файла JS, который я написал для демонстрации отправки. Явный счастливый путь, безошибочные сценарии.
var _audioElement,
_playToMgr = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
function sourceRequestHandler(e) {
if (e)
e.sourceRequest.setSource(_audioElement.msPlayToSource);
}
function getDomElements() {
_audioElement = document.querySelector("#audioTag");
}
function wireEventHandlers() {
_playToMgr.addEventListener("sourcerequested", sourceRequestHandler, false);
}
app.onloaded = function () {
getDomElements();
wireEventHandlers();
}
Давай поиграем
Мой UX прост, это один аудиоэлемент, подключенный к моему подкасту Developer Smackdown .
Когда я выберу Charm Devices, вы увидите мой планшет, показанный ниже.
После выбора этого. мой планшет начнет воспроизводить аудио.
И, если это не достаточно трогательно. Нажмите паузу на устройстве Played To. Вы увидите изменение паузы на исходном компьютере. Таким образом, у вас есть полный контроль над верностью между двумя устройствами.
— играть на чаевые —
Если вы переключаете сети, скажем, вы идете в McDonalds, чтобы поработать какое-то время, может быть, даже написать статью. Вы должны пройти ту краткую настройку, которую мы выполнили в начале этой статьи (по крайней мере, для Windows Media Player).
Получение контента
Хорошо, теперь для обратного. Честно говоря, я не знаю, что является более захватывающим, тот факт, что вы можете отправлять вещи или получать вещи. Поверьте, идеи приложений постоянно меняются.
Получение контента по большей части так же просто. Мы можем разбить шаги на 5 разных частей:
- создать приемник
- установить некоторые свойства на приемнике
- подключить обработчики событий для получателя
- подключите обработчики событий для элемента (в нашем случае аудио контроль)
- Начало
Для создания приемника нам просто нужен экземпляр PlayToReceiver .
var _receiver = new Windows.Media.PlayTo.PlayToReceiver();
Далее у нас есть некоторые свойства, которые мы можем установить. Я думаю, что свойства говорят сами за себя.
_receiver.friendlyName = "31 Days Play To Receiver"; _receiver.supportsAudio = true; _receiver.supportsVideo = false; _receiver.supportsImage = false;
С установленными свойствами следующий шаг является наиболее утомительным, создавая все обработчики событий. Эти обработчики событий — это то, что отображает события с обеих сторон, и ваш код — это просто проход. Например. Если пользователь нажимает кнопку «Пауза» на целевом устройстве, необходимо отобразить паузу из этого элемента обратно в приемник, чтобы вы могли фактически приостановить свой элемент. То же самое верно и с другой стороны. Пауза в источнике, мы нажимаем паузу в пункте назначения и так далее.
_receiver.addEventListener("sourcechangerequested", receiver_SourceChangeRequested);
_receiver.addEventListener("pauserequested", receiver_PauseRequested);
_receiver.addEventListener("currenttimechangerequested", _receiver_CurrentTimeChangeRequested);
_receiver.addEventListener("mutechangerequested", receiver_MuteChangeRequested);
_receiver.addEventListener("playbackratechangerequested", _receiver_PlaybackRateChangeRequested);
_receiver.addEventListener("playrequested", receiver_PlayRequested);
_receiver.addEventListener("stoprequested", receiver_StopRequested);
_receiver.addEventListener("timeupdaterequested", receiver_TimeUpdateRequested);
_receiver.addEventListener("volumechangerequested", receiver_VolumeChangeRequested);
_audioReceive.addEventListener("durationchange", audioPlayer_DurationChange);
_audioReceive.addEventListener("ended", audioPlayer_Ended);
_audioReceive.addEventListener("error", audioPlayer_Error);
_audioReceive.addEventListener("loadedmetadata", audioPlayer_LoadedMetadata);
_audioReceive.addEventListener("pause", audioPlayer_Pause);
_audioReceive.addEventListener("playing", audioPlayer_Playing);
_audioReceive.addEventListener("ratechange", audioPlayer_RateChange);
_audioReceive.addEventListener("seeked", audioPlayer_Seeked);
_audioReceive.addEventListener("seeking", audioPlayer_Seeking);
_audioReceive.addEventListener("volumechange", audioPlayer_VolumeChange);
Я избавлю вас от деталей функций, просто посмотрите на пример кода . Это просто код сопоставления, строка или две каждая. Теперь нам просто нужно запустить приемник, чтобы мы могли транслировать по сети.
_receiver.startAsync().done(function () {
// good place to think about locking the display on.
});
И вот так вы теперь получаете потоковую передачу между устройствами в вашей сети. Серьезно классные вещи, с которыми я бы посоветовал вам поиграть.
Резюме
Я действительно взволнован тем потенциалом, который имеет Play To. Это открывает уникальный сценарий для медиа между устройствами и приложениями. Теперь то, что мы делаем с этим, это другая история. Я мог бы продолжать, но почему? Вы должны просто начать играть с этим.
Если вы хотите загрузить пример кода, который обсуждался в этой статье, щелкните значок ниже:
Завтра уйдет больше устройств.
