ホームページ ウェブフロントエンド H5 チュートリアル HTML5をベースとしたWebクロスデバイス超音波通信ソリューションの詳細説明

HTML5をベースとしたWebクロスデバイス超音波通信ソリューションの詳細説明

Mar 09, 2017 pm 04:09 PM

HTML5 ベースの Web クロスデバイス超音波通信ソリューションの詳細な説明:

前書き: Chirp は、iPhone でのファイルの音声送信を開始しました。MMS やBluetooth ペアリング、IM でデータを転送します。小鳥のさえずりでデータを共有するというシンプルで面白い機能で、1対多の共有もすぐに実現できます。さらに、Alipay は「音波決済」を試み、携帯電話を使用して超音波を取引パスワードとして端末に送信し、取引をさらに完了させました。ただし、Alipay のテクノロジーは現在、支払いにのみ使用されており、使用する前に音波決済を受け入れることができる特定の自動販売機が必要です。

ゲームとインタラクティブアプリのための高度なサウンド - WebAudio API

」の著者

Boris Smus は、HTML5 の Web オーディオ API を使用して、Web に基づく超音波相互接続ソリューションを実装しました。クライアントのインストールも、Bluetooth や NFC のサポートも必要なく、ブラウザを使用してインターネットにアクセスし、写真、音楽、ビデオ、その他のファイルを転送する 2 つのデバイスを接続できます。この アイデア はとてもクールです。Web の機能とアプリケーション レベルで大きな一歩を踏み出すのに役立ちます (このアイデアは、あなたが考えたことも聞いたこともないものかもしれません)、見てみましょう詳細については、原則と実装プロセスをご覧ください。 ……………………………………✄……………………………………………………ゴージャスな仕切り

ポケットに携帯電話を入れる 多くの機能を備えた、クールで美しいツールです。ただし、テレビやラップトップなどの他のデバイスと通信する場合は、ユーザー エクスペリエンスが大幅に低下します。

ビル・バクストン

は、このトピックに関して非常に共感力のあるスピーチを行っており、ハイテク進化の3つの段階を説明しています: 1、

設備の作業: 機能の完全性と安定性

2、スムーズなストリーム機器: 優れたユーザーエクスペリエンス

3、 多くのデバイスが連携して動作します

iphone でリリースされました、

2

ステージ、しかし、デバイスを接続するのは面倒です。これを実現するには、Bluetooth、Bluetooth LEWiFiDirect Connect、ローカル WiFi ネットワーク検出経由など、さまざまな方法があります。この記事では、超音波を使用して隣接するデバイス間でデータをブロードキャストおよび送信するという、まったく予想外の角度から問題に取り組みます。最も重要なことは、このアプローチでは Web Audio API を使用しており、純粋な Web アプリケーションの接続が可能になっているということです。 デモビデオ

バベルの塔

Airplay Chromecast 内のデバイス接続の問題に対する優れたソリューション (例: Apple Google) しかし、共通の問題は依然として解決が困難です。

技術的なアプローチは多数考えられるため、接続したいデバイス間で共通の方法がない場合もあります。 2 つのデバイスに Bluetooth が搭載されている場合でも、1 つは設定する必要があるが、もう 1 つは設定していない、または別のバージョンの標準をサポートしている場合があります。これは最近の Bluetooth で特に一般的であり、多くのデバイスがハードウェアで Bluetooth 4.0 (別名 BTLE) をサポートしていますが、多くのデバイスはさまざまな理由でこの最新のプロトコルをサポートしていません。

Webでは、セキュリティサンドボックスの理由により、低レベルデバイスAPIの接続が提供されていないため、この状況はさらに悪化します。そして、Webの発展は非常に遅いため、この状況が短期間で解決されるとは考えにくいです。

興味深い方法でデータを転送する Electric Imp が提供する

Blinkup

は、端末間で通信するための興味深い方法です。一連の光のフラッシュを使用して、スマートフォンとImp – 光センサーを備えた小さなSDカードのように見えるデバイスの間でデータを転送します。 ダイヤルアップモデムも同様のことを行います。アナログ電話回線上のデジタル データをエンコードおよびデコードします。あの不快な接続ノイズを覚えていますか?ダイヤルアップ モデムはスピーカーをオンにして、ハンドシェイクが行われていることをユーザーに知らせます。これらを忘れた場合は、ここで確認できます

。現在のアナログ電話でも、キーパッドの数字キーを押したときに聞こえる音は、電話システムがアナログからデジタルへの変換に使用する周波数と同じです。この変換には、デュアルトーン多重周波数信号 (DTMF) が使用されます。 携帯電話や周囲の多くのデバイスにはスピーカーとマイクが付いています。どちらのハードウェアも、電話回線でモデムが行うのと同様に、サウンドを使用してデータを送受信できます。さらに良いことに、オペレーティング システムが十分に高い周波数での送受信をサポートしている場合は、サイレント データ チャネルを作成できます。输传 音声付きデータ転送

データのコーディングデータが新しいものではないことに注意する必要があります。

