DEV Community

Corey Alexander
Corey Alexander

Posted on

I opened a PR that adds Twitch Live Streaming to Dev.to

At the beginning of this month Ben made a post about being interested in adding some Live Streaming integration into Dev.to!

I had been getting interested in Streaming for Coding and thought this would be a really cool idea! I liked the idea of having a place where coding and developer focused streams could live and be found. So I opened a Github Issue to get started!

Self-serve live broadcasting #2317

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

And today... Drum roll please...

I opened the MVP PR for this! It definitely does not have a super polished UI but its a good start I think!

Here is a PR of showing a basic embed (sorry I wasn't streaming while making the GIF so the embed is a bit boring)

2019-04-27 22 21 36

Here is the PR that I opened! I would love some input of how to finish up the last few UI bits!

Embed Twitch Live Streaming #2591

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. 2019-04-27 22 21 36

Added to documentation?

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

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

alt_text

Latest comments (5)

Collapse
 
missamarakay profile image
Amara Graham

This is extra neat! Telling all my friends right now!

Collapse
 
ben profile image
Ben Halpern

Can’t wait to dig into this tomorrow!

Collapse
 
jess profile image
Jess Lee

πŸ‘πŸ‘πŸ‘

Collapse
 
rhymes profile image
rhymes • Edited

Corey, this is awesome! I read the PR description and you did stellar work, lots of explaining about why this and that are the way they are, it's truly a poster child of a PR. Loved the self review as well.

I added some comments mostly about code organization (to adhere to the current self emerging standard of where to put things in the code base, to decrease "entropy" :D). Great job overall!

Collapse
 
coreyja profile image
Corey Alexander • Edited

Thanks for the speedy review! Will definitely get some commits pushed up for all the code organization stuff!
I wasn't sure where to put stuff and decided to just get started instead of spending my time on that so thanks for the all the guidance there!