Multiple embedded stream twitch API

API
1

Hi, I’m new to these API. and I’m having troubles finding a solution for a live stream for each match.
What I want to do is to have a specific twitch channel ready and I will just switch channels depending on the match and the streamer. Is there any way for me to do such thing? Thanks!

2

Hi,

If I understand, you have to prepare an iframe and just change the iframe src (twitch player channel url) each time you want to change the channel.

3

I definitely get the logic by your reply but I really don’t know how or where to start since I’m new to JS and I’m a backend dev myself. is there any reference you could spare to me regarding to my question sir? thanks!

4

Embedding is documented here

5

I already get this part sir, the only thing I’m having problem is how to switch to different twitch stream channels

6

Assuming Embed Everything

    <script type="text/javascript">
      var embed = new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat",
        layout: "video",
        autoplay: false
      });

      function changeChannel(chan) {
        var player = embed.getPlayer();
        player.setChannel(chan);
      }
    </script>
1 Like
7

I’ve already tried this based on the documentation but what I want to happen is to have an option to switch to another stream channel.

8 
function changeChannel(chan) { 
var player = embed.getPlayer(); 
player.setChannel(chan); 
}

That’s what this bit does…

how are you thinking the change will be triggered?

9

that’s exactly my thoughts, the function changeChannel doesn’t make any sense or it lacks something

10

You need to create something to call that function.

For example:

<a href="#nowhere" onclick="changeChannel('somechan');">Test</a>

11

I mean, where do you put the “channel” to be switched if the changeChannel will be triggered?

12 
<html>
<head>

</head>
<body>
	
	<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

	<div id="player"></div>
	
	<button onclick="changeChannel('beardageddon');">beardageddon</button>
	
	<button onclick="changeChannel('luckynos7evin');">luckynos7evin</button>
	
	<button onclick="changeChannel('barrycarlyon');">barrycarlyon</button>
	
	<script type="text/javascript">
	  var options = {
        width: 854,
        height: 480,
        channel: "monstercat",
        layout: "video",
        autoplay: true
	  };
	  var embed = new Twitch.Player("player", options);	  
	  
      changeChannel = (chan) => {
        embed.setChannel(chan);
      }
	  
	</script>

</body>
</html>
1 Like
13

Okay cool, but how about I change the on click button into a text field? whereIn I can do a "<input type =“text” name=“stream_channel>” where stream_channel stands as a table row in the database.

and on the channel is

channel: “stream_channel”

is it possible to do it that way sir? thank you for the reply earlier!

14

You can do this with javascript.

If you don’t know how, first you need to learn the basics of JavaScript.

This is the Twitch 3rd party developers forum, it is unwise to rely on us for Basic Javascript Support.

<input type="text" name="channel" id="channel" />
<input type="button" onClick="changeChannel(document.getElementById('channel').value)" value="Go" />
2 Likes
15

oh wow, amazing it works. I hope you don’t mind for another question,
assume that I’ll put the input text to a modal, then the channel will be the same value as the channel on the js,

where it goes like

$(document).on(‘click’, ‘#matches-table .editStream’, function() {
$tr = $(this).closest(‘tr’).hasClass(‘child’) ?
$(this).closest(‘tr’).prev() : $(this).closest(‘tr’);
var match = matchesTable.row($tr).data();
(’#matchesForm :input[name=channel].val(match.channel);
)};

so instead of the default channel: “monstercat” it will be the same value as the database table column. thanks for the reply sir!

16

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