Проект:

• Название: mCloud-rtc-app (electron-vue-rtc).
• Краткое название: 简会云实时音视频应用系统.
• Полное название: mCloud Real-Time Audio/Video Communication Conference/Meeting Application System.

Продукт: Meeting Cloud RTC, 简会云视频会议.

Интерфейс UI

1. Логин: изображение с подписью «логин».
2. Пользовательский центр: изображение с подписью «пользовательский центр».
3. Общий доступ: изображение с подписью «общий доступ».
4. Видеоконференция: изображение с подписью «видеоконференция».
5. Онлайн-трансляция: изображение с подписью «онлайн-трансляция».
6. Настройки: изображение с подписью «настройки».

Фронтенд-фреймворк и стек технологий

1. Electron JS — фреймворк.
   • electron-builder — сборка;
   • electron-store — хранение;
   • electron-updater — обновление;
   • electron-node-loader — загрузка;
   • asar — упаковка.
2. TRTCCloud — SDK от Tencent для аудио- и видеосвязи.
3. Vue JS — фреймворк и набор инструментов.
   • Vue-cli3 — сборка;
   • Vuex — управление состоянием;
   • vue-router — маршрутизация;
   • разработка с использованием инструментов Vue-cli и vue-devtools.
4. Element UI — фреймворк.
5. Другие расширения и плагины:
   • OAuth2 — авторизация;
   • sns login — вход через социальные сети;
   • crypto-js — шифрование;
   • better-scroll — прокрутка;
   • nprogress — индикатор загрузки;
   • Mock JS — фиктивные данные;
   • webpack-iconfont-plugin-nodejs — генерация иконок;
   • sass/scss — таблицы стилей.

Бэкенд-фреймворк и стек технологий

Используется платформа mCloud-saas на основе Spring Cloud и OAuth2.

Особенности функционала

• Приложение на базе Electron/TRTC/Vue/ElementUI для Mac и Windows.
• Минималистичный интерфейс без меню по умолчанию и с настраиваемой панелью заголовка.
• Четыре группы основных процессов: основной, логин, настройки и автоматическое обновление. Обмен данными между основными процессами и процессами рендеринга.
• Видеоконференции для нескольких участников.
  • Аудио- и видеосвязь в реальном времени, шифрование, синхронизация встреч в офлайн-комнатах.
  • Комната ожидания, комната для предварительного входа, виртуальный фон, фильтры для лица.
  • Микрофон и камера для участников, интерактивные комментарии, доска для рисования.
  • Конференц-зал, общий экран, водяные знаки, белая доска.
• Онлайн-трансляции.
  • Трансляции и управление ими, запись трансляций.
  • Комнаты ожидания для трансляции и конференции, комнаты предварительного входа.
  • Участники трансляций могут использовать микрофон и камеру, а зрители — комментировать трансляцию.
  • Настраиваемая пропускная способность и разрешение, общий экран и водяные знаки.
• Авторизация через OAuth2 и выход из системы.
• Автоматическое обновление и обновления.
• Конфигурация приложения и локальное хранилище конфигурации.
• Разделение маршрутов и меню, поддержка маршрутизации с правами доступа.
• Локальное хранилище для данных приложения.
• Cookie для сеансов.
• Анимация загрузки и индикатор выполнения.
• Полноэкранный режим видео.
• Генерация SVG-иконок.
• Инструменты для работы с датой и временем.
• Импорт из Excel (xlsx+csv).
• Экспорт данных в Excel (xlsx/csv/txt) и текстовый формат txt.
• Редактор форматированного текста и Markdown.
• Графические диаграммы E-Chart.
• Общие стили для удобства настройки тем.
• Журналы и обработка ошибок.
• Подробные документы.

Структура каталогов

