Страница с чатами для стримеров

[R3mbrant_renamed_619454_16022020]

Не так давно решил себе сделать страничку с чатами для стримов. Вот что у меня из этого получилось: http://r3mbrant.narod.ru
В планах переделать отображение чатов гохи и эмпаертв и прикрутить счетчик зрителей. (не откажусь от помощи)

---

Создаете 2 файла, index.html и style.css (обязательно должны находиться в одной папке!), копируете в них то, что найдете по ссылкам:

http://pastie.org/private/mndg0zgjkxvvfslr9uhqfg - index.html

http://pastie.org/private/ij3yrzpsrn1syz3zpjugvg - style.css

style.css просто сохраняете и закрываете, а с index.html работаем дальше.

1.
<title>Чаты (User_Name)</title> -Вписываем свой ник.

2.
<a class="purple button" onclick="change('twitch')">Twitch</a> - Эта строчка и ниже ей подобные отвечают за кнопки вверху страницы. Можно настроить порядок, задать цвет и удалить ненужные.

3.
Собственно сами чаты. Как вписать свои данные смотрите таблицу.
display: inline - отображение чата по дефолту
display: none - отображение чата по нажатию кнопки

---

<div id="twitch" class="border" style="display: inline"><iframe id="twitch-iframe" scrolling="no" src="http://ru.twitch.tv/chat/embed?channel=user_name&popout_chat=true"></iframe></div>
user_name = Имя канала

---

<div id="own3d" class="border" style="display: none"><iframe id="own3d-iframe" scrolling="no" src="http://www.own3d.tv/chatpopout/live_channel_id"></iframe></div>
channel_id - можно узнать в разделе "My Livestreams"

---

<div id="goodgame" class="border" style="display: inline"><iframe id="goodgame-iframe" scrolling="no" src="http://www.goodgame.ru/allstreams2.php?ocd=chat&id=channel_id"></iframe></div>
channel_id - Самое быстрое найти ID в строке браузера на вашем канале

---

<div id="sc2tv" class="border" style="display: inline"><iframe id="sc2tv-iframe" scrolling="no" src="http://chat.sc2tv.ru/index.htm?channeId=channel_id&stop="></iframe></div>
channel_id - Так же как и на ГГ, только смотрится в окне редактирования стрима

---

<div id="goha" class="border" style="display: none"><div><iframe id="goha-iframe" scrolling="no" src="http://www.goha.tv/#!/user_name"></iframe></div></div>
user_name = логин на самом портале

---

<div id="empire" class="border" style="display: inline"><div><iframe id="empire-iframe" scrolling="no" src="http://www.empiretv.org/user/channel_id"></iframe></div></div>
channel_id - Так же как и на ГГ

---

4.
Теперь можно пользоваться локально, либо залив на какой-нибудь хостинг (например на яндекс.народ) либо попросить меня и я залью к себе.

Enjoy

update
В style.css в самом низу добавить выделенное жирным:
.button:hover, .blue.button:hover, .green.button:hover, .red.button:hover, .orange.button:hover, .purple.button:hover

[gruik_renamed_934477_21012020]

для cybergame.tv добавьте чат

[R3mbrant_renamed_619454_16022020]

#cybergame div {
height: 373px;
width: 283px;
border: 1px solid #009999;
position: relative;
}
#cybergame iframe {
width: 1280px;
height: 1280px;
left: -840px;
top: -193px;
position: absolute;
}


<a class="green button" onclick="change('cybergame')">Cybergame</a>


<div id="cybergame" class="border" style="display: none"><div><iframe id="cybergame-iframe" scrolling="no" src="http://cybergame.tv/r3mbrant"></iframe></div></div>

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

Добавлено через 34 минуты
update
В style.css в самом низу добавить выделенное жирным:
.button:hover, .blue.button:hover, .green.button:hover, .red.button:hover, .orange.button:hover, .purple.button:hover

[gruik_renamed_934477_21012020]

огромное спасибо

[Anidante_renamed_871205_23012021]

А можно ли как-то статистику онлайна с сайбергейма сделать?

[Duke]

помогите выдрать чат вот отсюда http://www.topgamer.ru/stream32

[Duke]

от нового гг чат кто нибудь уже выдрал?

Добавлено через 35 минут
на своей странице чата жмем показать в отдельном окне и копируем адресную строку этого окна. вставляем вместо старого кода для гг

<div id="goodgame" class="border" style="display: inline"><iframe id="goodgame-iframe" scrolling="no" src="http://goodgame.ru/chat/ваш ид на гг/"></iframe></div>

[Leaf_renamed_942899_04022020]

Большое спасибо ТС'у за исходники, гайд, и ребятам что уже отписывали в теме со своими "дополнениями" :)

Огромное спасибо вам

[HeavenAnger_renamed_985653_01072022]

ребят напишите пожалуйста как вытащить чат с worldoftanks.tv очень надо, заранее спасибо

[Westbro0k_renamed_1004336_13092021]

Большое спасибо за материал, очень пригодился!

Помогите, пожалуйста с настройкой определения позиции чата

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

помогите пожалуйста сделать счётчик для статистики онлайна с плеера кибергейма
пожалуйста)

[Duke]

счетчик не робит. доступ к апи сменили?

[CapFiyah_renamed_564725_04042020]

