I'm making this as a place for discussion following this post by @benhalpern https://dev.to/devteam/dev-feature-idea-self-serve-live-broadcasting-5bli

I wanted to open this up for discussion and figure out what features might be involved in the dev.to build. I am also willing to work on this project and contribute to it and this seemed like a good place to start!

Is your feature request related to a problem? Please describe. I've tried live streaming coding a handful of times before, but felt like there was never a good platform for developer focused live streaming.

Describe the solution you'd like I think that the best way to get this started is probably to embed one or more streaming platforms such as Twitch and Youtube Live. Most of the commentators in the original post seemed to think embedding was a good place to start.

One question this raises is how to deal with chat Ben mentioned in the original post, that dev.to has some in-house chat architecture build. This is one potential solution, but means that each stream may need to manage two chats. The main streaming platforms chat, and the dev.to chat Another solution would be to completely embed a streaming platform(s) including the chat. Both Twitch(1) and Youtube Live (2) support this behavior. A downside to this approach is that it makes it harder for the dev community to moderate directly.

restream.io does offer some sort of chat consolidation tools, but I don't know much about their offerings or how to integrate with them.

Describe alternatives you've considered One alternative is to host the live streaming platform natively. I will admit I don't have much experience in this domain, but I feel like this is a large amount of work to build and maintain, that is fairly tangentially to the current dev.to offerings and (uneducatedly) assumed infrastructure. However a native build might make the chat question easier, as having a native chat offering already is a huge plus!

(1) https://dev.twitch.tv/docs/embed/everything/ (2) https://support.google.com/youtube/answer/2524549?hl=en

What type of PR is this? (check all applicable)

• [x] Feature

Description

🎉 This PR is currently an MVP for embedding Twitch live streaming into Dev.to! 🎉

Overview

It adds a new profile field for Twitch Username. When this is added or updated, we subscribe to webhooks in Twitch for this username. There webhooks will tell us when the status of the Stream changes. Dev.to records this status and shows the Users streaming status (currently very minimally)

There is a new page where you can watch the Twitch stream for a Dev.to user, which embeds the full Twitch Experience including the video and chat.

UI

The UI for this slice is very minimal. There is a single page that shows a User's Stream with the Twitch Embed. This is a straight embed with nothing else on the page, I don't think it looks bad like this actually though.

The only UI that shows if a User is online currently is the Twitch social icon. I hijacked the existing Twitch icon if the user specified their Streaming username, and it will now link to the new twitch embed page. If you are ALSO online, you're social icon will be colored green.

The UI for enrolling in this is similarly minimal. There is just a single new profile field for the Twitch username

ToDo ✏️:

• [ ] Create a place to view all Users who are currently streaming
• [ ] Decide on final UI to indicate streaming state

Authentication

There is currently no User authentication with Twitch, as none is needed for what we need (webhooks and embedding). This could lead to a better UX than simply entering your Username however, so I still want to consider if we should use oauth for this

ToDo ✏️:

• [ ] Make a final decision on OAuth

Twitch API

This requires creating an account with Twitch and getting API tokens. The necessary ENV variables are added to the Envfile, and the sample config!

The Twitch API works by using these ENV vars to create tokens which are passed with every request to authenticate. This PR uses the Rails cache to store these tokens until they expire, and refreshes them when this happens. These tokens are currently used in the process of creating the webhooks!

ToDo ✏️:

• [x] Create Twitch Tokens for Production
• [ ] Setup Heroku Scheduler task to register everyone for webhooks
• [ ] Do live testing of the webhook verification logic

Related Tickets & Documents

Issue I made for this feature: https://github.com/thepracticaldev/dev.to/issues/2317

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

In this GIF I am faking the DB value that says I am streaming to get the green Twitch icon. This is why I do not actually have a live stream to watch when I go to the page.

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [ ] no documentation needed

What gif best describes this PR or how it makes you feel?