Как сделать задний фон в дискорде на вебке

Как в Discord поставить фон при трансляции с веб-камеры

Discord выделяется среди других приложений по многим параметрам. Разработчики мессенджера предоставляют пользователям возможность в индивидуальном порядке оформлять свои профили. Те клиенты, которых не устраивает черный или белый тон тем, могут выбрать подходящий вариант через инструменты системы. Из этой статьи вы узнаете, как поставить фон в Дискорде на вебке используя функционал приложения.

Базовые правила установки фона в Discord

При выборе фонового оформления пользователям необходимо соблюдать ряд правил:

1. Откажитесь от слишком пестрых, цветастых тем – они провоцируют сильную усталость, дают большую нагрузку на зрение. Выбор стоит делать в пользу темных оттенков.
2. Не нужно использовать анимации, так как они негативно влияют на работу приложения.
3. Внимательно следите за тем, чтобы графические элементы гармонично сочетались друг с другом, четко выделялись на общем фоне, были хорошо различимыми.

Это интересно: Фон для мессенджера Discord не должен быть разрозненным. В противном случае пользователь будет испытывать дискомфорт от нового интерфейса и ему придется заново осваивать функционал приложения.

Как поставить фон в Дискорде на вебке

Чтобы изменить параметры графического интерфейса пользователю нужно действовать следующим образом:

1. Переходите на официальный сайт https://userstyles.org/.
2. Устанавливаете в свой браузер соответствующее расширение (следует заранее узнать, поддерживает ли он плагин).
3. Открываете веб-клиент под названием «Discord».
4. Кликаете по клавише «S».
5. Выбираете из предложенного перечня стилей подходящий вариант.
6. Перезагружаете вкладку с Дискорд.

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

Использование специальной технологии при установке фона

Пользователь может выполнить установку виртуального фона через вебку, без возможности задействовать «Хромакей». Эта специальная технология предусматривает совмещение в единую композицию нескольких кадров. Для изменения фона нужно:

1. Скачиваете соответствующе программное обеспечение, например, «Better Discord», устанавливаете на компьютер.
2. По инструкции выполняете настройку виртуальной камеры.
3. Проводите активацию настроек Дискорд.
4. В меню осуществляете замену реальной камеры виртуальной.
5. Тестируете работу, сделав пробный видеозвонок.

На заметку: При использовании этого способа пользователь должен следить за тем, чтобы выбранная виртуальная камера имела совместимость с Discord.

Частые вопросы:

• Как поставить фоновую картинку в профиле Discord
• Как сделать фоновую заставку на сервере в Discord
• Как в Discord использовать телефон в качестве микрофона
• Как отключить уведомления от Discord на компьютере

Как сделать задний фон в Дискорде

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

Как поменять фон в Discord с помощью встроенных способов

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

1. Войдите в приложение на ПК или ноутбуке.
2. Жмите на символ с изображением шестеренки слева внизу.

Опуститесь вниз и выберите вариант оформления — темный или светлый. В первом случае вы получаете темно-серый фон, а во втором — белый.

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

Как поставить новый фон в Дискорд: пошаговая инструкция

Если встроенных возможностей недостаточно, можно поменять фон в Discord иными способами — с применением специальной программы или своими силами. Для удобства приведем инструкцию для каждого из вариантов.

С применением Better Discord

Наиболее простой способ изменить фон в Дискорде — использовать функционал Better Discord. Возможности программы позволяют ставить разные плагины, менять темы, скачивать дополнительные наборы смайлов и т. д.

Чтобы поменять оформление в Дискорд, сделайте следующее:

1. Войдите на официальный сайт программы по адресу betterdiscord.net/home.
2. Кликните на кнопку Загрузить (Download).

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

Самостоятельно поменять фон Discord

Второй вариант, который подходит для разработчиков — написать CSS-код самому. Для этого необходимо понимать принципы CSS-верстки, ведь в ином случае сделать собственную тему не получится. Если такие знания имеются, сделайте следующие шаги:

1. Загрузите и поставьте программу BetterDiscord по инструкции, которая рассмотрена выше.
2. Напишите код, в котором продумайте оформление, и необходимый виртуальный фон.
3. Войдите в приложение, а далее Настройки и Custom CSS.
4. Введите написанный код.
5. Жмите на ссылку Update.

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

Как поменять фон на веб-версии Discord

Пользователи Дискорд могут изменить задний план в веб-версии программы. Здесь также имеется два варианта:

1. Используйте встроенный метод. Принцип рассмотрен выше. Войдите в Настройки Discord, а далее в разделе Внешний вид выберите светлую или темную тему.
2. Воспользуйтесь специальным расширением. Для этого перейдите на ресурс userstyles.org, поставьте расширение в веб-проводник. Теперь откройте веб-версию Дискорд и жмите на букву S. После этого перейдите на вкладку Доступные стили и выберите свой вариант. Перезапустите программу.

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

