ผมเคยทำคลิปการดึง Comment มาจาก Facebook Live เข้ามาแสดงใน OBS Studio กันไปแล้วและยังหาวิธีแบบเดียวกันนี้กับ Youtube Live ไม่ได้ จนกระทั่งได้มารู้จักกับโปรแกรมที่ชื่อว่า Twidget เข้า
ดาวน์โหลด Twidget (Windows Only) https://twidgetapp.web.app
โปรแกรม Twidget นี้จะสามารถดึง Comment มาจาก Youtube Facebook และ Twitch ได้โดยการกรอก URL เข้าไป มี Template ให้เลือก และยังสามารถปรับ CSS ในตัว OBS เพื่อให้เป็นรูปแบบเฉพาะที่เราต้องการได้อีกด้วย คลิปนี้มาดึง Comment จาก Facebook และ Youtube มาแสดงใน OBS Studio ด้วย Twidget กันดูครับ
โค้ดสำหรับใส่ในช่อง CSS ตามคลิป
เครดิต : Scott Fichter
/*------------------------- CHANNEL IMAGE ON LEFT ------------------------*/
/*this shows channel icon*/
.pfp {
/*border: 3px solid #f0f; */
border-radius: 10px;
margin-left: 30px!important;
/*animation: channel-icon 3s ease;*/
}
/*this shows the logo of youtube, facebook, or Twitch*/
/*.pflogo { */
/* display: none!important; */
/*}*/
/*------------------------- THE TEXT NAME AND MSSG ------------------------*/
/* Text Drop Shadow Maker = https://html-css-js.com/css/generator/text-shadow/*/
/* Hex color picker = https://redketchup.io/color-picker */
.name {
/*text-transform: uppercase;*/
font-size: 40px !important;
color: grey;
/*padding: 0px 0px 0px 0px;*/
text-shadow: 0px 0px 0px #000000;
animation: animated-message 1s ease;
}
.message {
/*text-transform: uppercase;*/
font-size: 60px !important;
color: #333;
height: auto;
font: Kanit-Regular , sans-serif;
/*white-space: wrap;*/
/*text-overflow: ellipsis;*/
padding: 0px 0px 5px 0px;
text-shadow: 0px 0px 0px #000000;
animation: animated-message 1s ease;
}
/*------------------------- CONTAINER / BACKGROUND ------------------------*/
/* Color picker with transparency = https://hslpicker.com/ */
/* Gradient color maker = https://www.colorzilla.com/gradient-editor/ */
/* Background Image maker = https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size*/
/* Box Drop Shadow Maker = https://html-css-js.com/css/generator/box-shadow/ */
/*background-image:url('w3css.gif');*/
/*background-repeat:no-repeat;*/
/*background-size:100% 100%;*/
.simpleContainer {
margin: 30px;
padding: 1px !important;
border-left: 0px solid #000;
/*border: 11px solid #000;*/
/*background: transparent;*/
border-radius: 10px;
background-repeat:no-repeat;
background-size:100% 100%;
animation: animated-message 1s ease;
}
/*------------------------- ANIMATIONS ------------------------*/
/* Click here to get all the prebuilt css for all the cool animations = https://files.catbox.moe/d8edna.txt */
@keyframes animated-container {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(-20deg);
transform: perspective(400px) rotateX(-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotateX(-5deg);
transform: perspective(400px) rotateX(-5deg)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes channel-icon {
0%,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes animated-name {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
40% {
-webkit-transform: perspective(400px) rotateX(-20deg);
transform: perspective(400px) rotateX(-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
80% {
-webkit-transform: perspective(400px) rotateX(-5deg);
transform: perspective(400px) rotateX(-5deg)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes animated-message{
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}===============================
อุปกรณ์ในการถ่ายคลิป https://undervlog.blog/undervlog-live-tools/
สนับสนุนช่องได้โดยการซื้อสินค้าจากลิงค์นี้ https://shp.ee/hk6iii5
บริการสอนทำ Live ติดตั้งระบบ และอื่นๆ
อย่าลืมกดติดตามในช่องทางเหล่านี้ สำหรับบทความและคลิปใหม่ๆ จากผมด้วยนะครับ ^^
Facebook Page https://fb.com/undervlog
Youtube Channel https://www.youtube.com/undervlogdotblog
ติดต่องานได้ที่อีเมล์ [email protected]
