Build the future of communications.
Start building for free
  • By Phil Nash
    Kamerawechsel während eines Videochats mit Twilio Video Kamerawechsel während eines Videochats mit Twilio Video


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Switching cameras during a video chat with Twilio Video. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Wir haben bereits gesehen, wie wir Kameras in JavaScript mit der mediaDevices-API auswählen, vor allem bei mobilen Geräten mit Front- und Rückkamera. Jetzt ist es an der Zeit, das in einer Anwendung in die Praxis umzusetzen. In diesem Blog zeige ich, wie wir das bereits erlernte Wissen nutzen, um mithilfe von Twilio Video in einer Videochat-Anwendung die Kamera zu wechseln.

    Los geht's

    Zum Erstellen verwenden wir eine leicht abgewandelte Version der Twilio Video-Anwendung. Für diese App benötigen wir Folgendes:

    • Node.js (Ich verwende die neueste Version, 10, aber es funktioniert auch mit älteren Versionen.)
    • ngrok …
    Read More
  • By Phil Nash
    Erste Schritte mit Webkomponenten zur Entwicklung eines Videochat-Widgets Erste Schritte mit Webkomponenten zur Entwicklung eines Videochat-Widgets


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Getting started with Web Components building a Video Chat widget. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Moderne Anwendungen werden vorzugsweise mit komponentenbasierten UI-Bibliotheken entwickelt. Angular und React sind derzeit besonders beliebt, aber auch der unscheinbare Browser mit seinen nativen APIs wird weiterhin gerne zur Anwendungsentwicklung genutzt. Webkomponenten gibt es seit 2011. Sie wurden damals eingeführt mit dem Ziel, einen komponentenbasierten Ansatz für die Webplattform zu schaffen.

    Unter den verschiedenen Bibliotheken, die für die Entwicklung von Webkomponenten zur Verfügung stehen, sind insbesondere Polymer von Google, aber auch X-Tag und Bosonic erwähnenswert. Um die Möglichkeiten der Plattform aufzuzeigen, werde ich demonstrieren, wie man mithilfe der heute in Browsern verfügbaren APIs eine Webkomponente entwickeln kann. …

    Read More
  • By Phil Nash
    HTML-Attribute für eine bessere Benutzererfahrung bei der Zwei-Faktor-Authentisierung HTML-Attribute für eine bessere Benutzererfahrung bei der Zwei-Faktor-Authentisierung


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von HTML attributes to improve your users' two factor authentication experience. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Es gibt viele Reibungspunkte, die sich auf die Benutzererfahrung bei der Anmeldung auswirken können, vor allem bei der Eingabe eines Codes für die Zwei-Faktor-Authentisierung. Unsere Aufgabe als Entwickler ist es, Anwendungen zu erstellen, die zwar die Kontosicherheit im Auge behalten, aber nicht die Benutzererfahrung beeinträchtigen. Manchmal erscheint es einem aber fast so, als ob sich diese beiden Anforderungen ausschließen.

    In diesem Blog betrachten wir uns das bescheidene <input>-Element und die HTML-Attribute, die zu einer besseren Erfahrung unserer Benutzer bei der Zwei-Faktor-Authentisierung führen können.

    Die Standarderfahrung

    Wenn wir eine Zwei-Faktor-Authentisierung für eine Webanwendung implementieren, vielleicht sogar …

    Read More
  • By Phil Nash
    Twilio on The Apprentice: ONE Championship edition - the Tech Behind the Scenes Twilio on The Apprentice: ONE Championship edition - the Tech Behind the Sceness

    Throughout Asia The Apprentice has been back on TV screens, powered by Twilio as the official technology partner. The competition started with 16 candidates facing challenges, both business and physical, each week. The winner gets to work for a year as the apprentice of ONE Championship founder, chair and CEO Chatri Sityodtong.

    While Twilio was being used to deliver messages to the candidates throughout the series and power a "Watch and Win" competition via Facebook Messenger bot, in episode 11 the final four candidates, Jessica, Louie, Irina, and Monica, came face-to-face with the Twilio APIs themselves as they were challenged to help non-profit organisations thrive with communication strategies that use Twilio's cloud communications platform. Let's take a look at what they built in the challenge and how they used Twilio to their advantage.

    The challenge is set

    Once the candidates had been given the challenge, they were …

    Read More
  • By Phil Nash
    Auswählen von Kameras in JavaScript mit der mediaDevices-API Auswählen von Kameras in JavaScript mit der mediaDevices-API


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Choosing cameras in JavaScript with the mediaDevices API. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Die meisten Smartphones sind mit einer Vorder- und Rückkamera ausgestattet. Wenn du eine Videoanwendung für Mobilgeräte erstellst, möchtest du möglicherweise zwischen ihnen wählen oder zwischen ihnen wechseln.

    Wenn du eine Chat-App erstellst, möchtest du wahrscheinlich die Frontkamera, aber wenn du eine Kamera-App erstellst, interessierst du dich mehr für die Rückkamera. In diesem Beitrag erfährst du, wie du mit der mediaDevices-API und Medieneinschränkungen die Kamera wählst oder zwischen Kameras wechseln kannst.

    Das brauchen wir

    Um diesem Beitrag folgen zu können, benötigst du:

    • ein iOS- oder Android-Gerät mit zwei Kameras zum Testen. Wenn du zwei Webcams hast, funktioniert dies …
    Read More
  • By Phil Nash
    Senden einer SMS über React mit Twilio Senden einer SMS über React mit Twilio


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von How to send an SMS from React with Twilio. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Wir reden viel über das Senden von SMS-Nachrichten über Webanwendungen, aber wie sieht es aus, wenn wir SMS-Nachrichten über eine React-Anwendung senden möchten? Das ist zwar mit etwas mehr Aufwand verbunden, als sich nur um die serverseitige Version zu kümmern, wird aber auch nicht zu viel Zeit in Anspruch nehmen.

    Warum eignet sich dazu nicht die Verwendung der REST-API auf Clientseite?

    Eigentlich könnten wir eine SMS mit der Twilio-REST-API direkt über eine clientseitige JavaScript-Anwendung senden. Aber (und das ist ein großes Aber) wenn wir das tun, würden wir unsere Twilio-Anmeldeinformationen jedem Benutzer preisgeben, der unsere Seite …

    Read More
  • By Phil Nash
    Senden einer SMS mit TypeScript über Twilio Senden einer SMS mit TypeScript über Twilio


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von How to Send an SMS With TypeScript Using Twilio. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Node.js-Anwendungen mit TypeScript zu schreiben, bedeutet, dass wir die Vorteile des Typsystems und der Tools von TypeScript nutzen können. In diesem Blog haben wir bereits erfahren, wie wir eine SMS-Nachricht mit Node.js senden. Hier sehen wir uns an, wie wir das mit TypeScript erledigen.

    Das brauchen wir

    Für dieses Tutorial benötigen wir Folgendes:

    Sobald wir alle Voraussetzungen erfüllt haben, können …

    Read More
  • By Phil Nash
    Web Speech APIを用いたブラウザでのテキスト読み上げ speech-to-text-browser-web-speech-api-jp

    この記事はTwilio Developer EvangelistのPhil Nashこちらで公開した記事の日本語版です。

    Web Speech APIには、音声合成(テキスト読み上げ)と、音声認識(音声からテキストへの変換)という2つの機能があります。SpeechSynthesis APIを使用すると、ブラウザ上で音声を選択して任意のテキストを読み上げることができます。

    アプリケーション内での音声アラートや、WebサイトでのAutopilot駆動のチャットボット利用など、Web Speech APIはWebインターフェースを強化する大きな可能性を秘めています。ここでは、Webアプリケーションでの音声読み上げの実行方法について説明します。

    必要なもの

    SpeechSynthesis APIについて学び、このアプリケーションを構築するには、次の準備が必要です。

    準備ができたら作業用のディレクトリを作成し、そのディレクトリにこのHTMLファイルこのCSSファイルをダウンロードします。これらのファイルが同じフォルダにあり、CSSファイルの名前がstyle.cssであることを確認します。ブラウザでHTMLファイルを開くと、次の内容が表示されます。

    tts - browser

    では、このAPIを使用して、ブラウザでの読み上げを行いましょう。

    Speech Synthesis API

    この小さなアプリケーションでの作業を始める前に、ブラウザの開発ツールを使用して読み上げ …

    Read More
  • By Phil Nash
    Erstellen eines Videochats mit React-Hooks Erstellen eines Videochats mit React-Hooks


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Build a Video Chat with React Hooks. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Wir haben im Rahmen dieses Blogs bereits einen Videochat in React erstellt, aber mittlerweile wurden mit der Version 16.8 von React Hooks eingeführt. Mit Hooks können wir Zustands- oder andere React-Funktionen innerhalb von Funktionskomponenten nutzen, ohne dass wir eine Klasse schreiben müssen.

    In diesem Post werden wir eine Videochat-Anwendung mit Twilio Video und React erstellen, die nur Funktionskomponenten enthält. Dazu nutzen wir die Hooks useState, useCallback, useEffect und useRef.

    Das brauchen wir

    Um diese Videochat-Anwendung zu erstellen, brauchen wir Folgendes:

    Sobald wir das …

    Read More
  • By Phil Nash
    Build a competition entry chat bot with Twilio Autopilot and Facebook Messenger Build a competition entry chat bot with Twilio Autopilot and Facebook Messenger

    The Apprentice is back on TV screens around Asia, and Twilio is the official technology partner. Throughout the series Twilio APIs have supported the show and candidates; delivering notification messages to the teams, powering their solutions in episode 11, and running a Watch & Win competition for the viewers.

    The Watch & Win competition was implemented as a chatbot over Facebook Messenger. In this post we will look at how you can build your own competition bot using Twilio Autopilot, Twilio Functions and Airtable.

    A screen grab of talking with a bot over Facebook Messenger. It asks a question, I respond with the answer, then it asks for my name which I also respond to.

    Defining the competition

    To build a watch and win competition bot, we need a few parameters for how the bot will work:

    • The competition will run every week that the show is broadcasting, with a new question per episode
    • The question will include a phrase that was said during the week's episode and three options for who said it
    • Viewers can enter …
    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.