Итоги

Теперь вы знаете, как поменять фон для Дискорда, и какие методы для этого применяются. В распоряжении пользователей три пути — воспользуйтесь встроенными возможностями, установите программу BetterDiscord или напишите CSS-код самостоятельно. Для новичков подойдут первые два решения, а опытные пользователи могут сделать собственную тему для Дискорд.

Видеозвонки с виртуальным фоном и опенсорсные инструменты

Сейчас, когда многие из нас находятся на карантине из-за COVID-19, видеозвонки стали куда более частым явлением, чем раньше. В частности, сервис ZOOM неожиданно стал очень популярным. Вероятно, самой интересной возможностью Zoom является поддержка виртуального фона (Virtual Background). Она позволяет пользователям, в интерактивном режиме, заменять фон, находящийся позади них, на любое изображение или видео.

Я уже давно применяю Zoom на работе, на опенсорсных встречах, посвящённых Kubernetes, делая это обычно с корпоративного ноутбука. Теперь я, в режиме работы из дома, склонен к использованию более мощного и удобного персонального настольного компьютера для решения некоторых из моих опенсорсных задач.

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

Так как зелёного экрана у меня нет, я решил просто реализовать собственную систему удаления фона. А это, конечно, куда лучше, чем наведение порядка в квартире, или постоянное использование рабочего ноутбука.

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

Чтение данных с камеры

Начнём с начала и ответим на следующий вопрос: «Как получить видео с веб-камеры, которое будем обрабатывать?».

Так как я на домашнем компьютере использую Linux (когда не играю в игры), я решил использовать Python-привязки Open CV, с которыми я уже знаком. Они, помимо V4L2-биндингов для чтения данных с веб-камеры, включают в себя и полезные базовые функции по обработке видео.

Чтение кадра с веб-камеры в python-opencv устроено очень просто:

import cv2 cap = cv2.VideoCapture('/dev/video0') success, frame = cap.read() 

Я, чтобы улучшить результаты при работе с моей камерой, перед захватом с неё видео применил следующие настройки:

# настройка камеры на 720p @ 60 FPS height, width = 720, 1280 cap.set(cv2.CAP_PROP_FRAME_WIDTH ,width) cap.set(cv2.CAP_PROP_FRAME_HEIGHT,height) cap.set(cv2.CAP_PROP_FPS, 60) 

Возникает такое ощущение, что большинство программ для видеоконференций ограничивают видео параметрами 720p @ 30 FPS, или ниже. Но мы, в любом случае, можем и не читать каждый кадр. Такие настройки задают верхний лимит.

Поместим механизм захвата кадра в цикл. Теперь у нас есть доступ к видеопотоку с камеры!

while True: success, frame = cap.read() 

Сохранить кадр в тестовых целях можно так:

cv2.imwrite("test.jpg", frame) 

После этого мы можем убедиться в том, что камера работает. Замечательно!

Надеюсь, вы не против моей бороды

Обнаружение фона

Теперь, когда у нас есть доступ к видеопотоку, подумаем о том, как обнаружить фон, сделав так, чтобы, найдя его, его можно было бы заменить. А вот это — уже достаточно сложная задача.

Хотя возникает такое ощущение, что создатели Zoom нигде не рассказывают о том, как именно программа убирает фон, то, как ведёт себя система, заставляет меня задуматься о том, что тут не обошлось без нейронных сетей. Это сложно объяснить, но результаты выглядят именно так. Кроме того, я нашёл статью о том, как в Microsoft Teams реализовано размытие фона с помощью свёрточной нейронной сети.

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

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

Построение такого датасета при подготовке к обучению нейронной сети, возможно, не потребует больших усилий. Это — благодаря тому, что команда исследователей из Google уже сделала всё самое тяжёлое и выложила в опенсорс предварительно обученную нейронную сеть для сегментации людей. Эта сеть называется BodyPix. Работает она очень хорошо!

Сеть BodyPix сейчас доступна лишь в форме, подходящей для TensorFlow.js. В результате, легче всего её применить, воспользовавшись библиотекой body-pix-node.

Для ускорения получения вывода сети (прогноза) в браузере предпочтительно пользоваться WebGL-бэкендом, но в среде Node.js можно воспользоваться бэкендом Tensorflow GPU (обратите внимание на то, что для этого понадобится видеокарта от NVIDIA, которая у меня есть).

Для того чтобы упростить настройку проекта, воспользуемся маленьким контейнеризованным окружением, обеспечивающим работу TensorFlow GPU и Node.js. Использование всего этого с помощью nvidia-docker — гораздо легче, чем самостоятельный сбор необходимых зависимостей на своём компьютере. Для этого на компьютере понадобится лишь наличие Docker и актуальных графических драйверов.

