Youtube stream chat box Unity plugin 

![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/ab8145c6-823c-6b17-d17c-f1f9637ffd50.gif)
I like to watch Vtuber since Hololive EN pop up.
But I feel something wrong when watching there LIVE show(I'm also a photographer too).
There is no audience under the stage, that make the LIVE show looks deserted.
So I have an idea, why don't we plugin  the chat box from Youtube to the LIVE show?
Let' start the project!
#Acknowledgements
This code will use part of @MCK9595 's code.
If you want to learn more about Youtube API, here is his article: https://qiita.com/MCK9595/items/fdbd543ff938febcd136
#How it work
![流程02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/28fec969-50ac-ed1b-9d34-68c0868a4427.png)
There will be three part in this code.
I have try to write all the code in Unity before, but YouTube Live Streaming API crash sometime, so I build a server to get the chat message, let Unity can run perfectly even when the API was crash.
Now let me teach you how to set up it step by step!
__In this article I'm only teaching how to use my code, I will explain how I wrote it if there is someone interesting.__

#Get chat message on YouTube
First you have to get your own Youtube API key.
[Here is how to get it.](https://qiita.com/MCK9595/items/fdbd543ff938febcd136#api%E3%82%AD%E3%83%BC%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96)(by @MCK9595)
After you get the key.
Here is my project file:
https://drive.google.com/drive/folders/1efYWB6uXzHWPgIa8q-jKh4uJenDltmdz?usp=sharing
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/97058a7c-e50f-933c-d7fe-e15bc271fa79.png)
Use [Visual Studio 2019](https://visualstudio.microsoft.com/zh-hant/downloads/) to open it, after you download all the file.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/ee6d0dd8-c80d-ad30-a1aa-356113336a20.png)
Open[Program.cs]  <--Thanks for @MCK9595 's code again.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/3326fbee-8cc9-fd2a-0bbc-a120813d8756.png)
Put your API key in line 21.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/216b9182-3ff4-f6b6-57a8-91adc5e550e8.png)
Copy the URL from the stream.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/e8b1bf48-92f4-0b11-c69c-830d86e61a2c.png)
Past it in line 23.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/f5704fa7-f4d3-c31d-3859-22318760fa50.png)
And delete [https://youtu.be/] in the URL.
ex:

```
https://youtu.be/9Ur1dFz76S0 ----> 9Ur1dFz76S0
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/6a0348e0-df7d-722f-764c-6913744b1357.png)
Run the server, than you can see the chat is in your server.
Next we set up the UDP server, send the chat into Unity.
#Set up the UDP IP & port
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/47f36829-d2ae-df18-54fb-f44910f34744.png)
You can find the IP set up and the port set up in line 48.
In this project, I run server and Unity in the same PC, so it set up on the local host(127.0.0.1).
###UPD port###
https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers
You can check the port number on this page, make sure the port is not busy.
#Unity side
https://drive.google.com/drive/folders/1wmvLosYNxCDCru0ex_pcPv4bxAhq_c2N?usp=sharing
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/f451970d-abb4-ec7d-db69-13aa21978e50.png)
Crate the [Text] object where want to show those chat.
Make sure you change the Tag to [Text].
![text.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/698cd252-4371-1375-4439-99a4873d9157.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/eb8df0fc-581f-7c55-e403-b13f3ed098f6.png)
Crate a [Empty object] and put the code in it, I put tree in it, but you can put as much as you want.
###How it work###
![unitySide.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/ec63a15b-3669-3dea-dd34-69b06a9f0781.png)
#How to add new
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/08a1030a-0542-5750-5ef1-db6e8b27d090.png)
Copy and past an other Server project file.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/eb8df0fc-581f-7c55-e403-b13f3ed098f6.png)
Put a new [AutoUDPReadLIVEMessage] in the empty object.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/654a6c68-3083-c7d2-e502-7aa107ae4dc1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/540986dc-2872-d54a-1775-3cb962bd1e88.png)
Make sure the Server is in the same port with [AutoUDPReadLIVEMessage] code in Unity.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/ddca15ed-6ff7-d6bb-a884-8bc29eac0df2.png)
Crate new Text, I crate six of it.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/006821a7-fa4b-c2c0-5dd1-148978c22f40.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/d28091bd-f7f0-9eb8-6575-b5e02b0d4a9e.png)
Change all the start and end number in [AutoUDPReadLIVEMessage] script.
![unitySide02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1088475/aa888825-a5e5-5397-5f08-aa3c2256ead1.png)
That's it!

#Tip
###Server crash###
1.Check you API key is open.(Sometime the key will close, prepare as more as you can)
2.Check the stream is still playing.
###Unity can't get the message###
1.Check your port is same with the server side.
2.You have to run the server and the Unity in the same PC.

##Have fun