Tag Archives: JavaScript

Amazon Alexa im lokalen Smart Home programmieren

Amazon Echo und die eingebaute Sprachassistentin Alexa erlauben eine mehr oder weniger natürliche sprachgesteuerte Interaktion mit vernetzten Geräten wie Leuchten, Thermostaten, Schaltern usw. Doch die Entwicklung neuer Fähigkeiten namens Skills ist etwas mühsam, da es in der Natur von Alexa liegt, dass diese nur über die Cloud funktionieren. Außerdem scheint Amazon die Nutzung der hauseigenen Cloud-Dienste und das entsprechende Tooling zu bevorzugen. Doch dem damit verbundenen zeitraubenden Workflow kann man zumindest während der Entwicklung leicht entkommen. Im Folgenden verbinden wir dafür Alexa über einen sogenannten Tunnel mit dem eigenen Entwicklungsrechner. Das bedeutet, dass der selbsterstellte Skill als Services nun lokal bearbeitet, deployed und getestet wird.

Skill konfigurieren

In der Amazon Developer Console legt man über das Alexa Skills Kit einen Skill an und konfiguriert diesen.

Es gibt verschiedene Arten von Skills. In diesem Beispiel kommt die beliebteste und am wenigsten reglementierte Variante des „Custom Skills“ zum Einsatz. Die Sprache und der Aufruf-Namen (Invocation Name) bestimmen nun den „Rufnamen“, mit dem ein Anwender den Skill anspricht.

Der nächste Schritt legt die Art der Interaktion fest, indem ein Schema mit den möglichen Absichten (Intents) des Anwenders angelegt wird. Die Intents können auch über Variablen verfügen, die Slots genannt werden. Außerdem sind für jede Absicht noch passende Beispiel-Äußerungen (Sample Utterances) erforderlich, mit denen die Absichten aufgerufen werden können.

Innerhalb der Konfiguration kommt nun der entscheidende Schritt für den lokalen Test: Die Auswahl von HTTPS als Endpunkt-Typ und die Angabe einer entsprechenden remote URL für den Tunnel zum lokalen Rechner. Diese Tunnel und die zugehörige URL generieren wir mit Hilfe von ngrok. Dieses Werkzeug besteht aus einem Cloud-Service für den Remote-Zugriff. Außerdem gehört ein für zahlreiche gängige Betriebssysteme verfügbares Kommandozeilentool dazu, um den lokalen Endpunkt für den Tunnel bereitzustellen. Das Kommando

1
ngrok http 3000

leitet beispielsweise Anfragen an eine URL wie https://b22ec890.ngrok.io/ an einen lokalen HTTP-Server mit Port 3000 weiter.

Noch verbirgt sich hinter dem Endpunkt ja noch nichts, aber sobald das im nächsten Schritt erledigt ist, kann der Skill durch die Angabe von beliebigen Äußerungen in Textform innerhalb der Amazon Developer Console getestet werden. Noch realitätsnäher wird der Test natürlich, wenn auch ein Amazon Echo oder Amazon Echo Dot mit dem Entwickler-Konto verbunden ist.

Skill programmieren

