Responsive website embedding

API
1

i’m looking for away to have my twitch stream overlay the front page of my website only when it is live I’ve posted another topic like this but since its a failed code and it seems to be getting ignored I thought i’d clarify and see if anyone has done this before.

2

The Twitch API allows you to check whether a channel is live through their “stream” endpoint which can be explained more in-depth here https://dev.twitch.tv/docs/v5/reference/streams

Simply make a GET request to this endpoint client side using javascript and when the stream is live embed the video player.

3

I’ve tried doing this multiple ways… however each attempt fails

4

Exactly what part of this process are you failing at? When you hit up the API or embedding the video player?

5

Here’s a script I put together on CodePen.

Class: TwitchEmbed

Usage:

  • Options

    • clientID - required - A valid Twitch app client ID for the instance to use in API requests.
    • channelID - optional if channelLogin is supplied - The user ID of a Twitch account to embed.
    • channelLogin - optional if channelID is supplied - The user login of a Twitch account to embed.
    • updateLoopTime - defaults to 300000 - How long between updating the live status in milliseconds.
    • embedParent - A DOM element.
    • autoEmbed- defaults to true - Automatically embed to embedParent if supplied.
    • muted - defaults to false - The embed starts muted.
    • autoplay - defaults to true - The embed plays immediately.
    • width - defaults to 640 - The width of the embed.
    • height - defaults to 360 - The height of the embed.

  • Methods you care might about

    • on - (eventName, callback) - Simple event emitter. Used to make your own code activate when the TwitchEmbed instance detects that the channel is live.
    • off - (eventName, callback) - Remove event callback that was previously added.
    • createEmbed - This method will construct an iframe element and append it to the embedParent from the options.
    • removeEmbed - Removes the current iframe embed.
    • updateLiveStatus - Force the instance to update the live status and possibly emit a change.
    • update - The preferred way to update the live status, especially to automatically embed and prevent overlapping updates.
    • startUpdateLoop - Start a timeout loop for updateLoopTime milliseconds, supplied in the options.
    • stopUpdateLoop - Stop that update loop at any time.

  • Events

    • online / live - Channel is online/live.
    • offline - Channel is offline.

Example

<div id="embed-attach"></div>

let te = new TwitchEmbed({
		clientID: 'some valid client ID',
		// channelID: '19571641', // an ID
		channelLogin: 'bobross', // or a login
		autoEmbed: true,
		embedParent: document.getElementById('embed-attach'),
		muted: true,
		autoplay: true,
		width: 480,
		height: 270
	});

te.on('online', stream => {
    console.log('Stream started', (Date.now() - new Date(started_at)) / 1000 / 60 / 60, 'hours ago');
});

te.on('offline', () => {
    console.log('Stream ended');
});
1 Like
6

The webpage only returns

let te = new TwitchEmbed({ clientID: 'Hidden', channelLogin: 'Hidden', // or a login autoEmbed: true, embedParent: document.getElementById('embed-attach'), muted: true, autoplay: true, width: 480, height: 270 }); te.on('online', stream => { console.log('Stream started', (Date.now() - new Date(started_at)) / 1000 / 60 / 60, 'hours ago'); }); te.on('offline', () => { console.log('Stream ended'); });
7

What do you mean?

8

It needs to be in a .js file referenced from the page or inlined. See <script> tag documentation on MDN for example.

9

Im looking for way to do this via PHP or another light exstention… as I don’t want to bloat the website.

10

I haven’t written PHP in a while but this should be the idea:

<?php
	// Options
	
	$clientID = ''; // Required
	$channelName = 'ninja';
	
	$muted = true;
	$autoplay = true;
	
	$width = 640;
	$height = 360;
	
	// Options end
	
	$baseURL = 'https://api.twitch.tv/helix/';
	$url = $baseURL . 'streams?user_login=' . $channelName;
	
	$ch = curl_init($url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Client-ID: ' . $clientID ]);
	$json = curl_exec($ch);
	curl_close($ch);

	$data = json_decode($json);
	if(count($data->data)) {
		$iframeSrc = 'https://player.twitch.tv/?channel=' . $channelName . '&muted=' . $muted . '&autoplay=' . $autoplay;
		echo '<iframe src="' . $iframeSrc . '" width="' . $width . '" height="' . $height . '" frameborder="0" scrolling="false" allowfullscreen="true"></iframe>';
	}
?>
1 Like
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.