Как обрабатывать разрешения на ввод микрофона и распознавания речи в расширениях Chrome

1656561247 kak obrabatyvat razresheniya na vvod mikrofona i raspoznavaniya rechi v

от Палаша Танея

1*kCWG1pjJyxUfKwblYn1gKA

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

Настройка разрешений на запись с микрофона в расширении Chrome является серой зоной. Официально документированного способа это сделать не существует, и разработчики вынуждены использовать «взлом», чтобы получить разрешения на микрофон для своего расширения Chrome.

В этой краткой статье мы используем options.html страницу, чтобы получить разрешения на микрофон и использовать популярные annyang.js библиотека для обнаружения речи от пользователя.

1. Создание сценария и страницы триггера разрешений

Чтобы обойти ограничения Chrome, мы используем веб-страницу из нашего расширения, например options.html иpopup.html для получения разрешений на микрофон для всего расширения.

Сначала нам нужно создать JavaScript, чтобы получить разрешения микрофона на веб-странице. Я создал минимальный файл, запрашивающий разрешение на использование микрофона из Chrome.

$(document).ready(function(){
    navigator.mediaDevices.getUserMedia({audio: true})
});

Если вы не сторонник использования JQuery, вы можете вставить этот JS код в конец файла страницы HTML, который вы собираетесь использовать как триггер разрешения.

Для нашего расширения TalkToMe мы использовали options.html как наша страница активации разрешений.

2. Автоматическое открытие страницы триггера

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

setTimeout(() => {
    navigator.mediaDevices.getUserMedia({ audio: true })
    .catch(function() {
        chrome.tabs.create({
            url: chrome.extension.getURL("options.html"),
            selected: true
        })
    });
}, 100);

Он пытается получить доступ к микрофону каждые 100 мс и открывает страницу триггера разрешения, если запрос отклонен от Chrome.

Чтобы сценарий работал, вам нужно добавить его в свой manifest.json с другими фоновыми сценариями.

... 

"background": {
    "scripts": [
      ..
      "js/auto-trigger.js", // add the script here
      ..
    ],
    "persistent": false
  },

...

3. Подключение Annyang для распознавания речи

Annyang предоставляет универсальную библиотеку для распознавания речи, и она на 100% бесплатна в использовании.

Он работает на основе командной структуры, поскольку вызывает функции на основе речи пользователя. Эта функция идеально подходит для TalkToMe.

Вы можете добавить annyang.js кода к фоновому сценарию и начните его использовать. Здесь я показываю вам пример Hello World из документов.

if (annyang) {
  // Let's define a command.
  var commands = {
    'hello': function() { alert('Hello world!'); }
  };

  // Add our commands to annyang
  annyang.addCommands(commands);

  // Start listening.
  annyang.start();
}

И да, да, вы повторили наши часы поиска StackOverflow для добавления разрешений микрофона к вашему расширению Chrome.

Если бы это руководство помогло вам, мы были бы очень ❤️, если бы вы могли высказать свои мысли относительно нашего расширения TalkToMe, даже если вы не являетесь пользователем с недостатками зрения.

Добавить комментарий

Ваш адрес email не будет опубликован.