Как ИИ мне со стримом на Ютубе «помогал»

Решил с понедельника открыть сезон стримов на Ютубе. Идея банальная: показывать вживую, как я проектирую и вайбкодю пет-проект. Ну как пет-проект… В мае ему уже исполнится год и по архитектуре и функциям он разросся настолько, что уже приходится относиться к нему со всем уважением :)

Пошёл в ChatGPT, поделился идеей. «Идея замечательная!» — сказал чат и начал уже было расхваливать меня, но я его остановил. «Мне нужна помощь с OBS: хочу сделать в стриме плашку с информацией: кто я, что прямо сейчас делаю, ссылки, время, вот это всё». «Спокойствие, сейчас всё объясню!» — сказал ChatGPT — и именно с этого началась моя история.

OBS — это программа, популярная среди стримеров. Она позволяет захватывать видео с экрана, вебку, управлять всем этим делом с помощью сцен и транслировать результат, куда прикажете. И, главное, она бесплатная.

Я описал ЧатуГПТ свой сетап:

• Три монитора и вебкамера;

• На левом и центральном мониторе я буду работать и стримить;

• На правом у меня будет висеть OBS и всё, что я не хочу показывать (Телеграм, файлы с заметками, дополнительное окно браузера и т.п.).

И объяснил, какие мне нужны сцены:

• Левый монитор плюс моя вебка в правом нижнем углу;

• Центральный монитор плюс моя вебка в правом нижнем углу;

• Вебка на весь экран — когда я хочу отвлечься от работы и поделиться какой-нибудь офигительной историей.

«И вот для каждой из этих сцен мне нужна сверху плашка, на которой будут…»

• Имя стримера (моё имя, Егор Камелев);

• Информация о том, какой сейчас транслируется монитор (или вебка);

• Редактируемая текстовая информация о том, что именно происходит на стриме прямо сейчас;

• Ссылки на продвигаемые ресурсы;

• Дата и время (чтобы можно было понять — это живой стрим или запись).

Кстати, изначально ЧатГПТ сам мне предложил содержимое плашки, но оно не было похоже на то, которое я только что описал выше. Он советовал показывать статус стрима «Live» и его название. Мне эта идея не приглянулась. На мой вопрос «Зачем показывать статус стрима, если его потом всё равно многие будут смотреть в записи?» он не нашёлся что ответить.

В общем, с горем пополам определились с содержимым плашки — и чат начал выдавать мне инструкцию.

• Сначала сделай чёрную полупрозрачную подложку (а должен заметить, что я пользуюсь Виндой и решил спрятать нижний бар с пуском, поиском и прочими иконками; высота бара составляет 48 пикселей, и именно такую высоту я и задал для плашки; естественно, полупрозрачность там была абсолютно не нужна, т.к. я обрезал транслируемый экран на эту высоту);

• Теперь добавь текстовый блок с твоим именем. Настрой его. Молодец;

• Теперь добавь текстовый блок с указанием источника стрима.

В этот момент я прерываю чат. Я бы хотел сделать вертикальные разделители между элементами. Куда мне их лучше засунуть? В качестве отдельных элементов или как часть каждого следующего элемента? Чат посоветовал второе.

• Теперь давай добавим текст про тему стрима. В качестве источника возьмём текстовый файл на твоём компе. Ты сможешь редактировать его и как только сохранишь — текст обновится.

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

• Теперь добавим блок со ссылками. Молодец

• А теперь часики. Для того, чтобы отображать реальное время мы можем пойти двумя путями:

  • Первый: используем текстовый файл, в котором ты будешь периодически менять время вручную (в этом месте инструкции нужно было видеть моё лицо);

  • Второй: используем такой источник данных как «Браузер» и сделаем html-страничку и небольшой js, который будет автоматически обновлять время.

И я такой в этом моменте: «Чегоооо?».

После этого я спросил: «Я правильно понимаю, что мы можем сверстать любой html, использовать свой css и js — и транслировать это в стрим, даже не открывая браузера?». «Да» — ответил ChatGPT.

И в этот момент я понял, что вся моя предыдущая работа с кучей элементов со своими настройками — полностью перечёркивается.

— А почему же ты мне тогда не предложил сразу сверстать плашку целиком?

— Я не знал, сможешь ли ты разобраться с вёрсткой — и предложил самый простой и быстрый вариант для новичка.

— А зачем мне разбираться с вёрсткой, если ты сам отлично всё можешь верстать, и от тебя потребовалась бы лишь инструкция о том, как мне прикрутить это дело к OBS?

— Да, конечно, ты совершенно прав. Так было бы и правильнее, и быстрее!

Пожалуй, это был один из немногих моментов, когда я испытал какие-то эмоции в адрес чатаГПТ.

Через пятнадцать минут всё было готово. Я с помощью чата сверстал три html-ки (для двух мониторов и вебки), связал их с текстовым файлом, в котором мог редактировать тему стрима на лету. Настройки стилей вынес в отдельный файлик. И также создал отдельный файлик для всех скриптов. Проблема висящих разделителей исчезла (как и любая другая проблема, связанная с оформлением). Десять элементов в источниках сцены превратились в один.

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

Поделюсь с вами кодом.

