ดึง Comment จาก Facebook Live และ Youtube Live มาแสดงใน OBS Studio ด้วย Twidget

ผมเคยทำคลิปการดึง 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://www.undervlog.blog/undervlog-live-tools/

สนับสนุนช่องได้โดยการซื้อสินค้าจากลิงค์นี้ https://shp.ee/hk6iii5
บริการสอนทำ Live ติดตั้งระบบ และอื่นๆ https://bit.ly/2P7sJpT

อย่าลืมกดติดตามในช่องทางเหล่านี้ สำหรับบทความและคลิปใหม่ๆ จากผมด้วยนะครับ ^^

Facebook Page https://fb.com/undervlog​
Youtube Channel https://www.youtube.com/undervlogdotblog​

ติดต่องานได้ที่อีเมล์ [email protected]