Website adding as layer with javascript code

Hello, if adding a website with javasript enable, i see nothing..only blank/black screen.

Im on win10, edge showing also nothing, but i can see the sourcecode.

Wirecast using a browser technology to add the website? So if yes, its using edge or internetexplorer?

Cause, if i open the website in Firefox, its working fine

22replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • Wirecast uses a very stripped down html renderer. You can use screen capture instead.

    Reply Like
  • Hi, screen capture is no Option.
    I Need only 10% of the Website. When i cpture the hole window and resize it, it Looks like crap

    Reply Like
  • Markus Schimmer You can crop in Wirecast. You can Screen Capture with Wirecast's built in feature or use Newtek NDI ScanConverter which Wirecast supports. In either case you can crop.

    Reply Like
  • I think his challenge is that if he is capturing 10% of the screen, after cropping and resizing - it is pixelated. There is not much you can do about that.

    But back to the website you are trying to capture - If you paste the URL, perhaps someone might have an idea.


    Reply Like
  • Thats the Point..Maybe i can zoom in Firefox. 

    Cause of the url..ist a private Website, running on my PC.

    Its a little Project from GitHub. Displaying Soundtrack playing at the Moment

    It can also Display "sample track"

    Reply Like
  • Markus Schimmer said:
    Maybe i can zoom in Firefox. 

     Can you give that a try?

    We are certainly thinking about ways to improve Web Page display.
    Perhaps you can fill out the form and mention javascript.
    Wirecast Feature Request Support Form

    Reply Like
  • Will try.

    Also will send feature request

    Reply Like
  • Markus Schimmer Thanks. Understanding how users actually want to do things helps the developers.

    Reply Like
  • I've done a lot with web in Wirecast (though admittedly not yet in 12), do you have the site or code available to view Markus? It may simply be a modern feature not yet enabled within the web engine.

    Reply Like
  • Matthew Potter look a little bit higher in this thread. There's a link to the Webserver. Just a little program. The HTML file is also available there overlay.html full of Javascript code

    I tried to using desktop record, cropping a section of Intrested. But, then the problem is.. If any application like wirecast can't used in full screen mode.

    With cropping and zooming, using wirecast in window mode, it works at the moment.

    Look here

    https://www.facebook.com/basementbeats01/videos/1001415620057554/ but that's not the best.

    Adding direct a website to the layer should be the best way

    Reply Like
  • Markus Schimmer That's a nice react app there. I'm liking it! The only thing I would think may be the issue right off the bat is that Telestream's render engine cannot handle the import feature yet and your build output may be generating that. I've got some time today and I'll set this up on my local and see if I can find out for myself as I have similar goals though most of my code to date has been server render and push base HTML to a widget which then animates or displays upon need.

    If the engine can't handle what I'm seeing you've done, it may need to be updated (cough. Any engineers reading this from Telestream? cough.) or perhaps there are work-arounds you can do in the mean time.

    Reply Like
  • Markus Schimmer so... Wirecast can clearly handle JavaScript modules, that isn't the case... You mention you're testing in Edge and Firefox. Can you confirm you're not seeing any errors in Chrome? I think that Wirecast is using a variant of the webkit engine but may need to be corrected on that.

    Reply Like
  • In wirecast I only have blank / black screen.

    In Firefox I see all text, without errors.

    In edge, no output, cause edge doesn't handle javascript

    Maybe I need anything as a plug in or any dll?

    Reply Like
  • I have to install chrome on the wirecast workstation, so I will test it also

    Reply Like
  • Also with chrome . Nothing.

    Private Website working in Chrome, but not in wirecast

    I see websocket will open, but can't get it in the stream.

    if I add another Webseite, like the default I see an web page.

    And I can't get the prolink private website online in the stream (green led on thumbnail)

    Reply Like
  • Hey.

    I wanted to provide some feedback on this one. I use Web Page and Screen Capture myself including sources with Javascript. So I thought my input may help. Lets break this down a bit.

    Screen capture

    I remember above you were concerned about pixelation. If you're cropping and zooming, there will always be pixelation. But, if your source html is larger and you don't crop so much, that will fix your problem. If this is your concern with screen cropping, there is nothing that Wirecast can do to fix this issue. It needs to be fixed in the web app to render differently.

    Network > Web Page

    Let's start with a basic premise. You suggested above that Javascript was not supported in Wirecast web page capture. That is not correct. I use this feature with javascript embedded every day. However, my javascript is not particularly complex. But I did notice a couple of 404 errors in a debugger, and some JSON parse errors. The parse error MAY be due to the fact I don't have a source server running, but the app should detect that instead of trying to parse JSON if that is indeed the cause.


    • You can make it work via screen capture... and fix pixelation in the web app (possibly just with CSS changes).
    • Javascript works inside Web Page capturing for me.
    • Your particular webpage has at one or more errors in a standard browser that should be addressed with the developer. One or more of those errors may be the root cause of the problem.
    • If you require further assistance, someone would need to be able to replicate the problem to analyze further. You could potentially work with someone by opening up a TCP port to a remote server that would allow someone to enter that address into the app to replicate even though they don't use this software.


    Reply Like
  • Markus Schimmer, the next thing I would do is start commenting out all the functionality and adding it back step by step. It looks like there may be an error somewhere perhaps in the JSON file response? Or in a feature you're using that isn't supported by this version of the engine:

    - Remove the transition effects (display none/block)
    - Socket connection show content only
    - Auto-load a dom element with a solid colour (on page load)
    - use document.write instead of console.log for any debugging
    - ensure all your promises have catches

    Reply Like
  • Matthew Potter puhh... Coding Java is not my thing.

    I using this little helper as is, cause I can't coding

    Reply Like
  • Matthew Potter did you download the little Programm and tested it with your wirecast installation? If yes, does it work as mentioned? Or can you confirm my problem?

    Reply Like
  • a Little step Forward. i installed xampp on my local Workstation, added the html file and set <p>hallo</p> in the Body.

    i can see the "hallo" in the Website in wirecast

    So, the Problem should be in the JavaScript programing..i will investigate it .

    Reply Like
  • I think the Problem is on the js itself

    If an Event Comes (like in this Case, new text), ist an overlay and wirecast cant see it

    Reply Like
Like Follow
  • 2 mths agoLast active
  • 22Replies
  • 44Views
  • 5 Following