Es gibt zahlreiche Möglichkeiten einen Skill zu programmieren. Zu den populärsten zählt sicherlich die Nutzung von Node.js. Amazon stellt extra dafür sogar ein NPM-Paket namens Alexa Skills Kit SDK for Node.js (kurz alexa-sdk) zu Verfügung. Es gibt jedoch leider einen Haken: Dieses Modul arbeitet so erst einmal nur im Rahmen von Amazon Lambda und nicht mit einem lokal laufenden Node.js-Server. Eine Lösung wäre der Verzicht auf das offizielle Alexa SDK und die direkte Verwendung der eingehenden REST-Aufrufe wie hier beschrieben – charmanter Nebeneffekt ist, dass REST auch mit vielen anderen Programmiersprachen und Server-Umgebungen harmoniert. Der Node.js-Code sieht dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.post('/', function(req, res) {
  // Deal with incoming request...
  if (req.body.request.type === 'IntentRequest') {
    // ...and build JSON response
    res.json({
      "version": "1.0",
      "response": {
        "shouldEndSession": true,
        "outputSpeech": {
          "type": "SSML",
          "ssml": "<speak>Hmmm</speak>"
        }
      }
    });
  }
}
// Start server and listen for incoming requests
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Doch mit einem kleinen Trick wird auf das „Nachbauen“ der REST-Schnittstelle verzichtet und doch direkt mit dem offiziellen Alexa SDK gearbeitet. Alles was dafür zusätzlich zu den normalen Beispielen für das SDK getan werden muss ist a) wie oben im Code bereits beschrieben der explizite Start eines Servers und b) das manuelle Erstellen des Context-Objektes. Nun können die Intents genauso verarbeitet werden wie in den offiziellen Beispielen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
// Initialize the Alexa SDK
var Alexa = require('alexa-sdk');
app.use(bodyParser.json());
app.post('/', function(req, res) {
    // Build the context manually, because Amazon Lambda is missing
    var context = {
        succeed: function (result) {
            console.log(result);
            res.json(result);
        },
        fail:function (error) {
            console.log(error);
        }
    };
    // Delegate the request to the Alexa SDK and the declared intent-handlers
    var alexa = Alexa.handler(req.body, context);
    alexa.registerHandlers(handlers);
    alexa.execute();
});
// Declare handlers for processing the incoming intents
var handlers = {
    'SwitchOnIntent': function () {
        var item = this.event.request.intent.
         slots.item.value;
        doRequest("ON");
        this.emit(':tell', 'Schalte ' + item);
    },
    'SwitchOffIntent': function () {
        var item = this.event.request.intent.
         slots.item.value;
        doRequest("OFF");
        this.emit(':tell', 'Schalte ' + item);
    }
};
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Die im Code referenzierte Funktion doRequest macht übrigens nichts Anderes als REST-Aufrufe an andere Geräte zu senden, um beispielsweise eine Philips HUE Leuchte ein oder auszuschalten. Dafür nutzt das Beispiel Eclipse SmartHome bzw. openHAB. Diese Heimautomatisierungs-Gateways verfügen über eine REST-Schnittstelle deren Dokumentation normalerweise über http://127.0.0.1:8080/doc/index.html erreichbar ist. Dort können passende REST-Aufrufe leicht ausprobiert werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// body holds one of the supported values for the used channel (i.e. ON or OFF)
var doRequest = function (body) {
    var request = new http.ClientRequest({
        hostname: "127.0.0.1",
        port: 8080,
        // Path to the channel for the device we like to control (see REST documentation)
        path: "/rest/items/minecraft_minecraft_switch_192_168_0_17__9998_88ad955d_ce14_4c78_bb2c_942a64a9da7c_channelPowered",
        method: "POST",
        headers: {
            "Content-Type": "text/plain",
            "Content-Length": Buffer.byteLength(body)
        }
    })
    request.end(body)
}

Um die Entwicklung eines Amazon Alexa Skills zu erleichtern, kann also ein lokaler Server leicht über einen Tunnel genutzt werden. Auch für Tests und private Einsatzzwecke hat sich das bewährt. Eine Veröffentlichung eines Skills ist so jedoch nicht möglich, da beispielweise die Verifikation von Aufrufen fehlt. Dies ließe sich dadurch lösen, dass der fertige Skill doch bei Amazon Lambda landet. Alternativ könnte diese Verifikation auch mit Hilfe eines weiteren NPM-Paketes wie hier beschrieben umgesetzt werden.

Echtzeitkommunikation mit WebRTC enträtselt und ohne Schnickschnack

WebRTC-Logo

WebRTC-Logo von http://www.webrtc.org/ 