с гудгеймом случилось что? не желает цепляться чат,вместо него во фрейме левый верхний угол сайта :( он у меня и в RatChat не цеплялся

[Duke]

Quote: Originally Posted by CapFiyah

Originally Posted by CapFiyah

с гудгеймом случилось что? не желает цепляться чат,вместо него во фрейме левый верхний угол сайта :( он у меня и в RatChat не цеплялся

это

Quote: Originally Posted by R3mbrant

Originally Posted by R3mbrant

<div id="goodgame" class="border" style="display: inline"><iframe id="goodgame-iframe" scrolling="no" src="http://www.goodgame.ru/allstreams2.php?ocd=chat&id=channel_id"></iframe></div>
channel_id - Самое быстрое найти ID в строке браузера на вашем канале

нужно поменять на это

<div id="goodgame" class="border" style="display: none"><iframe id="goodgame-iframe" scrolling="no" src="http://goodgame.ru/chat/channel_id/"></iframe></div>

[CapFiyah_renamed_564725_04042020]

спасибо,починил :)

[Meros_renamed_739913_19102021]

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

[Chimera-Syber]

встроить чат с GoHa.TV можно через эту штуку: https://forums.goha.ru/showthread_73_1_t906335

[iRavox_renamed_942421_17092020]

Счетчик зрителей для кибергейма приделать не получится?
http://cybergame.tv/v1/developer/ - тестовый API кибергейма.

Quote:

2. Получение статуса канала.
Адрес для запроса: http://api.cybergame.tv/w/streams2.php?channel=имя канала
В теле ответа информация о канале в формате JSON.
"channel name" - имя канала
"online" - статус канала (0 - нет трансляции, 1 - есть)
"viewers" - количество зрителей
"thumbnail" - ссылка на превьюшку
Например:
$ curl http://api.cybergame.tv/w/streams.php?channel=cap
{"channel name":"cap","online":"1","viewers":"0","thumbnail" :"http:\/\/st.cybergame.tv\/thumbnails\/cap.jpg"}

[DiRaven_renamed_656678_20022023]

Еще одна вариация на ту же тему:
https://github.com/diraven/streamchats

Умеет те чаты, которыми пользуюсь сам:
- twitch
- goha
- goodgame
- cybergame

Берете содержимое папочки dist и пользуетесь.

На этот раз все настройки ради удобства вынесены в js/settings.js.

Добавлять чаты можно в chat.js, примеры можно глянуть там же. Если очень надо - напишите мне, добавлю. Может, не сразу - времени, особо, нет.

Будут вопросы/идеи/предложения/пожелания - тоже пишите. Будет время - дорисую.

[Deversant_renamed_1006681_10122020]

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

[DiRaven_renamed_656678_20022023]

Не вижу инфы по ихнему API. У них developer/ 404. Рисовать еще один ифрейм только ради кол-ва зрителей жестоко отразится на производительности.

Добавлено через 3 минуты

Quote: Originally Posted by iRavox

Originally Posted by iRavox

Счетчик зрителей для кибергейма приделать не получится?
http://cybergame.tv/v1/developer/ - тестовый API кибергейма.

Цитата:
2. Получение статуса канала.
Адрес для запроса: http://api.cybergame.tv/w/streams2.php?channel=имя канала
В теле ответа информация о канале в формате JSON.
"channel name" - имя канала
"online" - статус канала (0 - нет трансляции, 1 - есть)
"viewers" - количество зрителей
"thumbnail" - ссылка на превьюшку
Например:
$ curl http://api.cybergame.tv/w/streams.php?channel=cap
{"channel name":"cap","online":"1","viewers":"0","thumbnail" :"http:\/\/st.cybergame.tv\/thumbnails\/cap.jpg"}

Проверил. Вроде как, еще работает. Попозже дорисую счетчик.

Добавлено через 32 минуты
К сожалению, их АПИ возвращает json и (в отличии от твича того же) jsonp не поддерживается, так что отправить туда запрос через js/ajax, увы, нельзя. Ограничение броузеров. Для этого придется делать серверную часть и заливать куда-то на хостинг.

[DiRaven_renamed_656678_20022023]

Получилось прикрутить. Чтобы заработало, надо сделать следующее:

- Поставить броузер Firefox. http://www.mozilla.org/en-US/firefox/new/
- Поставить ему аддон GreaseMonkey. https://addons.mozilla.org/en-US/fir.../greasemonkey/
- Разрешить аддону GreaseMonkey работать с файлами локальной файловой системы. Для этого надо в адресной строке броузера вбить about:config, найти там строку extensions.greasemonkey.fileIsGreaseable и убедиться что оно установлено в true. ВНИМАНИЕ: с этим значением не ставьте больше никаких скриптов greasemonkey, если точно не уверены в том, что делаете.
- Скачать https://github.com/diraven/streamcha...ive/master.zip
- Зайти в папку dist и открыть index.html (через наш ФФ с аддоном, естественно)
- Ткнуть ссылку вверху на странице "Install greasemonkey script." и установить скрипт.
- Обновить страницу.

Вуаля, на чате cybergame.tv у нас появился счетчик зрителей.

Потом сделаю красивее и счетчики для других чатов, если будет проект пользоваться популярностью.

Добавлено через 4 минуты
В принципе, можно даже сделать без шаманских танцев с настройкой броузера - так будет и проще, и безопаснее. Но это уже позже, если вообще кому-то понадобится. =)

[Tromg_renamed_1073926_22092019]

Добрый день. Подскажите как вставить приборную панель (dashboard) Twitch.tv без чата, чтобы пользоваться ей, не заходя на Twitch.tv.

Также не помешает нормально вставленная трансляция с Cybergame.tv.
Хорошо бы было, чтобы вышеописанное располагалось отдельной строкой (сверху/снизу относительно чатов - не имеет значения)
Спасибо!

[MuIIIaH9l_renamed_989058_27102019]

Помогите пожалуйста. Вопросы такие : что с чатом емпира? http://regfoto.ru/image/9025.html. Киньте код на чат торта и хорадрика пожалуйста.