Скриншот экрана и распознание текста на JS. Расширение для Google Chrome. Vision Яндекс Cloud (OCR)

Обучение программированию:
�рс-программирование.рф/?utm... Это расширение реально выполненный заказ на бирже фриланса Кворк (
Видео снято и опубликовано с разрешения клиента. Как оно работает:У пользователя запрашивается разрешение на скриншот экранаСкриншот делается через WebRTC. В примере показан вариант скриншота всего экрана. Можно делать скрин только браузера (window) или закладки (tab). Изображение отправляется в облако Яндекс (сервис распознавания текста Vision)Полученный ответ переносится на канвас. Текст затирается черными прямоугольниками, поверх наносится распознанный текст. Что вы узнаете из этого урока: 1. Как работать с хранилищем браузера Google Chrome 2. Как сделать страницу настроек (опций) для расширения 3. Как открыть страницу опций (options) автоматически при установке расширения 4. Как взаимодействовать между background и content скриптами, при помощи отправки сообщений 5. Как получить доступ к медиа-устройствам 6. Как сделать скриншот всего экрана через WebRTC 7. Как подготовить Яндекс Cloud для работы по API 8. Как распознать текст через Vision (OCR) Яндекс Cloud 9. Как рисовать с использованием canvas 10. Как расширению сохранять файлы на компьютер пользователя Тайминги: 00:00 Вступление 3:45 Настройка Яндекс Cloud для работы по API, получение API ключа 7:20 Структура проекта 9:05 Структура manifest.json 10:42 Создание страницы настроек расширения (options) 20:09 получаем доступ к MediaDevices при помощи desktopCapture и navigator.mediaDevices.getUserMedia. Делаем скриншот экрана. 37:49 Сохранение (скачивание) изображения 49:49 Распознаем текст с изображения через Яндекс Vision Cloud 1:08:19 Обработка результатов распознавания. Рисуем результаты в canvas Ролик получился очень длинным, поэтому запасайтесь своим любимым напитком :) #javascript #chrome #canvas #webRTC #яндекс.cloud #ocr