obs里设置后看不到弹幕了？ #251

zhengye1 · 2025-01-03T03:29:54Z

zhengye1
Jan 3, 2025

自己用的一个css，上次直播还是好好的，现在貌似啥都看不见了...OBS还是run as admin的
用的css是这个

@import url("https://fonts.googleapis.com/css?family=Noto%20Sans%20SC");
:root {
  /** 是否显示上方superchat固定栏 显示:display 不显示:none **/
  --main-ticker-display: none;
  /** 消息背景颜色 **/
  --main-message-background-color: #f1f2f6;
  /** 普通用户边框颜色 **/
  --main-message-name-background: #747d8c;
  /** 舰长用户边框颜色 **/
  --member-j-message-name-background: #5E88DB;
  /** 房管用户边框颜色 **/
  --member-t-message-name-background: #5C65F2;
  /** 主播边框颜色 **/
  --member-z-message-name-background: #7958E8;
  /** 消息昵称颜色 **/
  --main-message-name-color: #ffffff;
  /** 消息文字颜色 **/
  --main-message-color: #000000;
  /** 整体字体 **/
  --main-font-family: Noto Sans SC;
}
/* Transparent background */
yt-live-chat-renderer {
  background-color: transparent !important;
}

yt-live-chat-item-list-renderer #item-scroller {
  overflow: hidden !important;
}

yt-live-chat-membership-item-renderer #content {
  overflow: visible !important;
  position: relative;
}

/* Hide header and input */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Hide unimportant messages */
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-membership-item-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-membership-item-renderer a {
  text-decoration: none !important;
}

/* Global Setting */
yt-live-chat-renderer {

}
#item-scroller {

}

/* Reduce side padding */
yt-live-chat-text-message-renderer {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Outlines */
yt-live-chat-renderer * {
  font-family: var(--main-font-family);
}

/* Avatars */
@keyframes anim-header-border-rotate {
  0% { opacity: 0; transform: rotate(90deg); }
  40% { opacity: 0; transform: rotate(90deg); }
  100% { opacity: 1; transform: rotate(0); }
}

@keyframes anim {
  0% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: none; }
}
yt-live-chat-text-message-renderer #author-photo {
  display: block !important;
  animation: anim 210ms;
  animation-fill-mode: both;
  position: relative;
  overflow: visible !important;
  margin-top: 23px;
  width: 34px !important;
  height: 34px !important;
  border-radius: 34px !important;
}
yt-live-chat-text-message-renderer #author-photo img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 34px !important;
}
yt-live-chat-text-message-renderer #author-photo:before {
  content: '';
  animation: anim-header-border-rotate 500ms;
  width: 34px;
  height: 34px;
  border-radius: 34px !important;
  position: absolute;
  left: -4px;
  top: -4px;
  border: 4px solid var(--main-message-name-background);
}
yt-live-chat-text-message-renderer[author-type="member"] #author-photo:before {
  border: 4px inset var(--member-j-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"] #author-photo:before {
  border: 4px inset var(--member-t-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="owner"] #author-photo:before {
  border: 4px inset var(--member-z-message-name-background) !important;
}

yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer #author-photo img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 24px !important;
  margin-right: 6px !important;
}

yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 24px !important;
  margin-right: 6px !important;
}
/* Channel names */
@keyframes anim-msg-in-name {
  0% { transform: translateY(11px); }
  80% { transform: translateY(11px); }
  100% { transform: translateY(11px); }
}
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
  animation: anim-msg-in-name 250ms;
  transform-origin: 0 0;
  position: relative;
  transform: translateY(11px);
  margin: 0 0 0 4px !important;
  background-color: var(--main-message-name-background);
  padding: 2px 6px;
  border-radius: 12px;
}
yt-live-chat-text-message-renderer[author-type="member"] yt-live-chat-author-chip {
  background-color: var(--member-j-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"] yt-live-chat-author-chip {
  background-color: var(--member-t-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="owner"] yt-live-chat-author-chip {
  background-color: var(--member-z-message-name-background) !important;
}

yt-live-chat-text-message-renderer #author-name {
  color: var(--main-message-name-color) !important;
  font-family: var(--main-font-family);
  font-size: 14px !important;
  line-height: 14px !important;
  max-width: calc(100% - 0px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent !important;
}

#medal-name.yt-live-chat-author-medal-renderer {
  visibility: hidden;
  width: 0;
  height: 0;
  padding: 0;
  font-size: 14px !important;
  line-height: 14px !important;
}

#medal-level.yt-live-chat-author-medal-renderer {
  visibility: hidden;
  width: 0;
  height: 0;
  padding: 0;
  font-size: 14px !important;
  line-height: 14px !important;
}

