So erstellen Sie einen Videokanal für die Amazon Alexa Show ohne YouTube

Bild mit freundlicher Genehmigung von AlexAntropov auf Pixabay

Ich bin ein Softwareentwickler, der mehr als zwanzig benutzerdefinierte Fähigkeiten auf der Alexa-Plattform veröffentlicht hat. Ich wurde als Alexa Champion anerkannt und habe mit dieser Technologie mehrere Hackathons gewonnen. Im Folgenden wird erläutert, wie ich mithilfe der nativen Amazon-Technologie eine benutzerdefinierte Videofunktion für die Echo-Show erstellt habe.

Die Geschichte des Videokonsums

Videoübertragung ist seit mehr als 60 Jahren ein erfolgreiches Medium. Fernsehgeräte beherrschten jahrzehntelang die Unterhaltungsindustrie und sendeten Signale direkt in Wohnzimmer. 1990 hatte Kabelfernsehen 57% der US-Haushalte erreicht. Dies vergrößerte schnell die Vielfalt der von den Zuschauern konsumierten Inhalte.

Das Live-Streaming begann offiziell im Jahr 1995, aber erst 2007 begann das internetbasierte Streaming, das Standard-HTTP-Protokoll zu verwenden. Smartphones wie das iPhone wurden bald nach Verwendung ähnlicher Kommunikationsmethoden hinzugefügt. Mit der Einführung von Mobilgeräten gewinnen kleinere Bildschirme immer mehr Zeit. YouTube war in dieser Phase ein großer Erfolg und spielt jetzt täglich 5 Milliarden Videos ab.

Im Jahr 2015 brachte Amazon das erste Gerät auf den Markt, das ausschließlich von der Stimme eines Benutzers gesteuert wird. Sprachplattformen wie Alexa fügten dem Heim schnell ein weiteres Gerät hinzu. Schätzungsweise 35 Millionen werden bereits in den USA verwendet. 2017 hat Amazon offiziell seine erste Version von Alexa mit einem Bildschirm namens Echo Show veröffentlicht. Die neuen Amazon Fire TV-Geräte verfügen außerdem über eine integrierte Alexa-Funktion, mit der Sie das Streamen von Videos auf einen Flachbildschirm über Ihre Stimme steuern können.

Die Echo Show bot ursprünglich die Möglichkeit, Videos von YouTube abzuspielen. In letzter Zeit haben Google und Amazon jedoch um die Verfügbarkeit gekämpft. Dies wirkte sich auf die Popularität des Produkts aus, da das Abspielen von Videos eine große Rolle spielte.

Auf der CES 2018 gaben mehrere Unternehmen der Unterhaltungselektronik bekannt, dass sie ein Google Home-kompatibles Gerät mit einem Bildschirm auf den Markt bringen. Dies macht den Sprachmarkt noch wettbewerbsfähiger. Eine Lösung für die YouTube-Kompatibilitätsherausforderung besteht darin, Videoinhalte direkt bei Amazon zu hosten. Im Folgenden wird beschrieben, wie Sie einen benutzerdefinierten Skill für die Echo-Show erstellen, der genau das erledigt.

So erstellen Sie eine benutzerdefinierte Videofähigkeit auf Alexa

Mit Alexa und einer Handvoll AWS-Services ist es erstaunlich einfach, einen eigenen Videokanal zu erstellen. Hier ist die Architektur mit einer benutzerdefinierten Alexa-Fähigkeit, die Inhalte für die Wiedergabe in einer Echo-Show zusammenstellt. Der AWS-Speicherdienst (S3) speichert die Medien und überträgt sie auf der Grundlage von Anweisungen, die von der benutzerdefinierten Fähigkeit erteilt wurden, an das Gerät.

Architektur auf Komponentenebene für benutzerdefinierte Videofähigkeiten