オーディオウォーターマークのアイデアは、リスナーが人間の手段では認識できないが、別のデバイスによって理解できる署名を音楽にエンコードすることです。これは著作権侵害を防ぐ賢い方法です。 通常のスピーカーは、

44.1kHzのサンプリングレート(最高周波数は

)のサウンドを生成できます。

)。これにより、データを音声にエンコードするだけでなく、大人には聞こえない音声を生成することもできます。ただし、子供や動物にはまだ聞こえる可能性があります:) 技術的には、マイクは、人々が話している内容に合わせて最適化され、より低いサンプリングレートを使用して、スピーカーと互換性がない場合があります。特に携帯電話では、音が良くなります。また、ハードウェアに互換性がある場合でも、電力供給を確保するためにファームウェアを低いサンプリング レートで実行する必要がある場合もあります。この場合、デバイスは音波を受信できず、音声ベースの接続は一方向でのみ機能します。 NSonicnet.jsWeb Audio実装

これらの概念を説明するために、JavaScriptライブラリをセットアップし、データを受信します。私の方法は複雑な音声透かし技術を学ぶ必要がなく、DTMFよりもさらに簡単です。基本的に、範囲を使用する頻度と、送信できる文字のセットを指定します。スペクトルは、指定された開始文字と終了文字に対応する範囲に分割され、各文字 /

コードは周波数範囲全体の一部に対応します。

送信側は、送信する必要がある各文字を対応する周波数範囲の中間値に変換し、その周波数を時間間隔内で送信します。受信側は信号に対して不連続フーリエ変換を実行し (Yujie の注: 私の学部の専攻は情報通信工学です。デジタル信号処理を学んだ友人ならよく知っているはずです)、指定された周波数範囲内のピークを探します。信号間隔内でピークを見つけた後、周波数を文字に変換し直します。これは基本的に Single Tone Multi-Frequency (STMF)

スキームです。

送信のタイミングの問題があります。送信側では、キャラクターを送信するのにどのくらいの時間がかかりますか。受信側では、受信にどのくらいの時間がかかりますか?隣接する繰り返し文字を避けるために、単純なスキームを使用しました。个 一 音波通信用の

API Socket を設計しました。クライアントのコードは次のようになります:

ssocket = new SonicSocket({alphabet: '0123456789'});
function onButton() {
 ssocket.send('31415');
}
ログイン後にコピー


サーバー側は次のようになります:

sserver = new SonicServer({alphabet: '0123456789'});
sserver.on('message', function(message) {
  //Expect message to be '31415'.
 console.log(message);
});
sserver.start();
ログイン後にコピー


JSライブラリサポート github

もちろん、これを使用するには Web Audio の実装が必要です (ほとんどの場合、送信側では OscillatorNode を使用し、受信側では AnalyserNode を使用します)終わり))。 MacbookからChromeChrome、そしてMac ChromeからAndroid Chromeへの転送ケースを試してみました。

このアイデアを説明するために、2 つの例を書きました。これらは、この記事の冒頭で紹介した ビデオ に登場します。最初の例では、あるデバイスから別のデバイスに絵文字を送信できます。これは、6 文字のみを含む非常に小さな文字セットを使用しており、各文字は 1 式に対応します。 6 の絵文字の 1 つを選択すると、対応する文字がソニック ネットワークを通じて送信され、相手側で受信されて表示されます。

sonicnet.jsのより現実的なアプリケーションは、このチャットアプリケーションです、一意の5桁のトークンを生成し、それを使用して 2デバイス間の接続を作成します。これは、WebSocketを介して 2 つのデバイス間にプロキシ接続を確立するペアリング サーバーの助けを借りて行われます。接続が確立されると、会話自体は WebSocket 経由で送信されます。 サーバーコードnodejitsuでホストされています。

結論と期待

Web Audio API は、このようなアプリケーションを可能にするために進化することができました。これは大きな進歩です。私は、IoT での sonicnet.js の実装に夢中です。これは、デバイスのペアリングに使用できる純粋な Web テクノロジーです。ユビキタスなブラウザとオーディオ ハードウェアの組み合わせは大きな勝利となるでしょう。ハードウェア レベルでも、Web プラットフォームは Bluetooth やその他の近距離接続技術が成熟するのを待つ必要はありません。 この記事に興味を持った場合は、

sonicnet.js を使用してアプリケーションを作成してみることができます。前に述べたように、ハードウェア /ファームウェアの制限のため、高周波オーディオの受信はすべてのデバイスで利用できるわけではありません。そのため、どのデバイスがサポートし、どのデバイスがサポートしないのかを知りたいと思っています。私の予想では、ほとんどの携帯電話は送信のみが可能ですが、ほとんどのラップトップは同時に受信と送信ができるはずです。お使いのデバイスで絵文字デモを試した場合は、このフォームにご記入ください。この記事の執筆時点では、AndroidプラットフォームのChromeベータ版バージョンはリアルタイム入力をサポートしていないため、携帯電話からラップトップにデータを転送することが唯一のオプションです。

以上がHTML5をベースとしたWebクロスデバイス超音波通信ソリューションの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

See all articles