/* Messages */
@keyframes anim-msg-in {
  0% { opacity: 0; transform: scale(0.7); }
  85% { opacity: 0.8; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

yt-live-chat-text-message-renderer #card {
  max-width: 100%;
}

yt-live-chat-text-message-renderer #content {
  /** 动画相关 **/
  animation: anim-msg-in 240ms;
  transform-origin: left center;
  /** 基本属性相关 **/
  display: block;
  position: relative;
  max-width: calc(100% - 48px);
  
}

yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: var(--main-message-color) !important;
  font-family: var(--main-font-family);
  font-size: 16px !important;
  line-height: 16px !important;
}

yt-live-chat-text-message-renderer #message {
  max-width: 100%;
  display: block !important;
  border-radius: 20px;
  padding: 11px 12px;
  border: 2px solid var(--main-message-name-background);
  background: var(--main-message-background-color);
}
yt-live-chat-text-message-renderer[author-type="member"] #message {
  border: 2px solid var(--member-j-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"] #message {
  border: 2px solid var(--member-t-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="owner"] #message {
  border: 2px solid var(--member-z-message-name-background) !important;
}

/* member */
@keyframes anim-member-in {
  0% { opacity: 0; transform: scale(0.8); }
  85% { opacity: 0.8; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes anim-member-text-in {
  0% { opacity: 0; transform: scale(0.8); }
  75% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
yt-live-chat-membership-item-renderer {
  animation: anim-member-in 240ms;
  transform-origin: center center;
}

yt-live-chat-membership-item-renderer #card {
  margin: 4px 0 !important;
  border-radius: 12px !important;
}
yt-live-chat-membership-item-renderer #header {
  margin: 4px 0 !important;
  flex-wrap: wrap;
}
yt-live-chat-membership-item-renderer #header::after {
  animation: anim-member-text-in 300ms;
  font-size: 16px;
  width: 100%;
  margin-top: 6px;
  border-radius: 20px;
  padding: 7px 12px;
  color: var(--main-message-color);
  background-color: var(--main-message-background-color);
}
yt-live-chat-membership-item-renderer #header::after {
   content: '欢迎新会员';
}
yt-live-chat-membership-item-renderer #header-content-primary-column {
  width: 100%;
}
yt-live-chat-membership-item-renderer yt-live-chat-author-chip {
  width: 100%;
  justify-content: space-between;
}
yt-live-chat-membership-item-renderer #header-content-inner-column,
yt-live-chat-membership-item-renderer #header-content-inner-column * {
  color: #ffffff !important;
  font-family: var(--main-font-family);
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-membership-item-renderer #header-subtext,
yt-live-chat-membership-item-renderer #header-subtext * {
  display: none;
}

/* SuperChat/Fan Funding Messages */
yt-live-chat-paid-message-renderer {
  animation: anim-member-in 240ms;
  transform-origin: center center;
  margin: 4px 0 !important;
}
yt-live-chat-paid-message-renderer #card {
  border-radius: 12px !important;
  overflow: hidden;
}
yt-live-chat-paid-message-renderer #header-content {
  width: calc(100% - 30px);
}
yt-live-chat-paid-message-renderer #header-content-primary-column {
  width: 100%;
  flex-direction: row !important;
}
yt-live-chat-paid-message-renderer #author-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name * {
  color: #ffffff !important;
  font-family: var(--main-font-family);
  font-size: 16px !important;
  line-height: 16px !important;
}
yt-live-chat-paid-message-renderer #purchase-amount {
    flex-shrink: 0;
}
yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount * {
  color: #ffffff !important;
  font-family: var(--main-font-family);
  font-size: 18px !important;
  line-height: 18px !important;
}
yt-live-chat-paid-message-renderer #content {
  width: calc(100% - 32px);
  position: relative;
  padding-top: 0 !important;
}
yt-live-chat-paid-message-renderer #content #message {
  animation: anim-member-text-in 300ms;
  font-size: 16px;
  margin-top: 6px;
  border-radius: 20px;
  padding: 7px 12px;
  font-family: var(--main-font-family);
  color: var(--main-message-color);
  background-color: var(--main-message-background-color);
}

/* SuperChat Ticker */
yt-live-chat-ticker-renderer {
  display: var(--main-ticker-display);
  background-color: transparent !important;
  box-shadow: none !important;
}

yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: var(--main-font-family);
}

