<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PlayItLive &#8211; Tomorrow in retrospect</title>
	<atom:link href="https://erik.zalitis.se/category/playitlive/feed/" rel="self" type="application/rss+xml" />
	<link>https://erik.zalitis.se</link>
	<description>- My thoughts but no prayers</description>
	<lastBuildDate>Wed, 17 Nov 2021 19:11:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://erik.zalitis.se/wp-content/uploads/2020/05/cropped-ezs-1024x659-1-32x32.png</url>
	<title>PlayItLive &#8211; Tomorrow in retrospect</title>
	<link>https://erik.zalitis.se</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">178113661</site>	<item>
		<title>Adding &#8220;Now playing&#8221; info to OBS for PlayIt Live</title>
		<link>https://erik.zalitis.se/playitlive/adding-now-playing-info-to-obs-for-playit-live/</link>
					<comments>https://erik.zalitis.se/playitlive/adding-now-playing-info-to-obs-for-playit-live/#respond</comments>
		
		<dc:creator><![CDATA[Erik Zalitis]]></dc:creator>
		<pubDate>Tue, 16 Nov 2021 16:41:07 +0000</pubDate>
				<category><![CDATA[PlayItLive]]></category>
		<guid isPermaLink="false">https://erik.zalitis.se/?p=1253</guid>

					<description><![CDATA[Updated on 2021-11-17 due to some minor errors and omissions and adding a walk-through video. Normally I take a pride in making my code presentable, but this is a bit of a rough example of JavaScript and HTML. So please forgive my slap-dash approach to the problem. The code works fine and has served its [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Updated on 2021-11-17 due to some minor errors and omissions and adding a walk-through video.</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="782" src="https://erik.zalitis.se/wp-content/uploads/2021/11/obs2-1024x782.jpg" alt="" class="wp-image-1257" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/obs2-1024x782.jpg 1024w, https://erik.zalitis.se/wp-content/uploads/2021/11/obs2-300x229.jpg 300w, https://erik.zalitis.se/wp-content/uploads/2021/11/obs2-768x587.jpg 768w, https://erik.zalitis.se/wp-content/uploads/2021/11/obs2.jpg 1355w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>This is what we&#8217;re building today&#8230;.</figcaption></figure>



<p class="wp-block-paragraph">Normally I take a pride in making my code presentable, but this is a bit of a rough example of JavaScript and HTML. So please forgive my slap-dash approach to the problem. The code works fine and has served its purpose well for almost a year. Today I use a selfwritten API and JSON to populate text data.</p>



<p class="wp-block-paragraph">The intended effect is to get a &#8220;Now playing&#8221; function in Open broadcaster (OBS) that shows what PlayIt Live is playing, like in the picture above.</p>



<p class="wp-block-paragraph">What you need</p>



<ul class="wp-block-list"><li>PlayIt Live.</li><li>The &#8220;Now playing&#8221; plugin.</li><li>OpenBroadcaster (OBS) or Streamlabs OBS</li><li>A local IIS (Internet Information Services) webserver.</li><li><a rel="noreferrer noopener" href="https://ericade.radio/pil/trackloader.zip" target="_blank">My code</a></li><li>All components need to run on the same operating system. (Windows 10 or Windows Server 201x recommended)</li></ul>



<h2 class="wp-block-heading">Visual learner? &#8211; Try the YouTube video, with my walk-through</h2>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="HowTo: add a &quot;Now playing&quot;-feature to your OBS for PlayIt Live" width="696" height="392" src="https://www.youtube.com/embed/6qxr5jeMwYo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><figcaption>Hit the full screen on this one, to actually see something. <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f642.png" alt="🙂" class="wp-smiley" style="height: 1em; max-height: 1em;" /></figcaption></figure>



<h2 class="wp-block-heading">Steps</h2>



<p class="wp-block-paragraph">First, you need to install a local IIS. OBS seems to support JavaScript-execution on locally included files in the &#8220;Browser source&#8221; widget, but this requires lowering the security of OBS, and also, I have not tested it. So that&#8217;s an alternate route if you do not wish to have a local IIS on your broadcasting server. But in this guide, we will use a local IIS. It&#8217;s very useful for lots of other purposes such as rebroadcasting news. Please be adviced, it will be setup NOT to be reachable outside the server, as this could be insecure.</p>



<p class="wp-block-paragraph">Open the control panel and click &#8220;Programs and features&#8221;.</p>



<figure class="wp-block-image size-full"><img decoding="async" width="506" height="418" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image.png" alt="" class="wp-image-1260" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image.png 506w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-300x248.png 300w" sizes="(max-width: 506px) 100vw, 506px" /><figcaption>Programs and features.</figcaption></figure>



<p class="wp-block-paragraph">Then select &#8220;Turn Windows features on or off&#8221;.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="275" height="251" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-1.png" alt="" class="wp-image-1261"/><figcaption>Easy as pie</figcaption></figure>



<p class="wp-block-paragraph">Check the following boxes:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="413" height="366" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-2.png" alt="" class="wp-image-1262" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-2.png 413w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-2-300x266.png 300w" sizes="auto, (max-width: 413px) 100vw, 413px" /><figcaption>No FTP, who uses that anyway?</figcaption></figure>



<p class="wp-block-paragraph">The open the manager.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="340" height="92" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-3.png" alt="" class="wp-image-1264" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-3.png 340w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-3-300x81.png 300w" sizes="auto, (max-width: 340px) 100vw, 340px" /></figure>



<p class="wp-block-paragraph">Now setup the bindings for the site like this:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="671" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-4-1024x671.png" alt="" class="wp-image-1265" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-4-1024x671.png 1024w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-4-300x197.png 300w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-4-768x503.png 768w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-4.png 1048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Bindings can be found on the menu to the right in the console</figcaption></figure>



<p class="wp-block-paragraph">This ensures that noone outside the server will ever reach the web site. The web site is located on %SystemDrive%\inetpub\wwwroot, which generally means c:\inetpub\wwwroot unless you installed your Windows-installation on some other drive.</p>



<p class="wp-block-paragraph">Good! All set.</p>



<p class="wp-block-paragraph"><em>Now download <a rel="noreferrer noopener" href="https://ericade.radio/pil/trackloader.zip" target="_blank">my script here</a>. </em>(If you haven&#8217;t already)</p>



<p class="wp-block-paragraph"><em>Then create a folder called nowplaying under wwwroot.</em></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="566" height="140" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-9.png" alt="" class="wp-image-1300" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-9.png 566w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-9-300x74.png 300w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-9-150x37.png 150w" sizes="auto, (max-width: 566px) 100vw, 566px" /><figcaption>Ah.. good&#8230;</figcaption></figure>



<p class="wp-block-paragraph">Unpack the zip-archive to <span style="text-decoration: underline;">your Desktop </span>and move the extracted file (<em>trackloader.htm</em>) to c:\inetpub\ww<em>w\nowplaying\. The file &#8220;trackloader.htm&#8221; should now be directly under the folder itself. Don&#8217;t store the zip-archive itself under the wwwroot.</em></p>



<p class="wp-block-paragraph">Create an empty file on <span style="text-decoration: underline;">your desktop</span> and call it tracks.htm.</p>



<p class="wp-block-paragraph"><em>Move that file into c:\inetpub\wwwroot\nowplaying\</em></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="560" height="148" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-10.png" alt="" class="wp-image-1308" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-10.png 560w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-10-300x79.png 300w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-10-150x40.png 150w" sizes="auto, (max-width: 560px) 100vw, 560px" /><figcaption>It should look like this, now!</figcaption></figure>



<p class="wp-block-paragraph"><em>This will ask for administrative permissions, which you must accept.</em></p>



<h2 class="wp-block-heading">Permissions to write&#8230;</h2>



<p class="wp-block-paragraph">All files in the nowplaying folder are readonly, and that&#8217;s totally fine. In fact, they must be. We don&#8217;t want to be insecure. But tracks.htm must be writable by the <strong><span style="text-decoration: underline;">same account that PlayIt Live runs as.</span></strong></p>



<p class="wp-block-paragraph">Select tracks.htm, right-click it and select properties.</p>



<p class="wp-block-paragraph">Click the Security </p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="351" height="520" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-11.png" alt="" class="wp-image-1313" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-11.png 351w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-11-203x300.png 203w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-11-150x222.png 150w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-11-300x444.png 300w" sizes="auto, (max-width: 351px) 100vw, 351px" /><figcaption>Just as Swenglish as I am&#8230;</figcaption></figure>



<p class="wp-block-paragraph">Add that account in question with write permissions. Don&#8217;t add Everyone or authenticated users. </p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-12.png" alt="" class="wp-image-1317" width="357" height="448" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-12.png 357w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-12-239x300.png 239w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-12-150x188.png 150w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-12-300x376.png 300w" sizes="auto, (max-width: 357px) 100vw, 357px" /><figcaption>Alla (Swedish) = Everyone. Bad DJ, no cookie! <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f609.png" alt="😉" class="wp-smiley" style="height: 1em; max-height: 1em;" /></figcaption></figure>



<p class="wp-block-paragraph">If you are having an existential crisis, press Windows + R, type in cmd.exe and click OK. Then type whoami into the black command prompt. You must be logged in with the same account that PlayIt Live normally is logged in while running. The command will tell you your identity. That must go inte the dialog above. Don&#8217;t forget checking &#8220;Write&#8221;.</p>



<p class="wp-block-paragraph"><strong>So, onto the &#8220;Now playing&#8221; plugin</strong></p>



<p class="wp-block-paragraph">I assume PlayIt Live is installed and properly running. </p>



<p class="wp-block-paragraph"><em>Open the &#8220;Now Playing&#8221;-plugin.</em></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="752" height="562" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-5.png" alt="" class="wp-image-1268" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-5.png 752w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-5-300x224.png 300w" sizes="auto, (max-width: 752px) 100vw, 752px" /><figcaption>Ready to rock!</figcaption></figure>



<p class="wp-block-paragraph">Set it up like in the picture and save it.</p>



<p class="wp-block-paragraph">Open a web browser and try:</p>



<p class="wp-block-paragraph">http://127.0.0.1/nowplaying/trackloader.htm</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="765" height="89" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-6.png" alt="" class="wp-image-1270" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-6.png 765w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-6-300x35.png 300w" sizes="auto, (max-width: 765px) 100vw, 765px" /><figcaption>It&#8217;s aaaaaaalive!!!! It&#8217;s aaaaaaalive!!!</figcaption></figure>



<p class="wp-block-paragraph">Almost ready. Now open OBS or SLOBS and setup a new browser source.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="727" height="489" src="https://erik.zalitis.se/wp-content/uploads/2021/11/image-8.png" alt="" class="wp-image-1296" srcset="https://erik.zalitis.se/wp-content/uploads/2021/11/image-8.png 727w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-8-300x202.png 300w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-8-150x101.png 150w, https://erik.zalitis.se/wp-content/uploads/2021/11/image-8-696x468.png 696w" sizes="auto, (max-width: 727px) 100vw, 727px" /><figcaption>&#8230; And so do we&#8230;.</figcaption></figure>



<p class="wp-block-paragraph">Setup the source the way you want. The settings in picture above may have to be adjusted depending on your ideas as how to display it on the page. But this should now, work. Time for a beer&#8230;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://erik.zalitis.se/playitlive/adding-now-playing-info-to-obs-for-playit-live/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1253</post-id>	</item>
	</channel>
</rss>