Das Produzieren von Inhalten hierfür ist vergleichbar mit dem für einen YouTube-Kanal erforderlichen. Die aktuelle Version der Echo Show (sowie der Echo Spot) enthalten Angaben zum Medientyp, die befolgt werden müssen. Zum Beispiel sollte das Video eine mp4-Erweiterung und ein Standard-H.264-Komprimierungsformat verwenden. Die Auflösung der Videoqualität sollte 1280x720 Pixel nicht überschreiten. Diese Einschränkungen sorgen für einen hochwertigen Videostream auf dem 7-Zoll-Display der Show, der mit dem eines HD-Videoplayers vergleichbar ist.

Erstellen der benutzerdefinierten Videofähigkeit

Um einen Videokanal zu erstellen, müssen Sie einen benutzerdefinierten Skill für Alexa erstellen und im öffentlichen Skill Store veröffentlichen. Es sind eine Reihe von Funktionen erforderlich, um im Kanal zu navigieren und die Videos abzuspielen. In diesem Abschnitt werden diese Schritte ausführlich beschrieben. Probieren Sie für ein funktionierendes Beispiel die Fertigkeit Klavierlehrer aus, die sich bereits im Alexa Store befindet. Es handelt sich um eine Fertigkeit, die kurze Videos mit Anfängerlektionen zum Klavierspielen sowie Videoanweisungen zum Spielen einfacher Songs enthält. Hier ist das Repo, das den gesamten benötigten Quellcode sowie detaillierte Anweisungen zum Konfigurieren und Bereitstellen enthält.

Es sind drei Funktionen erforderlich, um einen Videokanal zu erstellen.

1 - Rendere ein Hintergrundbild, wenn der Skill zum ersten Mal gestartet wird. Dadurch wird die Marke des Senders festgelegt.
2 - Navigationssteuerelemente zum Durchsuchen und Auswählen des abzuspielenden Videos erstellen. Dies schließt die Handhabung von Berührungsgesten auf dem Echoshow-Bildschirm ein.
3 - Delegieren Sie die Steuerung an das Gerät, um ein Video abzuspielen, sobald der Inhalt ausgewählt wurde.

1 - Marke mit Hintergrundbild

Alexa stellt eine Reihe von Vorlagen zur Verfügung, um das Erstellen benutzerdefinierter Videofunktionen zu erleichtern. Ich verwende die Vorlage "BodyTemplate1", um das Hintergrundbild zu rendern, wenn die Fähigkeit zum ersten Mal aufgerufen wird. Aktivieren Sie beim Generieren der Metadaten in der Alexa Developer Console das zweite und dritte Kontrollkästchen auf dem Bildschirm für globale Felder (Video App & Render Template).

Durch das Festlegen dieser Attribute werden zusätzliche APIs innerhalb des benutzerdefinierten Skills aktiviert. Für die Verwendung der APIs sind zusätzliche Standardintents erforderlich. Diese werden beim Erstellen des Intent-Modells im Skills-Kit erstellt. Sie sind wie folgt:

  • AMAZON.NavigateSettingsIntent
  • AMAZON.NextIntent
  • AMAZON.PageDownIntent
  • AMAZON.PageUpIntent
  • AMAZON.PreviousIntent
  • AMAZON.ScrollDownIntent
  • AMAZON.ScrollLeftIntent
  • AMAZON.ScrollRightIntent
  • AMAZON.ScrollUpIntent

Für diese Ereignisse ist keine Kodierung in der Lambda-Funktion erforderlich, da das Gerät diese von Haus aus verarbeitet. Sie müssen nur in Ihr benutzerdefiniertes Skills-Intent-Modell aufgenommen werden.

Für das Rendern eines Hintergrundbilds sind zwei Dienstprogrammmethoden erforderlich, die bereits im Standard-Alexa-SDK enthalten sind. Die Fertigkeit erstellt zwei Kennungen, um zu veranschaulichen, wie sie verwendet werden.

// Dienstprogrammmethoden zum Erstellen von Image- und TextField-Objekten
const makePlainText = Alexa.utils.TextUtils.makePlainText;
const makeImage = Alexa.utils.ImageUtils.makeImage;

Als Nächstes füge ich eine Kennung für den Speicherort Ihrer JPG- / PNG-Datei hinzu, die als Hintergrundbild dient. Dieses Objekt muss öffentlich verfügbar sein. Die Pixelgröße beträgt 1024 x 600, basierend auf den Abmessungen der Echoshow. Sie müssen kein separates Bild für den kleineren Echo-Spot bereitstellen. Alexa erstellt das kleinere Bild basierend auf der Originalgröße der Show.