/* Hide badges */
yt-live-chat-text-message-renderer #chat-badges {
  display: none !important;
}
/* Medal */
yt-live-chat-author-medal-renderer {
    display: none;
}
/* Background colors */
body {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}

按理来说应该不是css的问题，然后用的url是用自己的身份码，所以连接用的是
https://blive.chat/room/xxxxxxxx?roomKeyType=2&lang=zh
因为想着自己在加拿大多伦多么..也试过用cloudflare.blive.chat 但好像也不行....一片空白...

Answered by xfgryujk

Jan 6, 2025

可以确定是CDN的国外节点没有配置Access-Control-Allow-Origin响应头了

测试命令：

curl 'https://s4.zstatic.net/ajax/libs/lodash.js/4.17.21/lodash.min.js' -Ss -D - -o /dev/null | sort

国内的响应：

HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
access-control-max-age: 31536000
cache-control: public, max-age=31536000
content-length: 73015
content-type: application/javascript; charset=utf-8
cross-origin-resource-policy: cross-origin
date: Mon, 06 Jan 2025 13:46:37 GMT
etag: "603148ce-11d37"
expires: Thu, 25 Dec 2025 13:13:25 GMT
last-modified: Sat, 20 Feb 2021 17:37:18 GMT
server: WAFPRO
strict-transport-security: max-age=31536000
timing-allow-origin: *
vary: Accept-Encoding
vary: Accept-Encoding
x-cache-stat…

View full answer

xfgryujk · 2025-01-03T03:34:17Z

xfgryujk
Jan 3, 2025
Maintainer

https://github.com/xfgryujk/blivechat/wiki/%E6%B6%88%E6%81%AF%E4%B8%8D%E6%98%BE%E7%A4%BA%E6%88%96%E7%BB%8F%E5%B8%B8%E4%B8%A2%E5%A4%B1%E7%9A%84%E6%8E%92%E6%9F%A5%E6%96%B9%E6%B3%95

0 replies

zhengye1 · 2025-01-03T20:50:04Z

zhengye1
Jan 3, 2025
Author

不会真的是OBS的问题了把....
人在多伦多，身份码刷新了，然后用新的身份码是OK的..但OBS里不行...

2 replies

xfgryujk Jan 5, 2025
Maintainer

我这OBS 30.2.3可以

zhengye1 Jan 5, 2025
Author

那就很奇怪了....我更新了obs到31.0.0，还是这个问题..公共地址不行，release里的暂时可以...

zhengye1 · 2025-01-05T03:53:02Z

zhengye1
Jan 5, 2025
Author

好了我不知道是不是版本问题还是咋的了...如果说我用公共服务器的，版本是v1.10.0-dev，不行...
然后下载了release里的v.1.9.3可以....这是为什么啊

0 replies

xfgryujk · 2025-01-05T07:36:59Z

xfgryujk
Jan 5, 2025
Maintainer

你启动OBS时加上这些参数 --remote-debugging-port=9222 --remote-allow-origins=http://localhost:9222，然后用浏览器打开 http://localhost:9222/ ，看看控制台有什么报错

0 replies

zhengye1 · 2025-01-05T15:42:53Z

zhengye1
Jan 5, 2025
Author

大概是这样的没错把？

2 replies

luyanci Jan 5, 2025

嘶…看样子是 ~~cdn的问题~~ （跨域访问）

xfgryujk Jan 6, 2025
Maintainer

给我整不会了，script不是默认可以跨域的吗

zhengye1 · 2025-01-05T22:51:05Z

zhengye1
Jan 5, 2025
Author

行...开obs加上--args --disable-web-security 好像工作了...但...毕竟是disable-web-security这样好么...

0 replies

xfgryujk · 2025-01-06T02:36:22Z

xfgryujk
Jan 6, 2025
Maintainer

https://srihash.zstatic.net/

看起来带上crossorigin属性会变成跨域请求，但不知道为什么你的请求被拒绝了

1 reply

xfgryujk Jan 6, 2025
Maintainer

方便在OBS的控制台里看一下script的请求和响应头部吗

zhengye1 · 2025-01-06T13:27:04Z

zhengye1
Jan 6, 2025
Author

这样么？

2 replies

xfgryujk Jan 6, 2025
Maintainer

~~对，上面的响应头也看一下~~ 不用了，好像复现了

xfgryujk Jan 6, 2025
Maintainer

我先禁用CDN了，你可以改回公共服务器试试

xfgryujk · 2025-01-06T13:51:33Z

xfgryujk
Jan 6, 2025
Maintainer

