{"id":237,"date":"2020-08-19T04:31:58","date_gmt":"2020-08-19T08:31:58","guid":{"rendered":"https:\/\/disc4life.com\/blog\/?p=237"},"modified":"2020-08-19T16:39:38","modified_gmt":"2020-08-19T20:39:38","slug":"automated-embedded-twitch-video-iframe","status":"publish","type":"post","link":"https:\/\/disc4life.com\/blog\/?p=237","title":{"rendered":"Automated Embedded twitch video iframe"},"content":{"rendered":"\n

If you host your website on a Linux server, and have SSH access to your website then you can create an automated embedded twitch video iframe that shows your twitch channel, or who you’re hosting. <\/p>\n\n\n\n

This is a simple way to support people on twitch. Plus if your website gets more views than your twitch channel then it could make a big difference. <\/p>\n\n\n\n

Now I believe all browsers mute iframes automatically. To count as views the video has to be manually unmuted by the person using your website. <\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Setup autohosting on your twitch account.<\/strong><\/p>\n\n\n\n

Login to twitch, click on your user icon in the upper right, click on Creator Dashboard. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

On the dashboard click on Preferences, and then Channel. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Scroll down to Auto Hosting.
Enable auto host channels, and then click on Host list. Add who ever you want to your Host list. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Create an app on dev.twitch.tv<\/strong><\/p>\n\n\n\n

Goto https:\/\/dev.twitch.tv\/login<\/a> and use your twitch credentials to login, then click on Your Console<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Click on Applications<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Click on Register your Application<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Enter a unique name for your application
Enter http:\/\/localhost<\/strong> for the OAuth Redirect URL
Choose any category, I’m using “Website Integration”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Click on the “Manage<\/strong>” button on your new application.
Copy your Client ID<\/strong> to a notepad
Ask for a New Secret<\/strong> and copy that as well. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Open command prompt in Windows, or terminal in Linux and ssh into your server \/ website. If you’re using Windows SSH must be enabled for command prompt in Windows.<\/a> <\/p>\n\n\n\n

I’ve made the following code available here for easier copy and pasting. https:\/\/disc4life.com\/embeddedtwitchiframe.txt<\/a><\/p>\n\n\n\n

Modify this curl command using the client_id<\/span><\/strong> and client_secret<\/span><\/strong> from the step above, then run the curl<\/strong> request.<\/p>\n\n\n\n

curl -X POST 'https:\/\/id.twitch.tv\/oauth2\/token?client_id=wadipzmhnzr5pchxzzngo2hufv6nut<\/span><\/strong>&client_secret=x2jq69uxye3496wql1oplq5v1kcl57<\/span><\/strong>&grant_type=client_credentials'<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Note<\/strong>: I do recommend using the website user when logging in via SSH. I was lazy, and used root. If you’re not familiar with permissions then use the website user. In this case the website user would have been disc4lif<\/h5>\n\n\n\n
The access token<\/strong>, which is your OAuth ID<\/strong>, expires in about 2 months.
Now we take this information to get your channel id<\/strong> from the twitch API.  <\/p>\n\n\n\n
Modify this curl command with your client id<\/span><\/strong>, and the access token<\/span><\/strong> you just received.  
Modify the login with your twitch name. If login=DJrunkie<\/strong> is not changed then you will just get the information for my channel from the twitch api.<\/p>\n\n\n\n
 curl -H 'Client-ID: wadipzmhnzr5pchxzzngo2hufv6nut<\/span><\/strong>' -H 'Authorization: Bearer ezf7id5004m7gzz452770ha7y4oiw1<\/span><\/strong>' -X GET 'https:\/\/api.twitch.tv\/helix\/users?login=DJrunkie<\/strong>'<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Now use the channel ID<\/strong> to make a request checking if we are streaming, or if we are currently hosting someone.  Again replace the client id<\/span><\/strong>, and access token<\/span><\/strong>.  Then replace host=27941300<\/strong> with your channel ID<\/strong>.<\/p>\n\n\n\n
curl -H 'Client-ID: wadipzmhnzr5pchxzzngo2hufv6nut<\/span><\/strong>' -H 'Authorization: Bearer ezf7id5004m7gzz452770ha7y4oiw1<\/span><\/strong>' -X GET 'https:\/\/tmi.twitch.tv\/hosts?include_logins=1&host=27941300<\/strong>'<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The top line of output is if were hosting someone, the bottom is if were streaming.<\/p>\n\n\n\n
Note: Twitch will not embed video on an http site.  You must have an SSL installed and use https:\/\/ on your website<\/h5>\n\n\n\n
And with this info we can now create a script to update an iframe on our website. 
This will show an iframe on https:\/\/disc4life.com\/hostingexample\/index.php<\/a><\/p>\n\n\n\n
vim public_html\/hostingexample\/index.php\n\n<p align=\"left\">Give my friends on twitch a view!<\/p>\n\n<iframe src='https:\/\/player.twitch.tv\/?channel=tedster009<\/span><\/strong>&enableExtensions=true&muted=false&parent=disc4life.com&parent=www.disc4life.com<\/span><\/strong>&player=popout&volume=.00001' frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"600\" width=\"1066\"><\/iframe><\/code><\/pre>\n\n\n\n
This will show an iframe on https:\/\/disc4life.com\/hostingexample\/news.php<\/a><\/p>\n\n\n\n
vim public_html\/hostingexample\/news.php\n\n<h3 align=\"center\">Give my friends on twitch a view!<\/h3>\n<p align=\"center\"> \n<iframe src='https:\/\/player.twitch.tv\/?channel=tedster009&enableExtensions=true&muted=false&parent=disc4life.com&parent=www.disc4life.com&parent=vpn.disc4life.com&player=popout&volume=.00001' frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"300\" width=\"525\"><\/iframe> \n<\/p>\n<\/code><\/pre>\n\n\n\n
Note:<\/strong> For text editing in SSH use nano <\/strong>if you prefer.  The text editor vim<\/strong> can be confusing if you’re not familiar with it.<\/p>\n\n\n\n
Change channel=tedster009<\/strong> to whose channel you want.
Replace disc4life.com&parent=www.disc4life.com&parent=vpn.disc4life.com<\/span><\/strong> with your website names. 
Change the height and width to what you prefer, some 16:9 ratio, this is in pixels.
<\/p>\n\n\n\n
<\/p>\n\n\n\n
This script will update the index.php iframe with who you’re currently hosting, or your name if you’re streaming.  <\/p>\n\n\n\n
<\/p>\n\n\n\n
Modify all \/home\/disc4lif\/public_html\/hostingexample\/<\/span> directory paths<\/strong> here with the full path<\/strong> to the website files the script will be updating.<\/p>\n\n\n\n
Update nhosting=<\/span><\/strong> and istream=<\/span><\/strong> with your last the curl<\/strong> command
Update cname=djrunkie<\/strong> with your channel name.<\/p>\n\n\n\n
vim \/home\/disc4lif\/twitchcheck.sh\n\n#!\/bin\/bash\n#check for the iframe line from the file were updating, and cut out the text were interested in changing\nchosting=$(grep iframe \/home\/disc4lif\/public_html\/hostingexample\/index.php<\/span><\/strong> | cut -f3 -d= | cut -f1 -d\\&)\n\n#check the twitch api to see if this information has changed\nnhosting=$(curl -H 'Client-ID: wadipzmhnzr5pchxzzngo2hufv6nut' -H 'Authorization: Bearer ezf7id5004m7gzz452770ha7y4oiw1' -X GET 'https:\/\/tmi.twitch.tv\/hosts?include_logins=1&host=27941300'<\/span><\/strong> | cut -f14 -d\\\")\n\n#we also need to check the twitch api to see if we are streaming.\nistream=$(curl -H 'Client-ID: wadipzmhnzr5pchxzzngo2hufv6nut' -H 'Authorization: Bearer ezf7id5004m7gzz452770ha7y4oiw1' -X GET 'https:\/\/tmi.twitch.tv\/hosts?include_logins=1&host=27941300'<\/span><\/strong> | cut -f6 -d\\\")\n\n#our channel name\ncname=djrunkie<\/strong>\n\n#If were currently streaming, and the chosting value does not equal our twitch name, then update chosting with our twitch name in our files.  Otherwise if chosting already = nhosting, or nhosting is blank then exit because either its already set, or were not hosting anyone currently.  Otherwise chosting needs to be updated with nhosting.\nif [[ \"$istream\" = host_login ]] && [[ \"$chosting\" != \"$cname\" ]]\n then\n sed -i \"s\/channel=$chosting\/channel=$cname\/g\" \/home\/disc4lif\/public_html\/hostingexample\/index.php<\/span><\/strong>\n sed -i \"s\/channel=$chosting\/channel=$cname\/g\" \/home\/disc4lif\/public_html\/hostingexample\/news.php<\/span><\/strong>\n  elif [[ \"$chosting\" = \"$nhosting\" ]] || [[ \"$nhosting\" = '' ]]\n   then\n   echo \"They're the same dude, or nhosting was blank\"\n   exit\n else\n sed -i \"s\/channel=$chosting\/channel=$nhosting\/g\" \/home\/disc4lif\/public_html\/hostingexample\/index.php<\/span><\/strong>\n sed -i \"s\/channel=$chosting\/channel=$nhosting\/g\" \/home\/disc4lif\/public_html\/hostingexample\/news.php<\/span><\/strong>\nfi<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Create a script that grabs a new OAuthID<\/strong> token, and updates the token in the twitchcheck.sh<\/strong> file. <\/p>\n\n\n\n
Modify both directory paths<\/span><\/strong> here with the full path to the twitchcheck.sh<\/strong> script.
Update ntoken=<\/span><\/strong> with your first curl<\/strong> command <\/p>\n\n\n\n
vim newtoken.sh\n\n#!\/bin\/bash\n\n#get the current token from the twitchcheck script we just created\nctoken=$(grep -m 1 'Bearer' \/home\/disc4lif\/twitchcheck.sh<\/span><\/strong> | cut -f4 -d\\' | awk {'print $3'})\n\n#get a new token using our client_id and client_secret from our twitch application\nntoken=$(curl -X POST 'https:\/\/id.twitch.tv\/oauth2\/token?client_id=wadipzmhnzr5pchxzzngo2hufv6nut&client_secret=x2jq69uxye3496wql1oplq5v1kcl57&grant_type=client_credentials'<\/span><\/strong> | cut -f4 -d\\\")\n\n#replace the current token with the new token\nsed -i \"s\/$ctoken\/$ntoken\/g\" \/home\/disc4lif\/twitchcheck.sh<\/span><\/strong><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Now make a crontab executing these scripts. The first one I run every five minutes. The second one I run once a month every month.  <\/p>\n\n\n\n
Replace \/home\/disc4lif\/<\/strong> with the path to your scripts. <\/p>\n\n\n\n
crontab -e\n\n*\/5 * * * * sh \/home\/disc4lif\/<\/strong>twitchcheck.sh\n* 2 7 *\/1 * sh \/home\/disc4lif\/<\/strong>newtoken.sh<\/code><\/pre>\n\n\n\n
Now you have an embedded twitch iframe video on your website that updates automatically according to if you’re streaming, or if you’re hosting someone.  <\/p>\n\n\n\n
Check out the video if you’re confused about any part of the process!<\/p>\n\n\n\n
\n