// Dies ist ein öffentlicher Endpunkt - der einfachste Weg ist das Hosten in S3
// Es muss SSL aktiviert sein (was S3 für Sie tut)
const backgroundImage = "https://s3.amazonaws.com/.../image.jpg";

Fügen Sie als Nächstes den folgenden Code hinzu, um das Hintergrundbild zusammen mit anderen Audio-Nachrichten zu rendern, wenn der Skill gestartet wird.

"LaunchRequest": function () {
  const builder = new Alexa.templateBuilders.BodyTemplate1Builder ();
  const template = builder.setTitle (‘Your Personal Instructor’)
      .setBackgroundImage (makeImage (backgroundImage))
      .setTextContent (makePlainText (‘Piano Teacher’))
      .bauen();
  // Überprüfen Sie, ob das Gerät einen Videobildschirm hat
  if (this.event.context.System.device.supportedInterfaces.Display) {
    this.response.speak (welcomeMessage)
        .listen (repeatWelcomeMessage) .renderTemplate (template);
    this.emit (‘: responseReady’);
  } else {
    // Fehler behandeln, dass kein Videobildschirm abgespielt werden kann
    this.emit (‘: tell’, nonVideoMessage);
  }
},

2 - Inhaltsnavigation

Die Navigation für den Inhalt nutzt die Flexibilität der Alexa-Plattform. Der Betrachter kann entweder mit der Stimme oder mit den Fingern durch den Inhaltskatalog navigieren und genau das auswählen, was er anzeigen möchte. Dies erfordert die Verwendung der Listenvorlage im Alexa SDK sowie die Behandlung von Ereignissen, die vom Benutzer ausgelöst werden, der den Bildschirm berührt.

Hier sind die verschiedenen Optionen, die der Benutzer entweder mit seiner Stimme oder durch Berühren des Bildschirms anfordern kann.

Das Rendern einer Liste der verfügbaren Inhalte ist für die Benutzererfahrung von zentraler Bedeutung. Ich verwende "ListTemplate1" aus dem Alexa SDK, um die Liste der Videos zu rendern. Das Scrollen nach oben und unten kann über Sprache oder Berührung erfolgen und wird vom Gerät ohne Codierung ausgeführt.

Das Antwortobjekt, das zum Auflisten des Inhalts gesendet wird, enthält ein Array, in dem aufgeführt ist, was auf dem Kanal verfügbar ist. Nach meinem Kenntnisstand wird diese Liste von der Alexa-Stimme gelesen und visuell auf dem Bildschirm dargestellt. Hier ist ein Beispiel dafür, wie es aussieht.

Screenshot von Piano Teacher Skill in einer Alexa Show

Innerhalb des Codes wird der Inhalt in ein Array-Objekt (songs.json) ausgelagert, das eine Liste von Videos sowie Metadaten zum Speicherort jeder Mediendatei enthält. Jedem Element in der Liste ist ein eindeutiges Token zugewiesen. Hier ist ein Beispiel für das Layout, das in Standard-JavaScript-Objektnotation geschrieben ist:

[
  {"RequestName": "Stille Nacht",
    "ListSong": wahr,
    "Token": "song001",
    "Schwierigkeit": "Mittel",
    "VideoObject": "SilentNight.mp4",
    "AudioObject": "SilentNight.mp3"
  },
  {"RequestName": "Mary hatte ein kleines Lamm",
    "ListSong": wahr,
    "Token": "song002",
    "Schwierigkeit": "Einfach",
    "VideoObject": "MaryHadLittleLamb.mp4",
    "AudioObject": "MaryHadLittleLamb.mp3"
  },
...
]

Hier ist der Code, der das Array in die von Alexa benötigte Antwort konvertiert. Enthalten ist das Einbetten des Tokens für jedes Element im Array.