可以确定是CDN的国外节点没有配置Access-Control-Allow-Origin响应头了

测试命令：

curl 'https://s4.zstatic.net/ajax/libs/lodash.js/4.17.21/lodash.min.js' -Ss -D - -o /dev/null | sort

国内的响应：

HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
access-control-max-age: 31536000
cache-control: public, max-age=31536000
content-length: 73015
content-type: application/javascript; charset=utf-8
cross-origin-resource-policy: cross-origin
date: Mon, 06 Jan 2025 13:46:37 GMT
etag: "603148ce-11d37"
expires: Thu, 25 Dec 2025 13:13:25 GMT
last-modified: Sat, 20 Feb 2021 17:37:18 GMT
server: WAFPRO
strict-transport-security: max-age=31536000
timing-allow-origin: *
vary: Accept-Encoding
vary: Accept-Encoding
x-cache-status: HIT
x-content-type-options: nosniff
x-served-by-2: wafpro
x-served-by: pkx

国外的响应：

HTTP/2 200 
age: 1648137
cache-control: max-age=2592000
cache-status: Souin; hit; ttl=31535936; key=GET-https-s4.zstatic.net-/ajax/libs/lodash.js/4.17.21/lodash.min.js; detail=DEFAULT
content-length: 73015
content-type: application/javascript; charset=utf-8
date: Mon, 06 Jan 2025 13:50:41 GMT
expires: Wed, 05 Feb 2025 13:50:41 GMT
last-modified: Wed, 18 Dec 2024 12:02:48 GMT
server: ECAcc (cju/E98F)
vary: Accept-Encoding
x-cache: HIT
x-edg-mr: 31:1;
x-request-id: 164484720696401588725450934605886051704
x-request-id: 86949396414971744473402822263984685058

1 reply

xfgryujk Jan 7, 2025
Maintainer

今天CDN配置修复了，但为了防止浏览器缓存了之前的头部，过一个月再启用CDN

zhengye1 · 2025-01-07T11:56:02Z

zhengye1
Jan 7, 2025
Author

刚试了一下，现在好了

0 replies

obs里设置后看不到弹幕了？ #251

Uh oh!

Uh oh!

zhengye1 Jan 3, 2025

Replies: 10 comments · 8 replies

Uh oh!

xfgryujk Jan 3, 2025 Maintainer

Uh oh!

zhengye1 Jan 3, 2025 Author

Uh oh!

xfgryujk Jan 5, 2025 Maintainer

Uh oh!

zhengye1 Jan 5, 2025 Author

Uh oh!

Uh oh!

zhengye1 Jan 5, 2025 Author

Uh oh!

xfgryujk Jan 5, 2025 Maintainer

Uh oh!

zhengye1 Jan 5, 2025 Author

Uh oh!

Uh oh!

luyanci Jan 5, 2025

Uh oh!

xfgryujk Jan 6, 2025 Maintainer

Uh oh!

zhengye1 Jan 5, 2025 Author

Uh oh!

xfgryujk Jan 6, 2025 Maintainer

Uh oh!

Uh oh!

xfgryujk Jan 6, 2025 Maintainer

Uh oh!

zhengye1 Jan 6, 2025 Author

Uh oh!

Uh oh!

xfgryujk Jan 6, 2025 Maintainer

Uh oh!

xfgryujk Jan 6, 2025 Maintainer

Uh oh!

xfgryujk Jan 6, 2025 Maintainer

Uh oh!

Uh oh!

xfgryujk Jan 7, 2025 Maintainer

Uh oh!

zhengye1 Jan 7, 2025 Author

zhengye1
Jan 3, 2025

Replies: 10 comments 8 replies

xfgryujk
Jan 3, 2025
Maintainer

zhengye1
Jan 3, 2025
Author

xfgryujk Jan 5, 2025
Maintainer

zhengye1 Jan 5, 2025
Author

zhengye1
Jan 5, 2025
Author

xfgryujk
Jan 5, 2025
Maintainer

zhengye1
Jan 5, 2025
Author

xfgryujk Jan 6, 2025
Maintainer

zhengye1
Jan 5, 2025
Author

xfgryujk
Jan 6, 2025
Maintainer

xfgryujk Jan 6, 2025
Maintainer

zhengye1
Jan 6, 2025
Author

xfgryujk Jan 6, 2025
Maintainer

xfgryujk Jan 6, 2025
Maintainer

xfgryujk
Jan 6, 2025
Maintainer

xfgryujk Jan 7, 2025
Maintainer

zhengye1
Jan 7, 2025
Author