Html5 geolocation что это за программа

Содержание

HTML5 Geolocation API

С помощью HTML5 и JavaScript мы можем определить местоположение пользователя сайта или мобильного приложений, если он написан на языке программирования JavaScript. Это можно сделать с помощью HTML5 Geolocation API (HTML5 Геолокация).

В последних версиях современных браузеров доступен объект geolocation. Объект geolocation является свойством объекта navigator.
Мы можем проверить поддерживает браузер пользователя объект geolocation или нет.

if(navigator.geolocation) < alert(«Объект Geolocation поддерживается.»); >else

Если у объекта navigator есть свойства geolocation, то при проверке условий он вернет true, в противном случае — false.

У объекта geolocation есть 3 метода:

getCurrentPosition()
watchPosition()
clearWatch()

Но нас интересует метод getCurrentPosition(), и мы его будем использовать в данном уроке. С помощью метода getCurrentPosition() определяется местоположение пользователя.

16-1. HTML5 GeoLocation API

Нужно учесть, что метод getCurrentPosition() выполняется асинхронно. Это означает, что в нашем коде после вызова метода getCurrentPosition() интерпретатор пойдет выполнить код дальше, не ожидая определение местоположение пользователя. Но нам как то нужно знать когда будет выполнена определение местоположение. И для этого мы можем передать в метод getCurrentPosition() callback функцию (функция обратного вызова).

Функция обратного вызова принимает один аргумент — position. В данном аргументе придет результат выполнения метода getCurrentPosition().

if(navigator.geolocation)< navigator.geolocation.getCurrentPosition(function (position) < alert(«OK»); >); >else

При просмотре примера вверху окна браузера появится сообщение, что сайт хочет получить данные о вашем местоположение. Нужно разрешить сообщить местоположение.

После выполнение метода getCurrentPosition() в объект position придет два свойства — это timestamp и coords. свойства Свойства timestamp — это время определение местоположения пользователя в миллисекундах.

А в свойстве coords содержится в свою очередь свойства:

accuracy — точность (в метрах)
latitude — широта
longitude — долгота

