Найти тему
Состояние потока

Забираем виджеты для стрима, откуда никто не ожидает

Оглавление

Привет, стримлер!
На одной из трансляций я рассказывал, как можно забрать любой html-сниппет, в качестве виджета на стрим. Продублирую чуть подробнее тут, чтобы этот процесс был менее пугающим и сбивающим с толку.

В качестве источника виджетов мы можем использовать абсолютно любой сервис, но в нашем примере мы воспользуемся CodePen

Заходим на сайт, вводим в строке поиска любое ключевое слово и выбираем из предложенных вариантов интересующий нас виджет.

-2

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

Найдя подходящий виджет, просто жмем на него. Откроется новая страница, на которой в самом низу - будет представление виджета. А выше - три колонки: HTML, CSS, JavaScript.

Я выбрал симпатичную анимацию, которая может отлично подойти в качестве рамки камеры или какого-либо блока.

-3

Все, что нам нужно сделать - просто собрать содержимое трех колонок (HTML, CSS и JS) в одном файле, с разрешением .html

Но есть несколько нюансов:

- На сайте может быть представлен код, который не будет функционировать в файле без дополнительной библиотеки jQuery. Ее я заранее приложу в шаблоне

- Скопированный код должен быть размещен в файле определенным образом

Давайте разберемся со всем по порядку...

Какие могут быть вариации кода?

Обращайте внимание на название вкладок. Если вы видите HTML, CSS и JS (без всяких значений в скобках) - такой код можно забирать сразу - он будет работать.

-4

Однако могут быть случаи, когда код требует некую компиляцию или постпроцессинг (в это можно не вникать).

-5

Чтобы превратить такой код в подходящий нам - нужно всего лишь нажать на иконку стрелки, указывающей вниз, которая расположена в правой части каждой колонки. И выбираем варианты View Compiled

-6
-7

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

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

Как уже упоминалось, весь код должен быть собран в файле с расширением HTML (Можно, конечно разделить на несколько файлов и подключить их между собой, но тут рассмотрим этот процесс со стороны новичка в html). Чтобы вам было проще все сделать, я подготовил простой шаблон.

Создайте файл winget.html и поместите в него следующее:

<style>
/* Вставь содержимое колонки CSS под этой строкой */
</style>
<!-- Вставь содержимое колонки HTML под этой строкой -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// Вставь содержимое колонки JS под этой строкой
</script>

При попытке открыть данный файл, по умолчанию он будет открываться в браузере, поэтому для редактирования нажимаем на него правой кнопкой мыши и выбираем "Открыть с помощью" -> "Блокнот". Если у вас есть более "мощные" текстовые редакторы (только не Word, пожалуйста) - Feel free to use it.

-8

Далее, нам нужно вставить весь скопированный текст в соответствии с комментариями в шаблоне. Как только это будет готово, нажмите Файл -> Сохранить Как -> Укажите удобный вам путь до будущего файла и сохраните с расширением .html

-9

Если все сделано верно - мы может открыть сохраненный файл в браузере и увидеть результат.

-10

Теперь мы можем подключить наш файл в OBS!

Как подключить в OBS?

В действительности - все весьма просто. Но есть один нюанс.

Открываем OBS и добавляем на нужной сцене новый браузерный источник. Даем ему произвольное название (я назвал "[B] Animated Border")

-11

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

-12

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

-13

Далее мы можем просто воспользоваться трансформированием в OBS, чтобы привести виджет к желаемому виду.

Что, если я хочу поменять цвета?

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

Во-первых, цвет (практически) всегда описан в CSS.
Во-вторых, он может быть выражен одним из следующих видов:

  • HEX. Выглядит так: #27F2A6
  • rgb. Выглядит так: rgb(156, 231, 65)
  • rgba. Выглядит так: rgba(156, 252, 75, .5)

HEX

Такой цвет всегда имеет символ # в начале и может содержать 3 или 6 значений после символа. (#000 и #000000 - черный цвет. #FFF и #FFFFFF - белый цвет)

Чтобы сильно не погружаться в то, как подобрать цвет в HEX, вы можете воспользоваться любым Color Picker. Например - этим.

-14

RGB

Почти то же самое, что и HEX, но значение для цвета тут задано намного понятнее. В HEX для описания красного, зеленого и синего используется шестнадцатеричная система (Те самые цифры и буквы 0-9 и A-F), а в RGB они задаются числами от 0 до 255.

Чтобы было проще найти нужный цвет, мы можем воспользоваться тем же Color Picker, но уже обратить внимание не на HEX, а на RGB.

-15

RGBA

Абсолютно то же самое, что и RGB. Но теперь есть еще и значение для A - альфа-канал. Это по сути непрозрачность. В том же Color Picker после RGB можно заметить значение и для A.

Чтобы поменять цвета в вашем виджете, обратите внимание в часть CSS. Попробуйте найти любые виды цветов, по приведенным выше примерам. Можете определить их цвет с помощью Color Picker, и с ним же - заменить их.

-16

CodePen и прочие площадки с HTML-сниппетами - кладезь полезных и готовых решения для стримера. Умение работать с ними - сильно упростит вам жизнь, вероятно сэкономит денег и поможет выделиться на фоне коллег. Стильно, модно, молодёжно в общем.

Если захочется овладеть мастерством переделывания готовых виджетов - советую обратить внимание именно на CSS.

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

JS - обычно влияет лишь на определенную логику поведения, но значительно реже на отображение.

А CSS - это все о том, как элемент выглядит и часто как он анимирован. Материал простой, а теперь у вас есть и полигон для экспериментов!

Надеюсь статья окажется полезной для вас! Буду заходить в гости и искать глазами новые визуальные штуки)

❤️ Стремительного роста и обильных просмотров! Оставайтесь в состоянии потока!

Буду рад ответить на любые вопросы на нашем Discord-сервере или на Twitch трансляциях!

Больше плагинов и руководств можно найти на нашем Boosty!