> 웹 프론트엔드 > H5 튜토리얼 > HTML5 기반의 웹 크로스 디바이스 초음파 통신 솔루션에 대한 자세한 설명

HTML5 기반의 웹 크로스 디바이스 초음파 통신 솔루션에 대한 자세한 설명

黄舟
풀어 주다: 2017-03-09 16:09:40
원래의
1662명이 탐색했습니다.

HTML5 기반 웹 크로스디바이스 초음파 통신 솔루션 상세설명 :

서문 : Chirp iPhone에서 파일 오디오 전송이 시작되었습니다. 더 이상 전송하는 데 MMS, Bluetooth 페어링 또는 IM이 필요하지 않습니다. 데이터. 새들의 지저귀는 소리를 통해 데이터를 공유하는데, 이는 간단하고 흥미롭고 일대다 공유를 빠르게 달성할 수 있습니다.

또한 Alipay는 휴대폰을 사용하여 거래 비밀번호로 초음파를 단말기에 전송하여 추가 결제를 완료하는 '음파 결제'를 홍보하려고 했습니다. 거래. 그러나 Alipay의 기술은 현재 결제에만 사용되고 있으며, 이를 사용하려면 음파 결제를 허용하는 특정 자동 판매기가 필요합니다.

"게임 및 대화형 앱을 위한 고급 사운드 - WebAudio API"의 저자 Boris Smus는 HTML5 웹을 사용합니다. 오디오 API을 기반으로 초음파 상호 연결 솔루션을 구현하므로 별도의 클라이언트 설치도 필요 없으며, 블루투스나 NFC 지원으로 브라우저를 사용하는 두 장치를 연결하여 인터넷에 액세스하고 사진, 음악, 비디오 및 기타 파일을 전송할 수 있습니다. 이 아이디어는 멋지고 의 기능과 응용 분야에서 큰 진전을 이루는 데 도움이 됩니다. (이 아이디어는 여러분의 것일 수도 있습니다.) 상상할 수 없는, 들어본 적도 없는), 구체적인 원칙과 구현 과정을 살펴보겠습니다.

…………………………✄…………………………………………………………………… ……화려한 파티션 라인

주머니 속의 휴대폰은 멋지고, 아름답고, 많은 기능을 갖춘 도구입니다. 그러나 TV나 노트북과 같은 다른 장치와 통신하려는 경우 사용자 경험이 크게 저하됩니다. Bill Buxton은 이 주제에 관해 매우 감동적인 연설을 통해 하이테크 진화의 세 단계를 설명했습니다.

>                                         >기기 부드러움: 우수한 사용자 경험

           

남자 와이 장치가 함께 작동  

iPhone 출시로 2

단계에 본격적으로 들어섰지만, 장치를 연결하는 것은 고통입니다. 이를 달성하는 방법에는 여러 가지가 있습니다: 블루투스, 블루투스

LE, WiFi 직접, 로컬WiFi 네트워크 검색 등. 이 기사에서는 완전히 예상치 못한 각도에서 문제를 다루고 있습니다. 즉, 초음파를 사용하여 인접한 장치 간에 데이터를 브로드캐스팅하고 전송하는 것입니다. 가장 중요한 점은 이 접근 방식이 Web Audio API를 사용하여 순수한 웹 애플리케이션의 연결을 가능하게 한다는 것입니다. 데모영상

바벨의 장치

Airplay Chromecast는 동일한 생태계(예: Apple 또는 Google) 내에서 기기를 연결하는 문제를 해결하는 좋은 방법입니다. 그러나 일반적인 문제는 여전히 파악하기 어렵습니다.