// Dies sind die Songs, für die Aufnahmen gemacht wurden
var songs = require ("data / songs.json");
// Erstelle Liste
const itemImage = null;
const listItemBuilder = new Alexa.templateBuilders.ListItemBuilder ();
const listTemplateBuilder = new Alexa.templateBuilders.ListTemplate1Builder ();
// Ein Array aller verfügbaren Songs erstellen
für (i = 0; i 
// Jetzt das Antwortobjekt mit dem SDK erstellen
const listItems = listItemBuilder.build ();
const imageLoc = pianoStrings;
const listTemplate = listTemplateBuilder.setToken ("listToken")
  .setTitle (‘Available Song List’) .setListItems (listItems)
  .setBackgroundImage (makeImage (imageLoc))
  .bauen(); this.response.speak (message) .listen (noSongRepeatMessage) .renderTemplate (listTemplate);
this.emit (‘: responseReady’);

Die Lambda-Funktion verarbeitet das von der Echo-Show aufgerufene Ereignis "ElementSelected". Das vom Gerät an den benutzerdefinierten Skill gesendete Anforderungsobjekt enthält das Token, das zum Übersetzen der vom Benutzer ausgewählten Elemente verwendet wird.

// Diese Funktion wird vom 'ElementSelected'-Ereignis aufgerufen
'ScreenSongSelected': function () {
  console.log ("Ausgewähltes Element" + this.event.request.token);
  var videoName = “”;
  // Token dem Songtitel zuordnen und das abzuspielende Videoobjekt suchen
  für (i = 0; i 

Die Lambda-Funktion verwendet das empfangene Token und findet die Mediendatei, die der eindeutigen Kennung entspricht. Die Steuerung wird dann mit dem entsprechenden Video auf das Gerät übertragen.

3 - Delegieren Sie die Steuerung an den Video-Player

Sobald das wiederzugebende Video gefunden wurde, wird der Endpunkt des Mediums zur Antwort hinzugefügt. Dies erfordert einige Codezeilen innerhalb der Lambda-Funktion.

Identifizieren Sie zunächst einen Ordner im S3-Bucket, in dem die Videodateien gespeichert werden.

// Dies sind die Ordner, in denen sich die mp4-Dateien befinden
const videoLoc = "https://s3.amazonaws.com/…/media/";

Geben Sie dann die genaue Datei an, die auf den Angaben des Benutzers basiert. Es werden Metadaten hinzugefügt, die weitere Informationen zum Video enthalten.

if (this.event.context.System.device.supportedInterfaces.VideoApp) {
  const videoClip = videoLoc + videoObject; // Endpunkt der Datei
  // Dies wird gerendert, wenn der Benutzer Video-Steuerelemente auswählt
  const metadata = {
    ‘Title’: slots.SongName.value
  };
  this.response.playVideo (videoClip, Metadaten);
  this.emit (': responseReady');
} else {
  // Fehler behandeln - und die Sitzung schließen
  this.emit (‘: tell’, nonVideoMessage);
}

Nachdem dieser Code ausgeführt wurde, übernimmt das Alexa-Gerät die Navigation für die Wiedergabe des Videos. Der Benutzer kann entweder seine Stimme verwenden oder den Bildschirm zum Anhalten, Zurückspulen, Vorspulen usw. berühren. So sieht der Bildschirm beim Abspielen eines Videos aus, einschließlich des Metadatentitels oben.

Screenshot von Piano Teacher Skill in einer Alexa Show

Wenn das auf dem Gerät abgespielte Video vollständig ist, kann die Fähigkeit erneut verwendet werden, um weitere Inhalte auszuwählen.

Zusammenfassung

Der Aufbau der benutzerdefinierten Fertigkeit kann anhand des obigen Beispiels als Vorlage in nur wenigen Stunden erfolgen. Der Alexa-Zertifizierungsprozess dauert nur ein oder zwei Tage, dann steht die Fähigkeit (und der Inhalt darin) jedem zur Verfügung, der eine Echo-Show hat. Als YouTube-Fan hoffe ich, dass ich es bald auf meinem Alexa-Gerät verwenden kann, aber es gibt auch eine Möglichkeit für Content-Publisher, dies zu umgehen.