Spinning wheel on Player Embeds in OBS after Embed Update

API
1

Goal: Get an embedded player working in OBS as a browser source.

Problem: After making the necessary updates to my HTML file (iframe embed), the embedded player still does not play successfully in OBS as a browser source. When OBS tries to load the stream, it just shows a spinning wheel.

My Setup: I have a local webserver (IIS) running two different HTML files, neither of which work successfully. One HTML file is the iframe-based embedded player. The other is the javascript-based embedded player. I have a browser source in OBS loading the URL “http://localhost/iframeplayer.html”. When OBS tries to load the browser source, it just shows a spinning wheel indicating that the stream is trying to load.

From what inspection I’ve been able to do, it does not look like OBS is able to successfully fetch the stream itself even though it’s able to load the embedded player, although I could definitely be wrong here.

Any ideas on how to fix this, or is this something that has to be addressed by the embedded player team and/or the OBS developers?

Here is the code for the iframe player I’m using:

<html>
  <body>
    <iframe
       src="https://player.twitch.tv/?channel=CloneKorp&parent=localhost"
       width="1920"
       height="1080"
       frameborder="0"
       scrolling="no"
       preload="auto"
       autoplay="true"
       muted="true"
       allowfullscreen="true">
    </iframe>
  </body>
</html>

I can successfully load the webpage and see the embedded stream if I open the webpage with FireFox or Chrome. OBS does not load the stream successfully though.

I found that one could attach to OBS via a websocket connection through Chrome DevTools, and this is what I’m seeing in the logs:

Capture-Embedded-iframe-player-OBS-Chrome-DevTools
Capture-Embedded-iframe-player-OBS-Chrome-DevTools1967×984 136 KB

Here’s the output in the Chrome DevTools console:

Access to fetch at 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm' from origin 'https://player.twitch.tv' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

wasmworker.min-baf151b….js:1 wasm streaming compile failed: TypeError: Failed to fetch

wasmworker.min-baf151b….js:1 falling back to ArrayBuffer instantiation

Access to fetch at 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm' from origin 'https://player.twitch.tv' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

http?channel=CloneKorp&parent=localhost:1 Access to fetch at 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm' from origin 'https://player.twitch.tv' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

chrome-extension://invalid/:1 Failed to load resource: net::ERR_FAILED

wasmworker.min-baf151b….js:1 Access to XMLHttpRequest at 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm' from origin 'https://player.twitch.tv' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

chrome-extension://invalid/:1 Failed to load resource: net::ERR_FAILED

wasmworker.min-baf151b….js:1 DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm'.
    at Object.n.readBinary (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:17129)
    at $ (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21257)
    at https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21791

wasmworker.min-baf151b….js:1 DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm'.
    at Object.n.readBinary (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:17129)
    at $ (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21257)
    at https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21791

wasmworker.min-baf151b….js:1 failed to asynchronously prepare wasm: abort({"stack":"Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm'.\n    at Object.n.readBinary (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:17129)\n    at $ (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21257)\n    at https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21791"}). Build with -s ASSERTIONS=1 for more info.

wasmworker.min-baf151b….js:1 abort({"stack":"Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm'.\n    at Object.n.readBinary (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:17129)\n    at $ (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21257)\n    at https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21791"}). Build with -s ASSERTIONS=1 for more info.

wasmworker.min-baf151b….js:1 abort({"stack":"Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm'.\n    at Object.n.readBinary (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:17129)\n    at $ (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21257)\n    at https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21791"}). Build with -s ASSERTIONS=1 for more info.

847a9fc9-c121-4f56-8403-79fbe2de1437:1 Uncaught (in promise) abort("abort({\"stack\":\"Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://static.twitchcdn.net/assets/wasmworker.min-cd4a9d9….wasm'.\\n    at Object.n.readBinary (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:17129)\\n    at $ (https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21257)\\n    at https://static.twitchcdn.net/assets/wasmworker.min-baf151b….js:1:21791\"}). Build with -s ASSERTIONS=1 for more info."). Build with -s ASSERTIONS=1 for more info.
2

I wasn’t able to post all of my images in my original post, so I may need a couple of followup posts to get everything.

Here’s an example of the embedded player working in FireFox:

Capture-Embedded-iframe-player.PNG
Capture-Embedded-iframe-player.PNG2115×1276 511 KB

3

Here’s an example of what happens in OBS:

Capture-Embedded-iframe-player-OBS
Capture-Embedded-iframe-player-OBS1182×1079 17.6 KB

4

If I try to interact with the browser source in OBS, here’s what I see:

Capture-Embedded-iframe-player-OBS-interact
Capture-Embedded-iframe-player-OBS-interact1863×1273 41.3 KB

5

I’m not sure about why the CORS error occurs, but when I lookup the docs, it recommends us to use api.

This might help you. I’ve tested on OBS (windows 10 x64), and it works well.

image
image1498×844 40 KB

Hope this helps you.

6

The source code i used:

<html>
  <body>
    <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
      var embed = new Twitch.Embed("twitch-embed", {
        width: 960,
        height: 540,
        channel: "patrickkr",
        layout: "video",
        autoplay: false,
        parent: ["localhost"]
      });

      embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
        var player = embed.getPlayer();
        player.play();
      });
    </script>
  </body>
</html>
7

@PatrickKR I did try your code snippet, but am still running into the same spinning wheel issue.

8

image
image1174×837 228 KB

Tested with a live twitch streamer.
Works well. cannot find any issues here.
If it is a localhost, the ssl is not required.
If you tested with non-localhost (loopback address / “localhost”), ssl might be the problem

9

You are better off using Window capture of Chrome/Firefox etc

You get better control over the video player and volume without having to faff with sub menus/windows.

Secondly, I hope you have permission from the streamer you are restreaming, you can get DMCA’ed for streaming other people without permission.

Thirdly check if you have OBS Browser source hardware acceleration on and/or just set it to the opposite setting.

10

Hey @BarryCarlyon, thanks for the response.

  1. Doing a window capture results in a lower quality feed as there’s not a direct source of the content, but rather a capture of a capture if you will (OBS is capturing the window, which is displaying the content). Getting direct input from the OBS browser source means that nothing from the browser gets in the way and I don’t have to do any extra cropping. Getting the stream via a browser source also makes it easier to capture multiple streams at the same time, which leads to point number two.

  2. I do have permission from the streamers that are captured as I host tournaments that they compete in, which the streamers sign up for explicitly to broadcast to the community.

  3. I’ll check into the hardware acceleration bit.

EDIT: I tried toggling Browser Source hardware acceleration and that did not change anything.

11

Hey @PatrickKR. I tried using both HTTP and HTTPS connections via localhost (set up in IIS). Wasn’t able to capture the output regardless of it being HTTP or HTTPS. Still hit the spinning wheel. HTTPS was set up using a self-signed certificate (since it’s localhost), and that didn’t help or hurt the integration.

I know other people have been able to capture a stream via OBS / StreamLabs OBS, so I’m not sure what’s going on that’s causing me to not be able to capture it.

So far, I’ve tried:

  1. HTTP connection to localhost with iframe embed.
  2. HTTP connection to localhost with javascript embed.
  3. HTTP connection to 127.0.0.1 with iframe embed.
  4. HTTP connection to 127.0.0.1 with javascript embed.
  5. HTTPS connection to localhost with iframe embed.
  6. HTTPS connection to localhost with javascript embed.
  7. HTTPS connection to 127.0.0.1 with iframe embed.
  8. HTTPS connection to 127.0.0.1 with javascript embed.
12

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