가능한 기술적인 방법이 많기 때문에 연결하려는 장비 간에 공통된 방법이 없는 경우가 발생할 수 있습니다. 두 장치에 Bluetooth가 있는 경우에도 하나는 구성해야 하지만 다른 하나는 구성하지 않거나 다른 버전의 표준을 지원합니다. 이는 특히 Bluetooth에서 일반적입니다. 많은 장치는 하드웨어에서 Bluetooth 4.0(일명 BTLE)을 지원하지만 많은 장치는 그렇지 않습니다. 이 최신 프로토콜은 여러 가지 이유로 지원되지 않습니다.

 에서는 저급 기기의 연결로 인해API는 보안 샌드박스 문제로 제공되지 않습니다. 그리고 의 발전이 매우 느리기 때문에 이러한 상황이 단시간에 해결될 수 있다고는 상상하기 어렵습니다.

재미있는 데이터 전송

Electric Imp The Blinkup은 터미널 간에 통신할 수 있는 흥미로운 방법입니다. 일련의 플래시를 사용하여 스마트폰과 Imp를 켜줍니다. 이 장치는 작은 SD 카드처럼 생겼으며 광 센서 사이에 데이터를 전송합니다.                            전화 접속 모뎀도 비슷한 기능을 수행합니다. 아날로그 전화선의 디지털 데이터를 인코딩하고 디코딩합니다. 짜증나는 연결 소음을 기억하시나요? 전화 접속 모뎀은 스피커를 켜서 사용자에게 악수 중임을 알려줍니다. 잊어버린 경우 여기

에서 검토할 수 있습니다. 오늘날의 아날로그 전화기에서도 키패드의 숫자 키를 누를 때 들리는 소리는 전화 시스템이 아날로그에서 디지털로 변환하는 데 사용하는 주파수와 동일합니다. 이 변환은 듀얼 톤 다중 주파수 신호(DTMF)를 사용합니다. 여러분의 휴대폰을 비롯한 주변의 많은 장비들은 스피커이자 마이크입니다. 두 하드웨어 모두 모뎀이 전화선에서 수행하는 것과 유사하게 소리를 사용하여 데이터를 보내고 받을 수 있습니다. 더 좋은 점은 운영 체제가 충분히 높은 빈도로 전송 및 수신을 지원하는 경우 자동 데이터 채널을 만들 수 있다는 것입니다.

                                                                                                                소리를 통해 데이터를 인코딩하는 것은 새로운 것이 아닙니다. ​​오디오 워터마크

의 아이디어는 청취자가 인간의 수단으로는 인식할 수 없지만 다른 장치에서는 이해할 수 있는 시그니처를 음악에 인코딩하는 것입니다. 이는 불법 복제를 방지하는 현명한 방법입니다.

대부분의 일반 스피커는 44.1KHz 샘플링 속도로 사운드를 생성할 수 있습니다(최고 주파수는 22KHz - 섀넌 샘플링 정리에 따름). 이를 통해 데이터를 소리로 인코딩할 수 있을 뿐만 아니라 성인이 들을 수 없는 오디오도 생성할 수 있습니다. 그러나 어린이와 동물은 여전히 ​​들을 수 있습니다 :)

기술적으로 마이크가 스피커와 호환되지 않는 경우가 있습니다. 특히 모바일에서는 특히 그렇습니다. 전화 , 사람들이 말하는 데 최적화되어 있기 때문에 낮은 샘플링 속도를 사용하여 사운드를 더 좋게 만듭니다. 다른 경우에는 하드웨어가 호환되더라도 전원 공급을 보장하기 위해 펌웨어를 더 낮은 샘플링 속도로 실행해야 합니다. 이 경우 장치는 음파를 수신할 수 없으며 사운드 기반 연결은 한 방향으로만 작동합니다.