Es scheint so, dass WebRTC sich zukünftig zu einem Standard für die Echtzeitkommunikation im Browser mausern könnte. Denn auch wenn WebRTC noch weit von einem Browser-übergreifenden Standard entfernt ist, reicht der aktuelle Stand durchaus schon aus, erste Gehversuche wenn nicht sogar bereits erste Anwendungen zu wagen. Für die effiziente Arbeit gibt es einen ganzen Haufen an JavaScript-Bibliotheken, welche die Komplexität und eventuelle Unzulänglichkeiten kompensieren. Nur leider ist es dann auch schwierig, die eigentliche Arbeitsweise zu verstehen und möglichen Problemen auf den Grund zu gehen. Darum dieser Artikel rund um WebRTC mal ganz ohne Schnickschnack.

Audio und Video

Viele Entwickler verstehen unter WebRTC in erster Linie das Einbinden der Webcam. Dieses gestaltet sich mit WebRTC in der Tat auch sehr einfach und gelingt im Google-Chrome z. B. mit JavaScript über navigator.webkitGetUserMedia (im Firefox heißt es aktuell navigator.mozGetUserMedia):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Stream
var senderStream;
var constraints = {audio: true, video: true};
var startButton = document.getElementById("startButton");
startButton.onclick =  start;
 
function start() {
    // Request sender stream
    console.log("request local stream");
    // Exact method varies based on browser
    navigator.webkitGetUserMedia(constraints, gotStreamSuccessCallback, errorCallback);
}
 
function gotStreamSuccessCallback(stream) {
    var senderVideo = document.getElementById("senderVideo");
    senderVideo.src = window.URL.createObjectURL(stream);
    senderStream = stream;
}
 
function errorCallback(error) {
    console.log("navigator.getUserMedia error: ", error);
}

Echtzeitkommunikation

simple-web-rtc-call-flow

Das Sequenzdiagramm aus der Spezifikation unter http://dev.w3.org/2011/webrtc/editor/webrtc.html  ist auf den ersten Blick wenig erhellend. Dabei ist der Ablauf garnicht so kompliziert…

