8

Every time a user starts a live stream on YouTube, a new ID is generated for the stream, along with the corresponding video and URL. Currently, if I want to embed a live stream, I can use YouTube's sharing functions to add the video to my page in an iFrame.

When the user stops streaming, embeds of the live stream automatically switch to showing a recording of that stream. However, if the user starts broadcasting again later on, the embed will continue to show the old recording instead of switching to the new stream. This is because the video ID in the embed is hard-coded and each stream generates a new video ID.

My goal is to create an embed that will automatically display a user's live stream whenever they are streaming, and show an indication of whether they're online or offline. Is there an embed URL that would allow me to do this, or is there something in the API that might help?

I want to embed other streams that aren't just my own, so I need to do this in a way that doesn't require the streamer to log in or authenticate on my site.

IronFlare
  • 2,287
  • 2
  • 17
  • 27
TheDuckPone
  • 83
  • 1
  • 5
  • You'd be best off searching the [YouTube Data API](https://developers.google.com/youtube/v3/docs/) and maybe also the [YouTube Live Streaming API](https://developers.google.com/youtube/v3/live/getting-started), but I don't think there's anything that will do what you're looking for out of the box. As I see it, you're essentially trying to use YouTube as Twitch; the former is centered around videos, the latter around channels. Each service's APIs and embeds reflect this. – IronFlare Aug 13 '19 at 20:42
  • @IronFlare I'll try having a look at it but I'm a little lost. Because this is telling me how to only get mine, rather than getting the others too. I have an example site that already has what I'm looking for, if I showed you somehow it could be easier to explain? – TheDuckPone Aug 13 '19 at 20:51

2 Answers2

6

If you know the ID of a YouTube channel, and if that channel streams a livestream set to Public, an iframe with this URL will show it:

https://www.youtube.com/embed/live_stream?channel=YOUR_CHANNEL_ID_HERE

See https://stackoverflow.com/a/39582176/470749

Unfortunately I haven't found a similarly simple way to permanently embed the YouTube chat for that livestream.

Ryan
  • 22,332
  • 31
  • 176
  • 357
4

As far as I can tell, there's nothing built into the YouTube API that would allow you to embed a channel's current live stream automatically without knowing its ID. That said, it's possible to implement this yourself by writing a custom API and hosting it on your own server.

I recognize that this can look like a daunting task, so I've laid out some rough steps below to get you started.

  1. Set up an endpoint on your own server. You could accept a channelId argument or hard-code one, depending on how extensible you want this to be.
  2. Query YouTube's search endpoint1 for the specified channelId and eventType=live. An HTTPS request for this will look something like this:
    https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=[CHANNEL_ID]&eventType=live&maxResults=1&order=date&type=video&key=[YOUR_API_KEY]
  3. Check the search JSON response. If it returns any results (data.pageInfo.totalResults > 0), you know that the channel is live.
  4. If the channel is live, redirect the request to your server directly to the live video's embed URL based on the video's ID in the query response (data.items[0].id.videoId).
  5. If the channel isn't live, create a placeholder as you see fit, or make a second request to search for eventType=completed for past broadcasts, eventType=upcoming for scheduled broadcasts, or remove the eventType parameter to get the most recent video.

Once you have a server that can respond and redirect requests, you can embed an iFrame in your page that points directly to your API URL. Your server will handle the logic and, using the redirect, change the iFrame to a YouTube video player automatically, without requiring you to perform client-side logic or expose your API key2.

1 As with all YouTube API requests, search#list queries will count towards your daily quota. If you intend for this to be a high-traffic endpoint, you could either request an increased quota from YouTube, or implement a caching solution on your end to cut down on the number of requests you make.

2 GCP (Google Cloud Platform), which you'll use to manage your access the YouTube Data API, has pretty good protections against API key theft for times when you do have to expose it on the client side. That being said, best practice is to keep your key secret by storing it only on the server whenever possible.

IronFlare
  • 2,287
  • 2
  • 17
  • 27
  • Oh my God that sounds amazing! Thank you so so much, and sorry for my noobish questions. I'm trying to learn how todo this. How would I go about setting up a server first off all? And do you have an easier way of contact? :) – TheDuckPone Aug 14 '19 at 16:33
  • “Noobish” questions are part of the learning process, so no problem there! First, take a look at [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) and follow the instructions there. As for how to create a server, that's a very broad topic that's not a very good fit for Stack Overflow, let alone the comments. I use Node.js for my server-side development, so I'm most qualified to speak to that. There are many different options out there, but if you want to use Node.js, the [docs](https://nodejs.org/en/docs/guides/) can help you get started. – IronFlare Aug 14 '19 at 16:46
  • I think I get what your saying, what would I use to code or write this in? I know you said get a server todo it? Do you have anywhere easier for contact? It's alright if not :( – TheDuckPone Aug 19 '19 at 22:41
  • @TheDuckPone Personally, I would recommend you take a look at the [Node.js Documentation](https://nodejs.org/en/docs/guides/) to see how to get started with something like this. You can download Node.js for free and install it on your local machine to learn how to use it. Once you're relatively comfortable with that, there are services that you can use to host your completed code for free, if you need it. A great example of such a service (in my opinion, not affiliated) is [Glitch](https://glitch.com/). – IronFlare Aug 19 '19 at 22:47
  • @TheDuckPone As an addendum, for someone learning Node.js for the first time (*and there's no shame in being a beginner!*), you probably don't want to start out building *this* project. I'd start simple and build up your experience gradually with the help of Google and the Node.js documentation. Stack Overflow is not a place for long-term, one-on-one mentorship, so people don't really share contact information, myself included. There are plenty of tutorials out there to learn Node or any other backend framework like it, if you're feeling completely lost. – IronFlare Aug 19 '19 at 22:52