Responsive website embedding

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.

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.

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

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

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

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'); });

What do you mean?

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

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

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

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