Die Verarbeitung von Medien-Streams in Form von Audio und Video ist nur ein Aspekt von WebRTC. Denn die eigentliche Stärke ist die Echtzeitkommunikation über Browser hinweg per RTCPeerConnection. Die Arbeitsweise ist eigentlich ganz einfach:

  1. Der Sender generiert (nicht sendet, sondern generiert nur) ein Angebot (createOffer). In so einem Angebot (Session Description Protocol, kurz SDP) stehen die verfügbaren Codecs und Streams und jedes Mal, wenn sich ein Angebot ändert, muss das auch entsprechend bekannt gemacht und aktualisiert werden.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    
    // RTCPeerConnection WITHOUT the use of a server
    var servers = null;
    var senderPeerConnection;
    var senderIceCandidates = [];
    var callButton = document.getElementById("callButton");
    callButton.onclick = call;
     
    function call() {
     
        // create sender peer connection
        console.log("create sender peer connection");
        senderPeerConnection = new webkitRTCPeerConnection(servers);
        senderPeerConnection.onicecandidate = gotSenderIceCandidate;
     
        // add stream
        senderPeerConnection.addStream(senderStream);
     
        // create offer
        senderPeerConnection.createOffer(gotSenderDescription);
     
    }
     
    function gotSenderDescription(description){
        // console.log("offer from senderPeerConnection: \n" + description.sdp);
        senderPeerConnection.setLocalDescription(description);
        var senderDescriptionText = document.getElementById("senderDescriptionText");
        senderDescriptionText.value = description.sdp;
    }
  2. Neben diesem Angebot werden noch die eigentlichen Verbindungsmöglichkeiten für die Empfänger erzeugt. Die Verbindungsmöglichkeiten (Interactive Connectivity Establishment, kurz ICE) umfassen die möglichen IP-Adressen, Ports usw. – letzteres kann wie in diesem Beispiel sowohl lokal erzeugt oder von einem sogenannten TURN- oder STUN-Server generiert werden.
    1
    2
    3
    4
    5
    6
    7
    
    function gotSenderIceCandidate(event) {
        if (event.candidate) {
            var senderIceText = document.getElementById("senderIceText");
            senderIceCandidates.push(event.candidate);
            senderIceText.value = JSON.stringify(senderIceCandidates);
        }
    }
  3. Der Empfänger erhält das Angebot auf einem beliebigen Weg. Normalerweise über einen Server oder eine Socket-Verbindung. Aber es geht auch wie hier im Beispiel einfach per „Copy and Paste“ vom einen Browser zum anderen (oder sogar per Email). An dieser Stelle sollte die Verbindung auch auf den Empfang von Medienstreams vorbereitet werden (onaddstream).
  4. Anschließend erzeugt der Empfänger eine Antwort (createAnswer). In dieser Antwort stehen genauso wie in dem Angebot die verfügbaren Streams und Codecs (SDP).
  5. Nun werden die Verbindungsmöglichkeiten (ICE) des Senders verarbeitet. Auch diese können auf einem beliebigen Weg übertragen werden.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    
    var servers = null;
    var remotePeerConnection;
    var remoteIceCandidates = [];
    var answerButton = document.getElementById("answerButton");
    answerButton.onclick = answer;
     
    function answer() {
        // create remote peer connection
        console.log("create remote peer connection");
        remotePeerConnection = new webkitRTCPeerConnection(servers);
        remotePeerConnection.onicecandidate = gotRemoteIceCandidate;
        remotePeerConnection.onaddstream = gotRemoteStream;
     
        var senderDescriptionText = document.getElementById("senderDescriptionText");
        var senderDescription = new RTCSessionDescription({sdp:senderDescriptionText.value, type: "offer" });
        remotePeerConnection.setRemoteDescription(senderDescription);
        remotePeerConnection.createAnswer(gotRemoteDescription);
    }
     
    function gotRemoteStream(event) {
        console.log("gotRemoteStream stream: " + event.stream);
        var remoteVideo = document.getElementById("remoteVideo");
        remoteVideo.src = webkitURL.createObjectURL(event.stream);
    }
     
    function gotRemoteDescription(description) {
        // console.log("offer from remotePeerConnection: \n" + description.sdp);
        remotePeerConnection.setLocalDescription(description);
        var remoteDescriptionText = document.getElementById("remoteDescriptionText");
        remoteDescriptionText.value = description.sdp;
     
        // list of candidates
        var senderIceText = document.getElementById("senderIceText");
        var senderIceCandidates = JSON.parse(senderIceText.value);
        for (var i in senderIceCandidates) {
            var senderIceCandidate = new RTCIceCandidate(senderIceCandidates[i]);
            remotePeerConnection.addIceCandidate(senderIceCandidate);
        }
    }
  6. Da es sich um eine Peer-to-Peer-Verbindung (P2P) handelt, benötigt auch der Sender Verbindungsdaten (ICE), die der Empfänger nun generiert.
    1
    2
    3
    4
    5
    6
    7
    8
    
    function gotRemoteIceCandidate(event){
        if (event.candidate) {
            // console.log("gotRemoteIceCandidate candidate: " + event.candidate.candidate);
            var remoteIceText = document.getElementById("remoteIceText");
            remoteIceCandidates.push(event.candidate);
            remoteIceText.value = JSON.stringify(remoteIceCandidates);
        }
    }
  7. Jetzt müssen sowohl die Antwort und die Verbindungsdaten noch zurück zum Sender geschickt und dort dann verarbeitet werden, um eine Verbindung auszuhandeln. Um die Details kümmert sich WebRTC nun glücklicherweise selbständig.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    var handleAnswerButton = document.getElementById("handleAnswerButton");
    handleAnswerButton.onclick = handleAnswer;
     
    function handleAnswer() {
     
        var remoteDescriptionText = document.getElementById("remoteDescriptionText");
        var remoteDescription = new RTCSessionDescription({sdp: remoteDescriptionText.value, type: "answer"});
        senderPeerConnection.setRemoteDescription(remoteDescription);
     
        // list of candidates
        var remoteIceText = document.getElementById("remoteIceText");
        var remoteIceCandidates = JSON.parse(remoteIceText.value);
        for (var i in remoteIceCandidates) {
            var remoteICECandidate = new RTCIceCandidate(remoteIceCandidates[i]);
            senderPeerConnection.addIceCandidate(remoteICECandidate);
        }
     
    }