Вот overlay для центрального монитора (оверлеи для других сцен — по аналогии):

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="overlay.css"> </head> <body data-monitor="center"> <div> <div> <span>Егор Камелев</span> <span>|</span> <span> <span id="monitor"></span> </span> <span>|</span> <span id="comment"> <span id="comment-track"> <span id="comment-text-1"></span> <span></span> <span id="comment-text-2"></span> </span> </span> </div> <div> <span>t.me/normfreelancer</span> <span>|</span> <span>normcrm.ru</span> <span>|</span> <span id="clock"></span> </div> </div> <script src="overlay.js"></script> </body> </html>

Вот css (каскадная таблица стилей):

html, body { margin: 0; padding: 0; width: 1920px; height: 48px; overflow: hidden; } * { box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 22px; line-height: 1; color: #ffffff; } .header { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: linear-gradient( 180deg, rgba(20,20,22,0.96), rgba(10,10,12,0.96) ); overflow: hidden; } .left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; } .right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: 24px; white-space: nowrap; } .name { font-weight: 600; flex: 0 0 auto; } .monitor { color: #9fd0ff; flex: 0 0 auto; } .comment { position: relative; color: #d5d9df; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; } .comment-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; } .comment.marquee .comment-track { animation: marquee linear infinite; animation-duration: var(--marquee-duration); } .comment-text { white-space: nowrap; flex: 0 0 auto; } .comment-text.clone { display: none; } .comment.marquee .comment-text.clone { display: inline-block; } .comment-gap { width: 80px; flex: 0 0 auto; } .link { color: #7fc1ff; flex: 0 0 auto; } .clock { color: #ffffff; flex: 0 0 auto; } .divider { color: rgba(255, 255, 255, 0.35); flex: 0 0 auto; font-weight: 400; transform: translateY(-1px); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-shift))); } }

А вот весь js (скрипты):

const monitorType = document.body.dataset.monitor; const monitorText = monitorType === "left" ? "Источник: монитор слева" : monitorType === "webcam" ? "Источник: веб-камера" : "Источник: центральный монитор"; document.getElementById("monitor").textContent = monitorText; let lastCommentText = ""; async function updateComment() { try { const r = await fetch("stream_comment.txt?" + Date.now()); const text = (await r.text()).trim(); if (text === lastCommentText) { return; } lastCommentText = text; const comment = document.getElementById("comment"); const track = document.getElementById("comment-track"); const text1 = document.getElementById("comment-text-1"); const text2 = document.getElementById("comment-text-2"); const gap = comment.querySelector(".comment-gap"); comment.classList.remove("marquee"); track.style.animation = "none"; text1.textContent = text; text2.textContent = text; void track.offsetWidth; const containerWidth = comment.clientWidth; const textWidth = text1.scrollWidth; const gapWidth = gap.offsetWidth; const shift = textWidth + gapWidth; if (textWidth > containerWidth) { const speed = 80; const duration = shift / speed; comment.style.setProperty("--marquee-shift", shift + "px"); comment.style.setProperty("--marquee-duration", duration + "s"); track.style.animation = ""; comment.classList.add("marquee"); } else { comment.style.removeProperty("--marquee-shift"); comment.style.removeProperty("--marquee-duration"); track.style.animation = ""; comment.classList.remove("marquee"); } } catch {} } function updateClock() { const now = new Date(); const h = String(now.getHours()).padStart(2,'0'); const m = String(now.getMinutes()).padStart(2,'0'); const d = String(now.getDate()).padStart(2,'0'); const mo = String(now.getMonth()+1).padStart(2,'0'); const y = now.getFullYear(); document.getElementById("clock").textContent = `${h}:${m} ${d}.${mo}.${y}`; } setInterval(updateClock,1000); setInterval(updateComment,1000); updateClock(); updateComment();

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

В самом OBS добавляем на сцену новый источник (выбираем тип «Browser»), указываем нужную html-ку, задаём высоту и ширину — и готово.

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

В итоге понедельничный стрим прошёл отлично. Я и в Axure поработал, и с ChatGPT пообщался, и в Codex повайбкодил, и в свою IDE потаскал результат, и потестировал, и… Да что там — обыкновенный рабочий процесс. Единственный момент: я кучу времени настраивал себе свет, а перед началом стрима забыл его включить.

А за первым стримом прошло ещё два. И я пока не собираюсь останавливаться (поставил себе цель на 100 стримов либо каждый день, либо кроме выходных, ещё не определился). Сегодня, например, буду писать функциональную спецификацию к НормЦРМ и объяснять, как это делается и, главное, зачем.

А про ChatGPT для себя уяснил одну вещь: есть области, в которых он разбирается хорошо и уверенно (например, разработка в стеке Питон + Джанго). А есть те, в которых общие знания у него есть, но здравого смысла, как эти знания применять эффективно и рационально — нет. Потому что, видимо, не было статей, которые разъясняют, как делать — правильно, а как — не очень.

Если бы я сразу сформулировал задачу как «сверстай HTML-оверлей из таких-то параметров» — сэкономил бы две трети времени.

Ссылки на мои Хабростатьи по теме:

• 20 лет объяснял программистам, что делать. А теперь попробовал сам

• 20 лет объяснял программистам, что делать. А теперь попробовал сам. Часть вторая

• Как я сделал автоматический перевод постов у себя в блоге с помощью ChatGPT