Вот содержимое файла bodypix/package.json :

Вот — файл bodypix/Dockerfile :

# Базовый образ, соответствующий требованиям TensorFlow GPU FROM nvcr.io/nvidia/cuda:10.0-cudnn7-runtime-ubuntu18.04 # Установим node RUN apt update && apt install -y curl make build-essential \ && curl -sL https://deb.nodesource.com/setup_12.x | bash - \ && apt-get -y install nodejs \ && mkdir /.npm \ && chmod 777 /.npm # Проверим, имеется ли достаточно видеопамяти # К сожалению tfjs-node-gpu не даёт сведений о конфигурации GPU :( ENV TF_FORCE_GPU_ALLOW_GROWTH=true # Устанавливаем node-зависимости WORKDIR /src COPY package.json /src/ RUN npm install # Задаём приложение в качестве точки входа COPY app.js /src/ ENTRYPOINT node /src/app.js 

Теперь поговорим о получении результатов. Но сразу предупреждаю: я не отношусь к Node.js-экспертам! Это — лишь результат моих вечерних экспериментов, поэтому будьте ко мне снисходительны :-).

Следующий простой скрипт занят обработкой изображения с двоичной маской, отправленного на сервер с использованием HTTP POST-запроса. Маска — это двумерный массив пикселей. Пиксели, представленные нулями — это фон.

Вот — код файла app.js :

const tf = require('@tensorflow/tfjs-node-gpu'); const bodyPix = require('@tensorflow-models/body-pix'); const http = require('http'); (async () => < const net = await bodyPix.load(< architecture: 'MobileNetV1', outputStride: 16, multiplier: 0.75, quantBytes: 2, >); const server = http.createServer(); server.on('request', async (req, res) => < var chunks = []; req.on('data', (chunk) =>< chunks.push(chunk); >); req.on('end', async () => < const image = tf.node.decodeImage(Buffer.concat(chunks)); segmentation = await net.segmentPerson(image, < flipHorizontal: false, internalResolution: 'medium', segmentationThreshold: 0.7, >); res.writeHead(200, < 'Content-Type': 'application/octet-stream' >); res.write(Buffer.from(segmentation.data)); res.end(); tf.dispose(image); >); >); server.listen(9000); >)(); 

Для преобразования кадра в маску мы, в Python-скрипте, можем воспользоваться пакетами numpy и requests:

def get_mask(frame, bodypix_url='http://localhost:9000'): _, data = cv2.imencode(".jpg", frame) r = requests.post( url=bodypix_url, data=data.tobytes(), headers=) # преобразуем необработанные байты в numpy-массив # необработанные данные выглядят как uint8[width * height] со значениями 0 или 1 mask = np.frombuffer(r.content, dtype=np.uint8) mask = mask.reshape((frame.shape[0], frame.shape[1])) return mask 

В результате получается примерно следующее.

Пока я всем этим занимался, я наткнулся на следующий твит.

Это, определённо, самый лучший фон для видеозвонков

Теперь, когда у нас имеется маска для отделения переднего плана от фона, заменить фон на что-то другое будет очень просто.

Я взял из ветки того твита фоновое изображение и обрезал его так, чтобы получилась бы картинка формата 16×9.

Фоновое изображение

После этого я сделал следующее:

# читаем виртуальный фон (соотношение сторон изображения должно быть 16:9) replacement_bg_raw = cv2.imread("background.jpg") # меняем размер изображения так, чтобы оно вписалось бы в кадр (width & height из предыдущего кода) width, height = 720, 1280 replacement_bg = cv2.resize(replacement_bg_raw, (width, height)) # комбинируем фон и передний план, используя инвертированную маску inv_mask = 1-mask for c in range(frame.shape[2]): frame[. c] = frame[. c]*mask + replacement_bg[. c]*inv_mask 

Вот что у меня после этого получилось.

Результат замены фона

Такая маска, очевидно, недостаточно точна, причиной этого являются те компромиссы в сфере производительности, на которые мы пошли, настраивая BodyPix. В общем, пока всё выглядит более или менее терпимо.

Но, когда я смотрел на этот фон, меня посетила одна идея.

Интересные эксперименты

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

Первый очевидный шаг заключается в смягчении краёв маски. Например, это можно сделать так:

def post_process_mask(mask): mask = cv2.dilate(mask, np.ones((10,10), np.uint8) , iterations=1) mask = cv2.erode(mask, np.ones((10,10), np.uint8) , iterations=1) return mask 

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

Учитывая то, что мы используем виртуальный фон из «Звёздных войн», я решил создать эффект голограммы для того чтобы сделать картинку интереснее. Это, кроме того, позволяет сгладить размытие маски.

