Live Input
이 버튼을 누르면 -> streams/add 링크로 이동해서 live stream을 생성할 수 있는 add화면을 생성해 줄 예정이다.
streams/add 에서 title 하나만 생성해서 -> button을 누르면 라이브 스트리밍이 생성되도록 실행할 것이다.
이렇게 input name="title"인 값을 넘겨서 validation 검증을 거칠 것이다. 이전에 많이 해봤기 때문에 설명은 생략하도록 하겠다!
actions.ts
간단하게 title 하나만 받아서 검증을 하기 때문에, formData에서 받은 title을 바로 title=z.string()에 검증을 시작한다.
이렇게 live streaming을 하기 위한 검증은 끝낸 상태이다.
그럼, live streaming을 생성하기 위해서는 model이 필요하다 (데이터에 저장해야 하기 때문!)
id, title, created_at, updated_at은 기본적으로 필요하고, live streaming의 경우, user가 생성하기 때문에 user와, cloudflare에서 받을 stream_key와 stream_id도 추가해 주었다.
이제 cloudflare와 연결(?)해보도록 하겠다.
이때도 5달러 정도 결제를 해야 한다.. 🥲 눈물을 머금고 결제 완료..! 
title을 검증을 완료한 뒤,
fetch를 통해서 cloudflare와 소통을 해야 한다.
공식 홈페이지에 나와있는 방식 그대로 fetch를 진행하면 된다.
여기서, recoding : { mode : 'automatic' }인 이유는 -> 사용자가 실시간으로 LIVE STREAMING을 볼 수 있어야 하기 때문이다.
또한 title은 validation이 끝난 (results.data) -> title를 넘겨주었다.
이렇게 하고, console.log(data)를 찍어보면, 
요러한 정보가 나오는 것을 확인할 수 있다.
여기서 우리가 필요한 것은 result.uid, result.rtmps.streamKey이다.
db.liveStream.create({}) 를 통해서 이전에 우리가 model에 정의해 두었던 stream_id, stream_key를 data.result.uid, data.result.rtmps.streamKey를 각각 data에 저장시켜 주었다.
저장이 성공적으로 이루어진다면, redirect를 통해서 streams/${stream.id}로 이동을 시켜주었다!
live streaming이 생성이 완료가 된다면, 이렇게 stream/[id]로 이동을 하게 되면서,
cloudflare와 prisma studio에서도 각각 저장이 완료된 것을 확인할 수 있다!
Live Streaming
이제, 라이브 스트리밍을 어떻게 하는지 배워볼 시간이다.
먼저, 나는 pc로 라이브 스트리밍을 하기 위해서 -> OBS studio를 설치를 해야 한다.
설치를 다 했다면,
위에서 stream/[id] 폴더를 생성해서 id를 받아온 streams의 detail한 정보들을 보여주면 된다.
파라미터로 넘어온 id(stream의 id)를 넘겨주어서 liveStream.findUnique({}) 를 통해서 데이터를 불러왔다.
먼저, 공식 홈페이지에서 나타난 방식대로 스트리밍한 영상을 보여주기 위해서는 <iframe>을 통해서 보여주게 된다.
cloudflare에서 제공하는 domain과, 식별자를 넣어주면 된다.
또한, stream.user.avatar가 있다면 ? <Image/> 태그로 넣어주고, 아니라면 <UserIcon/> 을 넣어주었다.
또한. stream.userId가 session.id와 같을 경우, 즉, 로그인한 사용자가 스트리밍까지 하고 있다면, strem을 할 수 있는 URL과 Secret Key를 보여주게 되었다.
모든 사용자에게 보여주게 되면, 아무나 이 Secret key로 라이브 스트리밍을 할 수 있기 때문에 선택적으로 보여주게 되었다. 
그럼 이렇게 나타나는 것을 확인할 수 있다!