if(navigator.geolocation)< navigator.geolocation.getCurrentPosition(function (position) < var latitude = position.coords.latitude; // широта var longitude = position.coords.longitude; // долгота var accuracy = position.coords.accuracy; // точность var result = «широта: » + latitude + «n долгота: » + longitude + «n точность: » + accuracy; alert(result); >); >else

После выполнение данного кода мы увидим окно с координатами и точность определение местоположения в метрах.

Определение местоположение пользователя с помощью HTML5 и JavaScript

HTML5 Geolocation을 이용해서 사용자 위치에서 거리순으로 목적지 정렬하기

Давайте немного улучшаем наш код.

Мы вынесли переменные и вывод результата в отдельную функцию (success), которая принимает один параметр / аргумент — position, и данную функцию (ссылка на функцию) мы отдаем в метод getCurrentPosition(). Но это еще не все, мы не обработали ошибки.

В втором параметре метода getCurrentPosition() будет приходить код ошибки, если будет ошибка. Давайте создадим еще одну функцию, которая будет принимать один параметр — код ошибки и выводит пользователю сообщение об ошибке.

function success(position) < var latitude = position.coords.latitude; // широта var longitude = position.coords.longitude; // долгота var accuracy = position.coords.accuracy; // точность var result = » широта: » + latitude + «n долгота: » + longitude + «n точность: » + accuracy; alert(result); >// Обработка ошибок function error(errorCode) < var msg = «»; switch (errorCode) < case 1: msg = «Нет разрешения»; // Пользователь не дал разрешения на определение местоположения break; case 2: msg = «Техническая ошибка»; break; case 3: msg = «Превышено время ожидания»; break; default: msg = «Что то случилось не так»; >alert(msg); > if(navigator.geolocation)

Если есть коды ошибок и значение по умолчанию, то мы можем сконфигурировать эти значение. Для этого мы можем передать третий аргумент в метод getCurrentPosition() — это некие настроечные параметры в виде объекта.

Параметры и значение по умолчанию:

enableHighAccuracy — по умолчанию false
timeout — по умолчанию 0 (ноль)
maximumAge — по умолчанию 0 (ноль)

enableHighAccuracy — Высокоточное определение местоположение пользователя (Обычно используется GPS, если есть). В основном это касается мобильных устройств.

timeout — Время запроса и ожидание на ответа. По умолчанию ноль, то есть он будет до бесконечности запрашивать, пока не получит ответ. Значение нужно передать в миллисекундах.

maximumAge — кэширование данных о местоположение пользвателя. Значение нужно передать в миллисекундах.

Любой из этих параметров мы можем передать в третий аргумента метода getCurrentPosition() как объект.

// тут наши функции . var params = < timeout: 10000, maximumAge: 60000 >; if(navigator.geolocation)

В втором уроке мы посмотрим как можно использовать Google Map API и Yandex Map API. Посмотрим как можно вывести местоположение пользователя на карту и как можно нарисовать маршруты.

Что за программа Html5 geolocation provider? Для чего она? Нужна ли?

Html5 geolocation provider от Altergeo — что это такое?

Как удалить Html5 geolocation provider?

комментировать
в избранное up —>
6 лет назад

Html5 geolocation provide (процесс html5locsvc.exe) устанавливается вместе mail.ru Agent. Эта программа используется для определения местоположения компьютера (определения географических координат).

Как таковая нам эта программа не нужна, поэтому можно зайти в Панель управления и удалить эту программу.

Источник: www.bolshoyvopros.ru

Русские Блоги

Принцип и применение геолокации HTML5 (геолокация HTML5) (вызов GPS)

ГеолокацияHTML5 Одна из его важных функций — обеспечение функции определения местоположения пользователя. С помощью этой функции можно разрабатывать приложения, основанные на информации о местоположении. Сегодняшняя статья знакомит васHTML5 Основные принципы определения географического местоположения и точность данных каждого браузера.

Прежде чем получить доступ к информации о местоположении, браузер спросит пользователя, следует ли делиться информацией о своем местоположении. Взяв в качестве примера браузер Chrome, если вы разрешите браузеру Chrome делиться вашим местоположением с веб-сайтом, браузер Chrome отправит информацию о локальной сети. в службу определения местоположения Google. Оцените свое местоположение. Затем браузер передаст ваше местоположение веб-сайту, который запросил использование вашего местоположения.

HTML5 Geolocation API очень прост в использовании, а основные методы вызова следующие:

if (navigator.geolocation) < navigator.geolocation.getCurrentPosition(locationSuccess, locationError,< // Указываем браузеру получить высокоточное местоположение, по умолчанию false enableHighAcuracy: true, // Указываем время ожидания для получения географического местоположения, по умолчанию не ограничено, единица измерения — миллисекунды timeout: 5000, // Самый длинный период действия. Этот параметр указывает, как долго нужно снова получить местоположение при повторном получении местоположения. maximumAge: 3000 >); >else

locationError — это функция обратного вызова, которая не может получить информацию о местоположении и может запрашивать информацию в соответствии с типом ошибки:

locationError: function(error) < switch(error.code) < case error.TIMEOUT: showError(«A timeout occured! Please try again!»); break; case error.POSITION_UNAVAILABLE: showError(‘We can’t detect your location. Sorry!’); break; case error.PERMISSION_DENIED: showError(‘Please allow geolocation access for this to work.’); break; case error.UNKNOWN_ERROR: showError(‘An unknown error occured!’); break; >>

locationSuccess — это функция обратного вызова для успешного получения информации о местоположении. Возвращенные данные содержат такую информацию, как широта и долгота. В сочетании с Google Map API информация о местоположении текущего пользователя может отображаться на карте следующим образом:

locationSuccess: function(position)< var coords = position.coords; var latlng = new google.maps.LatLng( // измерение coords.latitude, // точность coords.longitude ); var myOptions = < // Увеличение карты zoom: 12, // Центр карты устанавливается в указанную точку координат center: latlng, // Тип карты mapTypeId: google.maps.MapTypeId.ROADMAP >; // Создаем карту и выводим на страницу var myMap = new google.maps.Map( document.getElementById(«map»),myOptions ); // Создать отметку var marker = new google.maps.Marker(< // Отметка указанной точки координат широты и долготы position: latlng, // Указываем карту для разметки map: myMap >); // Создаем окно аннотации var infowindow = new google.maps.InfoWindow( < content: «Вы здесь
Latitude:» + coords.latitude+ »
Долгота:» + coords.longitude >); // Открываем окно аннотации infowindow.open(myMap,marker); >

Запросить разрешение пользователя

navigator.geolocation.getCurrentPosition(on_success, on_error, options);

getCurrentPosition Содержит три параметра, первые два — это имена функций, а третий — объект. Только первое из них необходимо. Когда вы выполняете приведенный выше оператор JavaScript, в браузере обычно появляется всплывающее окно с запросом пользователя, разрешить ли веб-сайту отслеживать информацию о местоположении; в то же время getCurrentPosition Функция вернется немедленно. Если пользователь решит разрешить, вышеуказанное будет выполнено on_success Функция, то вы действительно получаете информацию о местоположении (это причина, по которой этот вопрос разделен на два этапа — пользователю требуется определенное время, чтобы ответить на запрос, и информация о местоположении может занять определенное время для генерации, а функция нужно немедленно вернуть).

Обработка ошибок

среди них error.code Возможные значения перечислимого типа:

PERMISSION_DENIED : Пользователь отклонен
POSITION_UNAVAILABLE : Не удалось получить географическое местоположение (может быть из-за отсутствия у пользователя доступа в Интернет или спутникового поиска).
TIMEOUT : Истекло время определения географического местоположения

и error.message Это сообщение об ошибке, которое может помочь разработчикам в отладке (эта информация обычно не подходит для непосредственного отображения на веб-странице для просмотра пользователями).

Необязательный

Фактически, вышеуказанное getCurrentPosition Функция также поддерживает третий необязательный параметр — объект Option. Можно установить три параметра:

var options =

среди них timeout Он предназначен для установки времени ожидания для получения географического местоположения (единица измерения — миллисекунды, время, разрешенное пользователем, не учитывается); и maximumAge Указывает, что устройству разрешено считывать местоположение из кеша, время истечения срока действия кеша в миллисекундах установлено на 0 Отключить чтение кеша. Если возвращается время в кеше, оно будет timestamp Отражался в нем.

Список совместимости

Браузеры / терминалы / операционные системы, поддерживающие API геолокации:

Firefox 3.5+
Google Chrome 5.0+
Safari 5.0+
Opera 10.60+
Internet Explorer 9.0+
Android 2.0+
iOS 3.0+
Opera Mobile 10.1+
Blackberry OS 6

Как использовать HTML5 Geolocation API и принцип его реализации

На прошлой неделе проект не был загружен, поэтому я потратил время на изучение геолокации HTML5.

В HTML5 геолокация появляется как атрибут навигатора, который сам по себе является объектом с тремя методами:

Конкретное использование выглядит следующим образом:

// Определяем, поддерживает ли браузер геолокацию if(navigator.geolocation)< // getCurrentPosition поддерживает три параметра // getSuccess — функция обратного вызова для успешного выполнения // getError — это функция обратного вызова с ошибкой // getOptions — это объект, используемый для установки параметров getCurrentPosition // Последние два параметра не обязательны var getOptions = < // Следует ли использовать высокоточное оборудование, такое как GPS. По умолчанию верно enableHighAccuracy:true, // Время ожидания в миллисекундах, по умолчанию 0 timeout:5000, // Используем кэшированные данные в течение установленного времени в миллисекундах // По умолчанию 0, то есть всегда запрашивать новые данные // Если установлено значение Infinity, всегда использовать кэшированные данные maximumAge:0 >; // Успешный обратный вызов function getSuccess(position) < // После успешного выполнения getCurrentPosition, getSuccess будет передан объект позиции // позиция имеет два атрибута: координаты и отметку времени // timeStamp представляет время, когда были созданы географические данные? ? ? ? ? ? // координаты — это объект, содержащий данные о географическом местоположении console.log(position.timeStamp); // предполагаемая широта console.log(position.coords.latitude); // Расчетная долгота console.log(position.coords.longitude); // Расчетная высота (значение высоты в метрах) console.log(position.coords.altitude); // Расчетная точность полученных долготы и широты, в метрах console.log(position.coords.accuracy); // Расчетная точность полученной высоты в метрах console.log(position.coords.altitudeAccuracy); // Текущее направление движения хост-устройства в градусах, рассчитанное по часовой стрелке относительно истинного севера console.log(position.coords.heading); // Текущая путевая скорость устройства в метрах / секунду console.log(position.coords.speed); // В дополнение к приведенным выше результатам Firefox также предоставляет адрес другого атрибута if(position.address)< // Через адрес вы можете получить страну, провинцию и город console.log(position.address.country); console.log(position.address.province); console.log(position.address.city); >> // Обратный вызов при ошибке function getError(error) < // Функция обратного вызова, которая не может быть выполнена, примет объект ошибки в качестве параметра // ошибка имеет атрибут кода и три постоянных атрибута TIMEOUT, PERMISSION_DENIED, POSITION_UNAVAILABLE // В случае сбоя выполнения атрибут кода будет указывать на одну из трех констант, чтобы указать причину ошибки switch(error.code)< case error.TIMEOUT: console.log («тайм-аут»); break; case error.PERMISSION_DENIED: console.log («Пользователь отказался указать географическое местоположение»); break; case error.POSITION_UNAVAILABLE: console.log («Географическое положение недоступно»); break; default: break; >> navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions); // Метод watchPosition также может устанавливать три параметра // Метод использования такой же, как и метод getCurrentPosition, но эффект выполнения другой. // getCurrentPosition выполняется только один раз // watchPosition будет выполняться при изменении положения устройства var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions); // clearwatch используется для завершения метода watchPosition navigator.geolocation.clearWatch(watcher_id); >

Использование геолокации несложное, но интереснее принцип ее реализации.

Наблюдая за использованием геолокации, мы можем обнаружить, что этот api может вызывать многие системные устройства, такие как GPS, WIFI, Bluetooth и т. Д., С разрешения пользователя.

W3C определяет геолокацию следующим образом:

The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device’s actual location.

Как упоминалось здесь, источники информации о местоположении для геолокации включают GPS, IP-адрес, RFID, MAC-адрес WIFI и Bluetooth, а также идентификатор GSM / CDMS и так далее. В спецификации не указан порядок использования этих устройств. При реализации HTML5 мобильные устройства, такие как мобильные телефоны, конечно, сначала будут использовать GPS-позиционирование. Для ноутбуков и некоторых планшетов наиболее точным позиционированием является WIFI. Что касается настольных компьютеров с доступом в Интернет. кабели, обычно только Можно использовать IP для определения местоположения, эта точность самая низкая.

Среди этих методов лучше всего понимается определение местоположения по GPS, а данные о местоположении напрямую предоставляются спутниками. Позиционирование WIFI и IP-адреса не поддерживается самим браузером. В обоих методах окружающая информация о маршрутизации, собранная IP-адресом или сигналом WIFI, должна быть загружена на сервер, информация о местоположении рассчитывается по запросу сервера, а затем возвращается в браузер. Итак, кто будет предоставлять эти службы запросов?

При первом взгляде на Chrome очевидно, что это должен быть сервис, предоставляемый самим Google. Используя собственный метод захвата пакетов Chrome (chrome: // net-internals /), вы можете видеть, что при использовании геолокации Chrome отправляет запрос в интерфейс www.googleapis.com/geolocation/v1/geolocate, потому что запрос использует spdy Он был зашифрован, поэтому конкретный контент нельзя увидеть.Можно определить только одно: когда Wi-Fi подключен к сети, данные передаются по почте, а при использовании сетевого кабеля используется get.

Firefox также использует сервис Google, но он отличается от интерфейса, используемого в Chrome. Это https://maps.googleapis.com/maps/api/browserlocation/json.

Запрошенные данные: browser = firefox wifi = mac: xx-xx-xx-xx-xx- xx% 7Cssid: xxxxxxx% 7Css: -43 wifi = mac: xx-xx-xx-xx-xx-xx% 7Cssid: xxxxxxx% 7Css: -43 wifi = mac: xx-xx-xx-xx-xx-xx% 7Cssid: xxxxxxx% 7Css: -60 wifi = mac: xx-xx-xx-xx-xx-xx% 7Cssid: xxxxxxx% 7Css: -63 wifi = mac: xx-xx-xx-xx-xx-xx% 7Cssid: xxxxxxx% 7Css: -67 wifi = mac: xx-xx-xx-xx-xx-xx% 7Cssid: xxxxxxx% 7Css: -67 wifi = mac: xx-xx-xx-xx-xx-xx% 7Cssid: xxxxxxx% 7Css: -74 wifi = mac: xx-xx-xx-xx-xx-xx% 7Cssid: xxxxxxx% 7Css: -84 https://russianblogs.com/article/92581545779/» target=»_blank»]russianblogs.com[/mask_link]

Как разобраться в API HTML?

Автор статьи, перевод которой мы сегодня публикуем, решил разобрать несколько HTML5-API и поговорить об их возможностях, о том, для чего они созданы, об особенностях их использования и об их ограничениях.

Что такое API?

Сокращение API расшифровывается как Application Programming Interface, что обычно переводится как «программный интерфейс приложения» или «интерфейс прикладного программирования». API широко используются в программировании для организации взаимодействия серверных приложений. API позволяют двум сервисам взаимодействовать друг с другом, не зная при этом о деталях реализации друг друга. API — это важнейший аспект проектирования систем, имеющий отношение к абстракции, к одной из фундаментальных концепций информатики.

API HTML5

Существует точка зрения, в соответствии с которой HTML5, язык разметки, не имеет программных интерфейсов. А «API HTML» — это, на самом деле, JavaScript-API, выдающие ответы, представленные в формате HTML. Это так из-за того, что API обычно создают для организации взаимодействия серверных программ.

Это заблуждение можно связать с тем фактом, что спецификация HTML5, определённая W3C, в основном, касается семантических элементов HTML. Большинство рассмотренных возможностей API HTML воспринимаются как продвинутые способы работы с HTML, а не как интерфейсы прикладного программирования. Спецификации API HTML5 можно найти в документации WHATWG (Web Hypertext Application Technology Working Group).

Если почитать документацию WHATWG, то можно заметить, что JavaScript там практически не упоминается, и что для понимания API HTML5 не нужно знать JavaScript.

Вот что об этом пишет Леа Веру в материале об API HTML: «В API HTML определения и протоколы находятся в самом HTML. Инструменты обращаются к HTML за конфигурационными сведениями. API HTML обычно представлены определёнными наборами классов и атрибутов, которые можно использовать в обычном HTML-коде».

Фронтенд-разработчики обычно бегло знакомятся с API HTML прежде чем создавать UI-библиотеки, заменяющие их возможности. Здесь мы поговорим о некоторых API HTML.

API Geolocation

API Geolocation позволяет веб-сервисам получать сведения о географическом положении пользователи. Из-за того, что подобные сведения ставят под угрозу безопасность пользователя и его личные данные, эти сведения не доступны приложениям до тех пор, пока пользователь не даст согласие на работу с ними. После того, как согласие дано, что обычно выражается в щелчке пользователя по соответствующей кнопке особого диалогового окна, сведения о его местоположении могут быть получены и использованы приложением.

Географическая информация может оказаться очень ценной для некоторых приложений, функционирование которых завязано на знании о том, где именно находится пользователь. Это, например, службы медицинской помощи, спортивные приложения, приложения-карты, даже маркетинговые приложения. Все эти приложения могут получить большую пользу от знания того, где находится пользователь, и того, что находится поблизости от него.

API Geolocation HTML5 даёт более точную информацию о местоположении пользователя в том случае, если на устройстве пользователя (на мобильном, например), включён GPS и доступны другие средства для определения местоположения. Сведения о местоположении пользователя поступают в приложение в виде географических координат, представленных широтой и долготой.

При работе с API Geolocation используются методы, наподобие getCurrentPosition() , возвращающие сведения о текущем местоположении пользователя. Подобные механизмы используются и для вывода сведений о пользователе на электронной карте, вроде той, что имеется в Google Maps. Метод watchPosition() возвращает сведения о текущем местоположении пользователя и обновляет сведения при перемещении пользователя. Это — весьма полезный метод, так как он являет собой пример динамических возможностей рассматриваемого API, давая программисту большую гибкость. Метод clearWatch() останавливает наблюдение за перемещениями пользователя, инициированное методом watchPosition() . Например, возможен сценарий, когда наблюдение за местоположением пользователя останавливается после того, как он, построив с помощью программы маршрут и руководствуясь в пути её указаниями, достиг пункта назначения.

Если говорить об ограничениях API Geolocation, то можно отметить следующие:

Оно работает лишь на защищённых сайтах, то есть на тех, где используется протокол HTTPS.
Оно не будет работать на старых телефонах или в устаревших браузерах.
Свежие данные о местоположении пользователя перестают поступать в приложение после того, как окно браузера будет минимизировано, или после того, как браузер будет переведён в фоновый режим работы.
Информация, получаемая приложением, её точность и частота обновления, зависят от соответствующих системных сервисов и от того, какие именно методы используются для получения сведений о местоположении пользователя.

API Drag and Drop

Перетаскивание объектов (Drag and Drop, DnD), это простая процедура, позволяющая пользователю перемещать элементы из одного места экрана программы в другое. В данном случае речь идёт о включении возможности перетаскивания элементов. Функционал этого API позволяет программистам создавать простые онлайн-игры, вроде шахмат, где можно перетаскивать по доске шахматные фигуры. Процесс перетаскивания элементов по экрану устроен довольно просто:

Пользователь выделяет элемент, который хочет перетащить, нажимает на кнопку мыши.
После этого пользователь перетаскивает элемент в новое место.
Пользователь отпускает кнопку мыши.

Для того чтобы элемент можно было бы перетаскивать, его атрибут draggable должен быть установлен в true :

Далее, настраивают обработчики событий наподобие ondragstart , ondragover и ondrop . Первый срабатывает в начале процесса перетаскивания. Второй — в момент, когда перетаскиваемый объект находится над целевым элементом. Третий — в конце процесса перетаскивания элемента.

Если реализовывать DnD-механизмы с использованием API HTML5, можно ожидать полной поддержки этих механизмах в специфических окружениях, а так же минимизации разного рода неожиданностей, которые могут возникнуть в процессе перетаскивания элементов. Одним из ограничений данного API можно назвать тот факт, что он не даёт возможностей управлять происходящим в процессе перетаскивания элемента.

API Web Storage

Появление API Web Storage сыграло очень важную роль в веб-разработке, так как эти API позволяют веб-приложениям сохранять различные данные в хранилище браузера. Локальное хранение данных и возможность организации доступа к ним без необходимости предварительной передачи этих данных по сети открывают для приложения массу ценных возможностей. До появления API Web Storage HTML5 разработчики не могли хранить локально значительные объёмы информации. Данные пользователя приходилось сохранять в куки-файлах. А ведь эти файлы ориентированы на организацию взаимодействия с сервером и их нужно передавать на сервер в каждом HTTP-запросе.

API Web Storage предлагают разработчикам возможность хранения на клиенте значительных объёмов информации, которая изменяется сравнительно редко, и передача которой по сети означает необходимость неоправданной траты времени и системных ресурсов. У API Web Storage есть и другие преимущества перед куки-файлами, например — это возможность хранения больших объёмов информации, это улучшения в сфере безопасности. В результате API Web Storage нашёл применение во многих сценариях.

API Web Storage предлагает разработчику два уникальных механизма, направленных на решение различных задач. Это — локальное хранилище (local storage) и сессионное хранилище (session storage).

В локальном хранилище данные хранятся долговременно. Например, пользовательские данные из него не удаляются даже после закрытия и открытия страницы или после обновления страницы. Удаление данных из такого хранилища выполняется явным образом. Для работы с этим хранилищем используется объект localStorage .

В сессионном хранилище, с другой стороны, данные хранятся временно. Они удаляются в том случае, если браузер закрывают, или если обновляют страницу. Для работы с сессионным хранилищем применяется объект sessionStorage .

API Web Speech

API Web Speech состоит из двух основных частей. Это — SpeechSynthesis (синтез речи, эта технология известна как Text to Speech или TTS) и SpeechRecognition (распознавание речи). Реализация API Web Speech в браузерах дала возможность организовывать речевое взаимодействия пользователя и браузера, выполняемое посредством голосовых команд. Это, например, голосовой поиск, голосовая навигация, голосовой набор текста.

При использовании этого API всё ещё необходимо пользоваться префиксами браузеров, оно доступно лишь в Chrome и Firefox. Оно, кроме того, использует серверный API Google для распознавания речи. Из-за того, что этот API основан на взаимодействии с серверными ресурсами, пользоваться им можно лишь при подключении к интернету.

Работа с API распознавания речи осуществляется через интерфейс SpeechRecognition . В распоряжении разработчика, пользующегося объектом, созданным с помощью этого интерфейса, имеется набор методов, вроде start() , свойств, наподобие lang , и событий, таких, как onstart и onend .

API WebRTC

API WebRTC предназначен для организации взаимодействия систем в режиме реального времени. Возможности этого API позволяют реализовывать пиринговый обмен файлами между пользователями, проводить телеконференции, выполнять потоковую передачу звука и видеоизображения.

API WebRTC позволяет работать с аудио- и видео-потоками устройств, подключённых к компьютеру, таких, как видеокамеры и микрофоны, без необходимости использования сторонних плагинов.

Этот API поддерживают все современные браузеры и даже клиенты для мобильных платформ, таких, как Android и iOS.

Модель обмена данными, реализованная в API WebRTC отличается от других коммуникационных моделей. Для обеспечения работы этого API в браузерах имеются реализации других API. Вот некоторые из них:

MediaStream — представляет поток медиаданных.
RTCPeerConnection — представляет собой WebRTC-соединение между локальной и удалённой системами.
RTCDataChannel — представляет сетевой канал, который можно использовать для организации двустороннего пирингового обмена произвольными данными.

Другие API

Мы рассмотрели лишь некоторые API, описанные в спецификациях W3C и WHATWG. Существуют и многие другие API, о которых стоит упомянуть. Среди них отметим следующие:

API Canvas 2D Context позволяет формировать в браузере двумерные изображения. Нужно отметить, что в существующем стандарте WHATWG сказано, что в настоящее время активная поддержка этого API прекращена.
API Battery Status позволяет веб-сайту вносить коррективы в свою работу, ориентируясь на уровень заряда батарей устройства. Если заряда осталось мало, то некоторые возможности сайта могут быть отключены.
API Media представляют собой браузерную реализацию средств для работы со звуком и видео. При работе с этим API используются методы наподобие onplay() , canPlayType() , pause() , play() и load() .
API Web Workers позволяет запускать JavaScript-код в фоновых потоках, не нагружая главный поток сложными вычислениями и не блокируя работу пользовательского интерфейса, а значит — не мешая пользователю работать с сайтом.
API File позволяет браузеру загружать и обрабатывать файлы из локальной файловой системы. Для выполнения подобных действий необходимо разрешение, полученное от пользователя. Кроме того, этот API позволяет пользователям выбирать несколько файлов. Одна из сильных сторон этого API заключается в том, что он поддерживает технологию DnD, позволяя пользователям перетаскивать файлы на веб-страницы для выполнения неких действий с этими файлами.
API History предназначен для работы с историей посещения страниц, хранимой браузером.
API Server-Sent Events (SSE) позволяет веб-страницам получать данные, отправляемые им по инициативе серверов.

Итоги

За HTML5-атрибутами скрываются мощные API, упрощающие разработку веб-проектов. Они позволяют сделать работу со страницами более интерактивной. Но, к сожалению, на них часто не обращают внимания, отдавая предпочтение JavaScript-реализациям стандартных механизмов.

В разговоре об HTML5-API стоит учитывать тот факт, что они постоянно развиваются. А по мере их развития сглаживаются различия в их реализации в разных браузерах.

Вот что сказано об HTML5-API в одной публикации InfoWorld: «API HTML5, конечно, нельзя назвать универсальным средством для разработки мобильных приложений. Всему своё время и место. Это касается и HTML5-приложений, и нативных приложений, которые всё ещё актуальны».

Не каждая веб-страница и не каждое веб-приложение нуждается в HTML5-API. Но понимание того, что они такое, того, как они работают, знание их сильных и слабых сторон поможет программисту принять решение о том, что именно лучше всего подходит для решения стоящих перед ним задач.

Какими API HTML5 вы пользуетесь чаще всего?

Источник: habr.com

HTML5 Geolocation API. Обнаружение местоположения с помощью JavaScript

HTML5 Geolocation API. Обнаружение местоположения пользователя

Большинство современных устройств способны обнаруживать свое собственное местоположение через GPS, Wi-Fi, или IP геолокацию.

В приведенной ниже статье мы расскажем как можно определить местоположение пользовательского устройства с помощью JavaScript, без каких-либо внешних зависимостей или сторонних сервисов.

Источники местоположения

JavaScript предлагает простой, но мощный инструмент для обнаружения устройств с помощью Geolocation API. Она состоит из небольшого набора удобных в использовании методов, которые могут получить позицию устройства через все три ранее упомянутых сервиса:

GPS – Используется на мобильных устройствах, точность до 10 метров.
Wi-Fi – доступна на большинстве подключенных к интернету устройствах, также очень точна.
IP геолокация – привязана к региону и ненадежна, используется в качестве наихудшего сценария, когда первые два потерпят неудачу.

При запросе гео-данных, браузер будет пытаться использовать все три способа. Результаты чаще используются от Wi-Fi источника, поскольку в этом случае данные определяются быстрее, чем с помощью GPS. Кроме того, этот способ более точен, чем IP geolcation.

Использование Geolocation API

Geolocation API имеет полную кроссбраузерную поддержку:

Тем не менее, не помешает убедиться, что браузер пользователя поддерживает HTML5 Geolocation API.

if (navigator.geolocation) < // Геолокация доступна >else < // Геолокация не доступна >

Внутри объекта navigator.geolocation размещаются следующие API-методы:

Geolocation.getCurrentPosition() – определяет текущую позицию устройства.
Geolocation.watchPosition() – отслеживает изменения в местоположении и вызывает функцию обратного вызова.
Geolocation.clearWatch() – удаляет обработчик события watchPosition.

Методы getCurrentPosition() и watchPosition() используются для схожих целей. Они обе работают в асинхронном режиме, пытаясь получить позицию устройства и в зависимости от результата вызвать функцию обратного вызова или функцию обработки ошибки, если она предусмотрена разработчиком.

navigator.geolocation.getCurrentPosition( // Функция обратного вызова при успешном извлечении локации function(position) < /* В объекте position хранится информация о позиции устройства: position = < coords: < latitude — Широта longitude — Долгота altitude — Высота в метрах над уровнем моря accuracy — Погрешность в метрах altitudeAccuracy — Погрешность высоты над уровнем моря в метрах heading — Направление устройства по отношению к северу speed — Скорость в метрах в секунду >timestamp — Время извлечения информации. > */ >, // Функция обратного вызова при неуспешном извлечении локации function(error) < /* При неудаче, будет доступен объект error: error = < code — Тип ошибки 1 — PERMISSION_DENIED 2 — POSITION_UNAVAILABLE 3 — TIMEOUT message — Детальная информация. >*/ > );

Как видите, Geolocation API довольно легко в использовании. Мы просто должны вызвать правильный метод, получить координаты, а затем делать с ними все, что захотим.

Запрос разрешения на определение положения

Поскольку Geolocation API использует персональную информацию когда приложение пытается получить доступ к нему в первый раз, то мы увидим диалоговое окно с запросом разрешения. Это гарантирует конфиденциальность личных данных пользователя.

Запрос разрешения в Chrome Запрос разрешения в Chrome под Android

Браузер, как правило, берет на себя для отображения диалогового окна, но разрешение также можно запросить программным способом. Это может пригодится в случае отказа пользователя раскрыть свое местоположение и которому браузер больше не будет докучать с подобными просьбами.

Безопасные хосты

Другой защитной мерой является использование HTTPS-соединения. В связи с новой политики веб-безопасности, Google Chrome (для настольных и мобильных версий) больше не позволяет использовать незащищенные хосты для запуска Geolocation API. Вместо этого, разработчики, которые хотят использовать эту функцию должны пользоваться протоколом HTTPS, что сводит к минимуму риски, связанные с кражей или злоупотреблением информацией.

Подробнее об этом можно прочесть в посте разработчиков Google .

Пример работы с Geolocation API

Чтобы продемонстрировать как все это работает, мы создали простое приложение, которое состоит из одной кнопки, определяющей при нажатии на нее координаты устройства и показывающее его положение на карте.

findMeButton.on(‘click’, function()< navigator.geolocation.getCurrentPosition(function(position) < // Текущие координаты var lat = position.coords.latitude; var lng = position.coords.longitude; // Создаем новую карту, помещаем маркер в местонахождение устр-ва var map = new GMaps(< el: ‘#map’, lat: lat, lng: lng >); map.addMarker(< lat: lat, lng: lng >); >); >);

Gelocation API — надежный и готовый к использованию инструмент, поэтому мы рекомендуем вам поиграть с ним и посмотреть на что он способен. Если вы видели оригинальные использования этой технологии в Интернете, или сделали крутой проектом самостоятельно, — поделитесь с нами, нам было бы очень интересно!