├─ bin — каталог для публикации приложений (автоматически создаётся)
│  ├─ win-unpacked — не упакованное приложение, которое можно запустить напрямую
│  ├─ файлы для загрузки на сервер и автоматического обновления (см. ниже)
│  ├─ MeetingCloudRTC[version | 1.0.0].exe — упакованное приложение для официальной публикации
│  ├─ builder-effective-config — файл конфигурации последней версии
│  └─ latest.yml — файл свойств последней версии
├─ dist_electron — каталог с кодом проекта Electron (создаётся автоматически)
├─ docs — документация
├─ electron — ресурсы основного процесса
│  ├─ event — библиотека событий
│  ├─ installer — конфигурация NSI
│  ├─ window — основной процесс
│  └─ background.js — файл запуска основного процесса
├─ public — статические ресурсы
│  ├─ download — центр загрузки статических ресурсов, которые необходимо загрузить на сервер
│  │  └─ app — каталог приложений на сервере
│  ├─ image — изображения
│  ├─ favicon.ico — значок сайта
│  └─ index.html — главная страница Vue
├─ src
│  ├─ api — интерфейсы
│  │  ├─ components — RESTFUL/markdown компоненты
│  │  ├─ mock — фиктивные данные
│  │  ├─ *** — другие интерфейсы приложений, соответствующие микросервисам
│  │  └─ login — интерфейс входа
│  ├─ assets — ресурсы
│  │  ├─ icon — иконки шрифтов
│  │  └─ svg — векторные иконки, автоматически обновляет icon/font-mcloud и другие библиотеки стилей [только в режиме разработки]
│  ├─ components — компоненты
│  ├─ layout — макеты
│  ├─ lib — общие библиотеки
│  │  ├─ mixin — функции общего назначения
│  │  └─ trtc — инструменты для аудио- и видеосвязи
│  ├─ menu — меню
│  ├─ mock — фиктивные данные
│  ├─ plugin — плагины
│  ├─ ├─ axios — HTTP-библиотека на основе обещаний
│  │  └─ locales — i18n для многоязычной поддержки
│  ├─ router — маршрутизатор
│  ├─ store — глобальное состояние
│  ├─ views — страницы просмотра
│  ├─ App.vue — стартовая страница
│  ├─ main.js — точка входа
│  └─ setting.js — настройки
├─ tests — модульные тесты
├─ .env — переменные среды
├─ .env.development — переменные среды разработки
├─ .env.production — переменные производственной среды
├─ .eslintignore — файлы, игнорируемые ESLINT
├─ .eslintrc.js — настройка инструмента управления проверкой кода JS
├─ .gitignore — файлы, игнорируемые GIT
├─ .npmrc — зеркало репозитория
├─ .yarnrc — зеркало репозитория
├─ .postcssrc.js — использование плагинов для преобразования CSS
├─ babel.config.js — конфигурация компилятора Babel
├─ package.json — конфигурация зависимостей
└─ vue.config.js — конфигурация Vue

Установка и использование

Рекомендуется использовать yarn, но при необходимости можно заменить его на npm.

• Разработка:

  1. Установите Node.js, npm и yarn.
  2. Проверьте версию и рекомендуемые настройки.
     • node -v: v12.18.0
     • npm -v: 6.14.8
     • yarn -v: 1.22.4
  3. Автоматически установите зависимости.
     • Для установки Electron может потребоваться некоторое время (рекомендуется использовать FQ Science Online).
     • yarn install

• Запуск и публикация:

  • Режим разработки: запустите приложение.
    • yarn electron:serve
  • Производственная среда: опубликуйте приложение.
    • yarn electron:build

• Настройка сочетания клавиш в производственной среде:

  • Отключите стандартные сочетания клавиш и настройте собственные сочетания.
    • ctrl + shift + i + t — открыть инструмент отладки.

Справочные материалы и примеры

• Веб-сайт Node.js: https://nodejs.org/en/download/.
• Официальный сайт Electron: https://www.electronjs.org/docs/api.
• Официальный веб-сайт Vue: https://cn.vuejs.org/. Это прогрессивный JavaScript-фреймворк для одностраничных приложений.
• Element UI: http://element-cn.eleme.io/#/zh-CN. Фреймворк пользовательского интерфейса от Eleme.
• Документация и ресурсы TRTCCloud: https://cloud.tencent.com/product/trtc/developer.
• API TRTCCloud: https://trtc-1252463788.file.myqcloud.com/electron_sdk/docs/TRTCCloud.html.

Соглашения и правила

• Используйте единый стиль кода и форматирования.
• Применяйте eslint и prettier для форматирования кода и придерживайтесь общепринятых стандартов.
• Минимизируйте конфигурацию, следуйте большинству и используйте IDE-инструменты для унификации стиля.
• Установите eslint, beautify (вспомогательный инструмент) и prettier (расширение).
• Поддерживаются языки JavaScript, TypeScript, CSS, Less, SCSS, JSON, JSX. Интеграция с Visual Studio Code, Vim, WebStorm, Sublime Text. По умолчанию отступ равен 2 символам.
• В конце строки не ставится точка с запятой.
• Перед элементами массива добавляется пробел.
• Элементы данных не переносятся на новую строку.
• Между именем функции и скобками добавляется пробел.
• Вместо двойных кавычек используются одинарные.
• Обязательно используется тройное равенство (===).

  
- Относительные единицы и комбинированные шрифты.
> Использование относительных единиц rem, базовое значение: 16px.
> "PingFang SC", "Microsoft YaHei", "微软雅黑", "Arial", "黑体", "宋体", "sans-serif".