https://d226lax1qjow5r.cloudfront.net/blog/blogposts/next-web-voice-journal-python-vue-javascript-dr/p2p-voice-journal-featured.png

ネクスト・ウェブのためのVoice Journalを作る

最終更新日 May 13, 2021

所要時間:1 分

ワールド・ワイド・ウェブは驚異的なものだ。私たちは人類史上かつてないほど簡単に情報を作成し、共有することができる。

チュートリアルを書く チュートリアルを書いている。ブログのチュートリアルを書いている。 #devrellife pic.twitter.com/mvxGDuEDky

- アーロン・バセット - タイムゾーンは?(@aaronbassett) 2018年5月15日

しかし、私たちが創造するものの多くは、壁に囲まれた庭の中で生活している。これは、WWWの本来のアイデアに対するアンチテーゼである。このような壁に囲まれた庭を壊すことは、少なくとも2009年以来、ティム・バーナーズ・リーが話してきたことである!

実際、データは私たちの生活に関わるものだ。ソーシャル・ネットワーキング・サイトにログインし、お気に入りのサイトにアクセスし、「これが私の友達です」と言う!関係。データ。この写真、この人のことを撮ってるんだ!データ。データ、データ、データ。あなたがソーシャル・ネットワーキング・サイトで何かをするたびに、ソーシャル・ネットワーキング・サイトはデータを取得し、それを利用している。しかし、別のリンクされたデータサイトに行き--これが旅行に関するサイトだとしよう--、「この写真をそのグループの人たち全員に送りたい」と言っても、壁を乗り越えることはできない。

- ティム・バーナーズ=リー卿

実際、地方分権はWWW創設以来の基本的な側面である。

分散化:ウェブに何かを投稿するのに中央当局の許可は必要なく、中央制御ノードも存在しないため、単一障害点がない......そして「キルスイッチ」もない!これはまた、無差別な検閲や監視からの自由を意味する。

- ウェブ財団、ウェブの歴史

個人間ウェブの紹介

Voice Journal ScreenshotVoice Journal Screenshot

個人間ウェブでは、サーバーは必要ない。あなたのサイトへの訪問者はそれぞれ、群れの仲間になります。互いに直接接続し、サイトのファイルを共有します。これはあなたのサイトをオンラインに保つだけでなく、無差別な検閲からの自由を生み出します。

をどのように使うかを見てみよう。 ダット・プロトコルNexmoのVoice APIを使って、音声ジャーナルをホストする分散型ウェブサイトを作成する方法を見てみよう。この例のコードは この例のコードはGithubからダウンロードできる。.

プロセスの流れ

このアプリケーションの処理の流れは簡単です。Nexmoのバーチャル・ナンバーに電話をかけると、Nexmoは音声をMP3として録音し、新しい録音があったことをサーバーに通知します。そして、私たちのサーバーがNexmoからの通知を受け取ると、MP3ファイルをダウンロードしてアーカイブに追加し、Datプロトコルを使用しているすべてのピアと自動的に共有されます。

Nexmoコールコントロールオブジェクトと録音アクション

オーディオの録音は Nexmoを使えば非常に簡単.私たちは NCCOファイルを作成します。 recordアクション.TTS機能を使って録音の前にメッセージを流すこともできます。私はそうせず、録音の準備ができたらビープ音を鳴らすようにNexmoに指示しています。留守番電話のようにね。

@hug.get('/')
def ncco():
    return [
        {
            "action": "record",
            "eventUrl": ["<SERVER URL>/recordings"],
            "endOnKey": "*",
            "beepStart": True
        }
    ]

上のコードでは Hugを使ってJSONエンドポイントを作成してNexmo APIにNCCOファイルを提供しています。Nexmoを使った音声アプリケーションの作成についての詳細(およびNCCOファイルとは何かについての詳細)は、私の過去のチュートリアルをお読みください:

Nexmo Voice Applicationsについては、私のライブ・コーディング・ウェビナーでも詳しく説明しています:

録音の保存

通話が終了するか、ユーザーが "を押すと、Nexmoは新しい録音について、上記のコードで" "指定したWebhookを介して通知します。 eventUrlとして指定したウェブフックを通じて、新しい録音を" "* Nexmoに通知します。ウェブフックへのリクエストには recording_urlが含まれており、それを使ってMP3ファイルをダウンロードすることができます。しかし、まず、Nexmoと認証し、録音をダウンロードする権限があることを確認する必要があります。認証には 認証にはJWT.

@hug.post('/recordings')
def recordings(recording_url, recording_uuid):
    iat = int(time.time())
    now = datetime.datetime.now()

    with open('nexmo_private.key', 'rb') as key_file:
        private_key = key_file.read()

    payload = {
        'application_id': os.environ['APPLICATION_ID'],
        'iat': iat,
        'exp': iat + 60,
        'jti': str(uuid.uuid4()),
    }

    token = jwt.encode(payload, private_key, algorithm='RS256')

    recording_response = requests.get(
        recording_url,
        headers={
            'Authorization': b'Bearer ' + token,
            'User-Agent': 'voice-journal'
        }
    )
    if recording_response.status_code == 200:
        recordingfile = f'./site/recordings/{now.year}/{now.month}/{recording_uuid}.mp3'
        os.makedirs(os.path.dirname(recordingfile), exist_ok=True)

        with open(recordingfile, 'wb') as f:
            f.write(recording_response.content)