SONICNET.JS, 웹 오디오

 이러한 개념을 설명하기 위해 사운드 데이터를 통해 보내고 받을 수 있는 JavaScript 라이브러리를 구축했습니다. 내 방법은 복잡한 오디오 워터마킹 기술을 배울 필요도 없고 DTMF보다 훨씬 간단하다. 기본적으로 범위가 사용되는 빈도와 전송할 수 있는 문자 집합을 지정합니다. 스펙트럼은 지정된 시작 및 끝 문자에 해당하는 범위로 나누어지며, 각 문자 / 코드는 전체 주파수 범위의 일부에 해당합니다.

                                                                                   >                                               . 수신측에서는 신호에 대해 불연속 푸리에 변환을 수행하고(Yujie의 메모: 제 학부 전공은 정보 통신 공학입니다. 디지털 신호 처리를 공부한 친구들은 이 사실을 잘 알고 있을 것입니다) 지정된 주파수 범위 내에서 피크를 찾습니다. 신호 간격 내에서 피크를 찾은 후 주파수를 다시 문자로 변환합니다. 이는 기본적으로 모노톤 다중 주파수 신호(STMF) 방식입니다.                                                                                    

우리는 인접한 반복 문자를 피하기 위해 간단한 체계를 사용했습니다.

소켓 API음향 통신에 사용하도록 설계했습니다. 클라이언트 코드는 다음과 같습니다.

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.

물론 이를 사용하려면 웹 오디오를 구현해야 합니다(대부분 OscillatorNode , 수신 측에서 AnalyserNode )를 사용하세요. 저는 MacbookChrome에서 Chrome으로 사용해 보았습니다. 🎜> Mac Chrome에서 Android Chrome으로 케이스를 전송합니다. 나는 이 아이디어를 설명하기 위해 몇 가지 예를 썼습니다. 이 기사의 시작 부분에서 시연된 영상

에 등장합니다. 첫 번째 예를 사용하면 한 장치에서 다른 장치로 이모티콘을 보낼 수 있습니다.

6 문자만 포함하는 작은 문자 집합을 사용하며 각 문자는 1 표현식에 해당합니다. 6개의 표현 중 하나를 선택하면 해당 캐릭터가 소닉 네트워크를 통해 전송되고, 상대방에서 수신되어 표시됩니다. sonicnet.js

에 대한 보다 현실적인 애플리케이션은

채팅 신청 고유한 5자리 토큰을 생성하고 2개 기기에서 사용하여 연결을 만듭니다. 이는 WebSocket을 통해 두 장치 간에 프록시 연결을 설정하는 페어링 서버의 도움으로 수행됩니다. 연결이 설정되면 대화 자체가 WebSocket을 통해 전송됩니다. 서버 코드nodejitsu에서 호스팅됩니다.                                                                                                         >이런 애플리케이션이 가능하도록 진화했는데, 이는 상당한 진전입니다. 저는 사물 인터넷의 sonicnet.js

구현에 매료되었습니다. 이는 기기를 페어링하는 데 사용할 수 있는 순수한 기술입니다. 유비쿼터스 브라우저와 오디오 하드웨어의 결합은 큰 승리가 될 것이며, 하드웨어 수준에서도

플랫폼은 블루투스나 기타 근거리 연결 기술을 기다릴 필요가 없습니다. 전혀 성숙해요.

이 기사가 관심을 끌었다면 sonicnet.js를 사용하여 애플리케이션을 작성할 수 있습니다. 앞서 언급했듯이 하드웨어 / 펌웨어 제한으로 인해 모든 기기에서 고주파 오디오 수신이 가능하지 않으므로 어떤 것이 사용 가능하고 어떤 것이 불가능한지 알고 싶습니다. . 내 기대는 대부분의 휴대폰은 전송만 할 수 있지만 대부분의 노트북은 수신과 전송을 동시에 할 수 있다는 것입니다. 기기에서 이모티콘 데모를 사용해 보셨다면 이 양식을 작성해 주세요. 이 글을 작성하는 현재 Android 플랫폼의 Chrome 베타 버전에서는 실제 버전을 지원하지 않습니다. -시간 입력이므로 휴대폰에서 노트북으로 데이터를 전송하는 것이 유일한 옵션입니다.


위 내용은 HTML5 기반의 웹 크로스 디바이스 초음파 통신 솔루션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