Для начала обновим код пост-процессинга:

def post_process_mask(mask): mask = cv2.dilate(mask, np.ones((10,10), np.uint8) , iterations=1) mask = cv2.blur(mask.astype(float), (30,30)) return mask 

Края теперь оказываются размытыми. Это хорошо, но нам ещё нужно создать эффект голограммы.

Голливудские голограммы обычно отличаются следующими свойствами:

• Бледная цветная или монохромная картинка — будто нарисованная ярким лазером.
• Эффект, напоминающий линии развёртки или нечто вроде сетки — будто изображение выводится несколькими лучами.
• «Эффект привидения» — будто бы проекция выполняется послойно или так, как если бы при создании проекции не выдерживалось бы правильное расстояние, на котором она должна выводиться.

Сначала, чтобы окрасить изображение в оттенок синего, можем воспользоваться методом applyColorMap :

# делаем мэппинг кадра в сине-зелёное цветовое пространство holo = cv2.applyColorMap(frame, cv2.COLORMAP_WINTER) 

Далее — добавляем линии развёртки с эффектом, напоминающим уход в полутона:

# для каждой строки bandLength уменьшить яркость на 10-30%, # не трогать строки bandGap. bandLength, bandGap = 2, 3 for y in range(holo.shape[0]): if y % (bandLength+bandGap) < bandLength: holo[y. ] = holo[y. ] * np.random.uniform(0.1, 0.3) 

Далее, реализуем «эффект привидения», добавляя к изображению сдвинутые взвешенные копии текущего эффекта:

# shift_img из: https://stackoverflow.com/a/53140617 def shift_img(img, dx, dy): img = np.roll(img, dy, axis=0) img = np.roll(img, dx, axis=1) if dy>0: img[:dy, :] = 0 elif dy0: img[:, :dx] = 0 elif dx 

holo_done = cv2.addWeighted(img, 0.5, holo2, 0.6, 0) 

numpy==1.18.2 opencv-python==4.2.0.32 requests==2.23.0 pyfakewebcam==0.1.0 

FROM python:3-buster # обеспечиваем актуальность pip RUN pip install --upgrade pip # устанавливаем зависимости opencv RUN apt-get update && \ apt-get install -y \ `# opencv requirements` \ libsm6 libxext6 libxrender-dev \ `# opencv video opening requirements` \ libv4l-dev # устанавливаем зависимости из requirements.txt WORKDIR /src COPY requirements.txt /src/ RUN pip install --no-cache-dir -r /src/requirements.txt # копируем виртуальный фон COPY background.jpg /data/ # запускаем скрипт фиктивной камеры (с небуферизованным выводом для упрощения отладки) COPY fake.py /src/ ENTRYPOINT python -u fake.py 

sudo apt install v4l2loopback-dkms 

sudo modprobe -r v4l2loopback sudo modprobe v4l2loopback devices=1 video_nr=20 card_label="v4l2loopback" exclusive_caps=1 

# тут, опять же, используются те же, что и раньше, значения width и height fake = pyfakewebcam.FakeWebcam('/dev/video20', width, height) 

frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) fake.schedule_frame(frame) 

import os import cv2 import numpy as np import requests import pyfakewebcam def get_mask(frame, bodypix_url='http://localhost:9000'): _, data = cv2.imencode(".jpg", frame) r = requests.post( url=bodypix_url, data=data.tobytes(), headers=) mask = np.frombuffer(r.content, dtype=np.uint8) mask = mask.reshape((frame.shape[0], frame.shape[1])) return mask def post_process_mask(mask): mask = cv2.dilate(mask, np.ones((10,10), np.uint8) , iterations=1) mask = cv2.blur(mask.astype(float), (30,30)) return mask def shift_image(img, dx, dy): img = np.roll(img, dy, axis=0) img = np.roll(img, dx, axis=1) if dy>0: img[:dy, :] = 0 elif dy0: img[:, :dx] = 0 elif dx 

docker build -t bodypix ./bodypix docker build -t fakecam ./fakecam 

# создадим сеть docker network create --driver bridge fakecam # запустим приложение bodypix docker run -d \ --name=bodypix \ --network=fakecam \ --gpus=all --shm-size=1g --ulimit memlock=-1 --ulimit stack=67108864 \ bodypix # запустим камеру, учтя то, что нам нужно пройтись по видеоустройствам, и то, # что пользователь и группа должны иметь разрешение на доступ к ним # возможно, придётся воспользоваться командой вида `sudo groupadd $USER video` docker run -d \ --name=fakecam \ --network=fakecam \ -p 8080:8080 \ -u "$$(id -u):$$(getent group video | cut -d: -f3)" \ $$(find /dev -name 'video*' -printf "--device %p ") \ fakecam