上記のコードのほとんどは、JWT認証 [*] のためのものだ。ああ、誰かPythonクライアントでもっと簡単にできるようにしてくれないかな...?].録音をダウンロードしたら、MP3ファイルを保存する。

/recordings/<current year>/<current month>/<recording uuid>.mp3

このようにディスク上の録音を構造化することで、アプリケーションのフロントエンドがなくても、特定の日の録音を簡単に見つけて聴くことができる。

録音物の配布

私たちのサイトを配信するには、主に次の2つの方法があります。 データ; Dat CLIを使うを使う方法と ビーカーブラウザ.簡単のため、この例ではBeakerを使います。しかし、Webhookをサーバー上で実行したい場合や、サーバーレス関数として実行したい場合は、Dat CLIを使用してください。 Tara VancilDat CLIを使ってブログの更新を公開している。(datバージョン).注意しなければならないのは、私たちのアプリケーションのフロントエンドは、いくつかの ビーカー固有のAPIを使用していることです。タラのサイトとは異なり、通常のブラウザでは動作しないので dathttpd.

まだの方は、今すぐ 今すぐBeakerをダウンロード.

私の群れに参加しよう

注:BitTorrentや他のP2Pプロトコルのように、スウォームのメンバーは必然的に他のメンバーのIPアドレスを見ることができる。これはピアツーピアの配信であり、中央集権的なサービスを経由しないことを忘れないでください。自分のIPアドレスを他のスウォーム参加者と共有することに抵抗がある場合は、次のセクションを飛ばしても構いません。

次のリンクを dat://リンクを開く: dat://8354c381e6f859e57ef6979af7e287acf3d528d8463f54774c36b6bc8aa514d6/

おめでとうございます!あなたは今、私のスウォームのメンバーであり、他の訪問者にオーディオ録音を配布することができます。あなたは(私の)ウェブサーバーの一員です、ありがとう!

しかし、ブラウザを閉じると、あなたはスウォームから離脱します。ファイルはあなたのコンピューターに残りますが、他の訪問者に配布することはなくなります。少なくとも1つのピアが常に利用できるように、私はアーカイブを #_hashbase.

アプリケーション・フロントエンド

録画にアクセスするためのUIを作る必要はありません。Beakerは、アーカイブディレクトリにインデックスファイルがない場合に使うシンプルなインターフェースを作ってくれます。これは機能的ですが、あまりきれいではありません。もっといいものができるはずだ。

Directory listing rendered by Beaker BrowserDirectory listing rendered by Beaker Browser

フロントエンドは Vueアプリケーションで、Vonage Voltaデザインシステムを使用しています。Voltaは Voltaは、最近のNexmoダッシュボードのデザイン変更で使用したものと同じデザインシステムです。.残念ながら、Voltaはオープンソースではありません。

また、アーカイブとのやり取りにはBeaker固有のAPIをいくつか使用しています。

const archive = new DatArchive(window.location)
let allRecordings = await archive.readdir('/recordings', {recursive: true, stat: true})

上のコードでは、アーカイブにアクセスして、録音ディレクトリの内容を読み込み、MP3以外のファイルをフィルタリングしている。このとき statオプションはBeakerに stat()を実行し {name:, stat:}.

このページでもうひとつ注目すべき点は、ページ上部の情報ボックスだ。

Screenshot of swarm information UIScreenshot of swarm information UI

別の Beakerの別のAPIを使ってを使います、 getInfo()

async peers () {
    return await this.archiveInfo.peers
},
async version () {
    return await this.archiveInfo.version
},
async mtime () {
    let timestamp = await this.archiveInfo.mtime
    return moment(timestamp).startOf().fromNow()
},
async filesize () {
    let size = await this.archiveInfo.size
    return filesize(size, {round: 2})
}

アーカイブの歴史

Datプロトコルは、アーカイブが作者によって署名されていることを保証し、ネットワーク・ピアに問い合わせることで正しさをチェックすることができます(配布の均一性)。アーカイブの履歴は1つのバージョンしか配布できない。署名済みのDatアーカイブがピアの署名済みコピーと異なることが判明した場合、その内容はDat作者による標的型攻撃の可能性があるため、破損したものとして扱われる。すべてのユーザーが同じコンテンツを受け取ることが重要であり、Datに完全性検証が組み込まれているのはそのためです。

- Beakerブラウザ、ソフトウェアを安全に公開

History log screenshotHistory log screenshot

Beaker Web API を使えば、アーカイブの変更ログを照会して表示することができます。このログには、作者が日記エントリを削除したかどうかまで表示されます。

archiveHistory: {
    async get () {
    const archive = new DatArchive(window.location)
    const completeHistory = archive.history({start: 0, reverse: true})
    return completeHistory
    }
},

さらに詳しく

シェア:

https://a.storyblok.com/f/270183/150x150/a3d03a85fd/placeholder.svg
Aaron Bassettヴォネージの卒業生

アーロンはNexmoの開発者支持者だった。ベテランのソフトウェア・エンジニアであり、デジタル・アーティスト志望でもあるアーロンは、コードや電子機器、時にはその両方を使って何かを作っているところをよく見かける。彼が何か新しいことに取り組んでいるときは、空気中の部品が燃える匂いでわかるのが通例だ。