Und nun?

Klar, das hier ist nur eine Richtung und würde sich rein auf das Beobachten beschränken. Auch fehlen eine adäquate Software-Architektur sowie eine Fehlerbehandlung. Und der Austausch der Verbindungsdaten per „Copy and Paste“ ist vermutlich auch nur in wenigen Szenarien sinnvoll. Dennoch ist das ein guter Startpunkt, um Schritt-für-Schritt genau diese fehlenden Aspekte hinzuzufügen oder ggf. auf eine der zahlreichen Bibliotheken dafür zurückzugreifen – die beiden HTML-Dokumente für den Sender und den Empfänger finden sich dafür hier als möglichst einfach gehaltener Quellcode.

Transkription: Anrufe als Emails erhalten

Für die natürliche Nutzung eines Systems ist Spracherkennung in vielen Szenarien eine Option. Ganz egal ob auf Schlüsselwörter gelauscht oder vordefinierten Grammatiken zum Einsatz kommen. Daneben gibt es auch noch die Transkription, welche gesprochene Sprache als lesbaren Text darstellt. Der Developer Garden bietet hier gleich mehrere Lösungen, wie unter http://www.wolter.biz/?p=1368 beschrieben. Neu ist, dass für die Transkription zum einen der in dem Artikel erwähnte Trick nicht mehr notwendig ist und dass zum anderen nun mehr als 40 Sprachen, darunter auch Deutsch, unterstützt werden:

  • English (AUS): en_AU
  • English (UK): en_GB
  • English (US): en_US
  • Arabic (Egypt): ar_EG
  • Arabic (Saudi): ar_SA
  • Arabic (UAE): ar_AE
  • Cantonese Chinese: zh_HK
  • Catalan (Spain): ca_ES
  • Croatian: hr_HR
  • Czech: cs_CZ
  • Danish: da_DK
  • Dutch: nl_NL
  • Finnish: fi_FI
  • French (CAN): fr_CA
  • French (EU): fr_FR
  • German: de_DE
  • Greek: el_GR
  • Hebrew: he_IL
  • Hungarian: hu_HU
  • Indonesian: id_ID
  • Italian: it_IT
  • Japanese: ja_JP
  • Korean: ko_KR
  • Malay: ms_MY
  • Mandarin Chinese: cn_MA
  • Taiwanese Mandarin: zh_TW
  • Norwegian: no_NO
  • Polish: pl_PL
  • Portuguese (BR): pt_BR
  • Portuguese (EU): pt_PT
  • Romanian: ro_RO
  • Russian: ru_RU
  • Slovak: sk_SK
  • Spanish (EU): es_ES
  • Spanish (MX): es_MX
  • Spanish (US): es_US
  • Swedish: sv_SE
  • Thai: th_TH
  • Turkish: tr_TR
  • Ukranian: uk_UA
  • Vietnamese: vi_VN

Die Programmierung gestaltet sich wie gewohnt sehr einfach. In der Scripting API von Tropo sieht das dann mit Angabe des transcriptionLanguage Parameters so aus:

1
2
3
4
5
6
7
8
record("Sag uns bitte, wie es Dir geht!", {
   voice: "Katrin",    
   beep: true,    
   maxTime: 600,
   transcriptionID: currentCall.callerID,
   transcriptionLanguage: "de_DE",   
   transcriptionOutURI: "mailto:me@mymail.com"
});