UE4 Tutorial | 3D Widget Web Browser In-game

[@davidcaballero4572]

Thank you Ben for this useful tutorial. Just two comments: in the Web Widget component of the BP, specify the drawing size so to properly display the complete Web page, otherwise it clips and lowers dramatically the quality. Besides, do not forget to specify the widget to receive input. In the Details panel, Interaction / Receive Hardware Input must be ON. Thank you!

[@lawrencequick7218]

Verry important, this was my problem for about 30min

[@zinkzonk777]

@@lawrencequick7218 yup good eye

[@baraakhb]

thanks man, but this option disabled in my editor what can i do ?

[@harshparihar9857]

thank you so much brother

[@mehdiayed3466]

thank you

[@subhadeepjasu292]

For those who cannot get mouse or keyboard to work, enable the hardware input flag in the widget properties.

[@sarfios]

Where exactly can be found? Can't see it :(

[@subhadeepjasu292]

I did a few months ago. As far as I remember, look in the monitor blueprint which enables input based on collision with the collision box. Select 3D Widget. In the details pane, you will see an option called "Receive Hardware Input". It was disabled by default. I had to enable it. Also to confirm this tutorial works for 4.17.2, that's my current version.

[@subhadeepjasu292]

I can't post a picture here, but I am sure you can get it from my description. If you still cannot find it, let me know, I'll post an imgur link to a screenshot if that helps.

[@Gabbafoo]

Thank you ... I was puzzled by that and tried within bluprint to find whats wrong - but now it works :)

[@SAITHARUNk]

Hi I tried the same thing in AR template but its working in Console but not in application. We have enabled the hardware flag as well, still we are facing the issues. Should we do anything more for AR?

[@noted123]

How can I control this 3D widget in VR?

[@alexmartos9100]

Im stuck with this also. Any luck?

[@noted123]

@@alexmartos9100 Finally I used a Web Browser in the marketplace

[@alexmartos9100]

@@noted123 Did the browser you use allow for stereo rendering in VR? I want to be able to open up online architecture tours in vr with an in game browser.

[@dr.gordontaub1702]

@@noted123 Is the web browser you used from the marketplace secure? This one would not allow me to log into KZbin. KZbin said the browser was not secure. Can you give info on how to find the web browser you purchased?

[@noted123]

@@dr.gordontaub1702 I think it has some problems, but the original browser from Unreal was updated

[@jung00berwoah34]

Holy shit, man this is amazing and it's great to see you doing more videos!

[@vrschoolitalia]

Hi thanks for your work, I done but I can't interaction with VR. Can you make Vr web browser tutorial? Please

[@Omar.bin.khattab]

on the Newer Version of Engine to can use Mouse and Keyboard do this settings , go to the BluePrint of TV and set this property called [Receive Hardware Input] to True , u can get it under interaction Group thanks ben great job

[@Taki7o7]

Imagine, I am rn watching your video creating an ingame web browser through a created ingame web browser. This becomes weird ._.

[@Rashad-hu3op]

can you make a tutorial on how to make voice chat in multiplayer in unreal engine

[@SonnyBynum]

Fantastic, Ben. I very much enjoy your videos.

[@ilozeet]

has there been any further development to this?

[@back2dreaming]

Does this work on Quest?

[@nicksparrow009]

Is it possible to get a reaction from the website do something to the game?

[@joacotossello]

I guess that uses HTTP Get request, so, I think so...

[@thedigitalshack]

Could not get the mouse to activate in 4.15.3. I did this tutorial twice with no luck. I did use a different static mesh for my tv, not sure if that matters

[@saalmoi]

To fix the problem of the arrow after being in the box just add a set conecting the target to the player controller and the ''principal one'' to the ''set input mode game only''. Sorry for my english X) and TY for this video ^^

[@Romanowsky]

Hey, I have same problem here but do not understand how you got rid off this cursor, can you please explain more detailed? Thank you so much!

[@Romanowsky]

Solved! Thanks!

[@saalmoi]

@@Romanowsky glad u solved it ❤ amazed it worked something I wrote 4 Years Ago :0

[@Anglearmyx]

How it solved

[@guygirouard8945]

Really good tutorial. Anyone have an idea why the color are washed out ? Everything work perfectly except for the color output that is not as expected.

[@BiggZigg]

This is great and all, but doesn't seem to work in the latest version, at least not as it does here. If you select 'world' you cannot interact with it - if you set 'screen' you can, but obviously it's not bound to the world and acts more as a UI overlay. Any chance you could have a look into this @Ben Ormstad ?>

[@Ashley-gn6ji]

I second this

[@gamedev6290]

Ben, please see this comment

[@danielyu6548]

Thank you so much for this tutorial. It was easy to follow along, and it worked with my first person game project. But It didnt work on the 3rd person module. Any ideas why? PLEASE HELP ANYONE!!

[@dhruvrattan]

bro the web age is loading but I am not able to interact with the browser some how

[@toonyfatninjas]

how do you create ingame video game consoles that play games!? like the movie one you did? but with games like snes, or nes or any game. I want to make an open world with tons of content like GTA and minecraft combine. I want to setup a shop where players can buy game consoles take it to there homes and setup with the ability to insert cd's or cartridges that would play games. so they would buy the console and a game or two to play with at home or where ever they want via using a tv. how do I make something like? this would go into detail, from buying the console carrying it home or vie car or backpack or however, to placing it on the table or floor or even on top of tv or wherever, and setting it up by connecting the wires on to the tv and from the game console to the power outlet. then inserting the game cartridge or cd or whatever ( each game box will come with labels and cover) and then they turn on the ingame game console where they get a home screen menu from there they can setup some stuff. such as allocating harddrive space and adding a movie, music playlist and webbrowsing and some other media stuff. like graphics for like computer games where they can lower the graphics. this way if they can buy an old computer and still play some pc games kinda like a real console and computers would have. can you make a tutorial covering all this? I think you get the picture so! feel free to add something i may have miss.

[@timix465]

need update on 4.15, as it doesn't let me input anything. I did everything as you did, checked everything twice.

[@mikeramos2335]

Great video, managed to make it work in VR! Thanks! One question, is it possible to browse using Leap Motion or another VR controller, instead of the mouse?

[@CWelshy]

how did u get it to work in VR?

[@rikvandenreijen]

You are an absolute legend!

[@williamminnaar6311]

Hi there - Do you have any tutorial on this type of thing? If I have a room with different areas of the room - I have spheres / markers around the room - When I click on one - It launches a full screen video? But different videos for different areas - ie: one for the kitchen - one for the lounge - Once I have one, I can duplicate it - and change the video that is player for that sphere - right?

[@emmahoughton9193]

Is there a way to use this on the static mesh itself? So the widget can be used on a CRT monitor 3D model

[@sxcylla4438]

I can upload an image from my webpage and also from my windows game but I cannot do the same in my android game. How to upload image from android webview in unreal engine

[@damnfail9316]

why my web widget quality is bad when there is a motion in the website? image looks blurry.

[@mistergiao2678]

Thank you for sharing, may I ask if you can convert web to texture？

[@valentindinu2489]

Thanks a lot ! You surprise me every time ! :D

[@vrschoolitalia]

Thanks bro✨💪 I need your help please. I add widget web browser with interaction on UE5.1 and It's work good 😊 but when I packaging my project I don't whatc the web page and so it's Not work. Please help me🤔💪

[@Rick_Kopines]

Thanks for the tutorial. There is a problem. After leaving the trigger, the cursor does not disappear. Any ideas how to hide the cursor?

[@KoDomanov]

Can this be done in VR? My links to the controller beam are not responding. Thank.

[@edensagasta7735]

can you make a tutorial explaining how to enable actions in web browser like fullscreen youtube videos or download images to our computer from the web browser widget? That will be very usefull thanks!

[@edensagasta7735]

how can you fix the fullscreen to be able to fullscreen?

[@romainst8499]

Is that different for VR ? i just want to have a monitor that shows photos and an arrow to make a "next" "previous"' photo

[@Hiltonlab]

Great tutorial @Ben Ormstad - this wrks gerat on the PC and with OCulus link. On the quest standalone mode, the screen shows up as blank - any idea on how this can work on the quest?

[@doitaspire4428]

how is it running videos ?!! Web browser doesn't support playing videos right ?!

[@taile4471]

Hello, Can I input text comefrom UTF or IME Keyboard allow on it?

[@zinkzonk777]

ahaha this is exactly what i wanted to do. you are a boss.

[@TheSpidermycron]

hello, thanks a lot for your great tutorials , but for this one i followed your instructions but the player freez infront of monitor and the monitor only show still image for the website nothing to get work on you tube even my mouse pointer not work , please advice kindly im using unreal version 4.20.03

[@chinuonchaitanya8340]

Most propbaly you have used input mode UI only......change it to game and UI only

[@ManojChauhan-kl3dh]

nice sir but my question is that .how to get your unreal engine 4 game HTML5 project working on wordpress ,and bluehost /dreamhost based personnel website not on local host...Please make tutorial step by step ...? I have searched all over internet but didn't find good info on this topic Actually my unreal engine 4 game size remains between 100 to 200 mb , not in GB any way ,can you please make tutorial for that..?

[@grarno2952]

The website is loading, but cannot scroll or interact with it... Is it because I'm on a newer version of UE4?

[@scorpionscorpionn]

I do exactly what you say but in the end i can not edit the url bar or move the page up and down. Its like i have stucked in 9.03s but i have done all the work till the end of your video. I have checked everything. I have started from a Blank project. Any idea?

[@winnie20]

Hay thank for the tut , kinda new. I was wondering do ypu know proper options to present your game design to a 3th person who is not on unreal.

[@BenOrmstad]

The best way to present the design of your game to someone else, I would think, is to create a Game Design Document (for example, like I did 5 years ago for a game I thought up called "Robina's Rescue" - benormstad.wordpress.com/robinas-rescue-gamedesigndocument/ ). Unless I misunderstand what kind of design you're actually talking about :p

[@sbk3dteam968]

Hi, Just wounder if there is a solution to navigate with the widget interaction component and the web browser widget in VR with the same concept as your great tutorial Ben? So not using the mouse. Thanks for a great tutorial!

[@rob99201]

What VR system are you using?

[@yashwanthcb]

dude you deserve more

[@biunivoca]

it works for me all if you pack for win64, while if you pack for android, nothing works. Is it possible to find documentation to understand what does not work? Thank you so much for the fantastic tutorial.

[@Yatra_yogi_Aniket]

Also same problem did u find the solution??

[@gigapede]

It runs great in the editor but when packaging I get this error: Plugin "WebBrowserWidget" failed to load because module "WebBrowserWidget" could not be found. Please ensure that the plugin is properly installed, otherwise consider disabling the plugin for this project. Does anyone know a solution? I only saw people with the same questions on the Answer Hub

[@user-lj8cx1ti7w]

The browser doesn't receive keyboard input when being run outside the editor. I'm certain that it's just a bug, or maybe I've missed a step

[@LightcarrierStudios]

Great video! I can't get the web browser widget to work on iOS. Is it possible?

[@BenOrmstad]

Thanks! I have no idea :/

[@FoxGAMING-NTF]

Can this somehow be imported into unity??

[@haelanshin4576]

Thanks for your detailed tutorial. And I have a serious question. In game, I can't use proper chrome browser function, for example google's speech recognition search(UE4 4.14.3 vesion)....... Is it normal or I miss some details? And can you make tutorial movie the voice input by mic in UE4?

[@MetricZero]

Hey, let's say I wanted to make an offline local html page/pages and have the Initial URL directed at that. How would you handle the install directory of the game changing? Let's say I install the game at C:Program Files\Game\Content\webpage.html, but someone else installs it at F:. How do you handle that situation?

[@Retrocaus]

there is a command for that , ../../ starts at the run time file and goes back two folders for example in this unreal example idk yet gotta look into it

[@ericliu2238]

Could it work on android and ios?

[@paavo1294]

can u make tutorial how to make decresing hunger in UMG UI template in ue4 :)

[@aahneikaayushman5589]

Holy shit dude. You’re are freakin’ awesome👏👏

[@НиколайПриймак-е2й]

And this option will work when exporting to the playstation and xbox 4 if so will there be work webgl webrtc and other modern technology?

[@BenOrmstad]

I have no idea :)

[@jiotherov9969]

can i ask a question ? what course did you take ?

[@BenOrmstad]

Course? Do you mean what education I have? In that case, a Technical Degree in 3D Game Design and a Bachelor's Degree in Psychology.

[@ЮрийКравченко-ф7с]

Hey! Good tutorial, but could you show how to make it work in a multiplayer game?

[@drumondduartegame5378]

(Brasil👍) como fazer essa função no toque na tela (android)

[@LinkokiriHon89]

Really great Ben ;)

[@kircaa]

Doesn't work for me. Can't click on the website...

[@BenOrmstad]

Hm .. I'm thinking it's one of 3 possible things: 1) You've simply unintentionally skipped an important step 2) Perhaps it's a "difficult" website. Have you tried different sites? 3) After all, this is an _experimental feature_, which means there might be (and most likely is) bugs and unfinishedness lurking around in the code. Let's hope Epic makes this a real feature, cus it's awesome :)

[@kircaa]

***** Well, basically, I'm making a virtual classroom. And the player is static, so I need the web constantly at hand, or when you click the computer screen to open a website UI. Your solution was a perfect one for me, but alas, when I click on anything on the screen it just moves the camera, like click to rotate.

[@BenOrmstad]

Yeah, at least it _could_ be a perfect solution if it worked properly. I really enjoy the idea of in-game browsers, so I'll create a new tutorial whenever I find a better, more stable solution.

[@Alex_River]

This is very experimental stuff, I couldnt get it working on 4.13, i had to use a widget interaction component from the FPSChar to be able to interact with the 3D widget and click aroundl. Was never able to add input to the adress field, eventhough i could mark it with the mouse and had input mode game and ui :/

[@BenOrmstad]

Hm, strange .. but yeah, I'm not encouraging peeps to use this for serious projects counting on it - as of now this is just something to use for fun.

[@timix465]

How did you fixed the issue? on 4.15 tut doesn't work

[@Alex_River]

I wasnt able to fix it, i gave up on trying to add input to the adress field.

[@DigitalLoom]

Unreal!!!!!!!!!!!!! Just like our reality!!

[@majorsquidgaming6965]

Thanks! i made a phone using this! :D

[@casketel2467]

Can't seem to interact with the screen in worldspace. The mouse shows up (and stays visible outside the virtual screen boundaries) but doesn't interact with the virtual browser. When I set the widget to "screen"- instead of "world"space it does interact with the web browser. Anyone having the same issue or knows a solution?

[@NurettinBerkeDemirel]

Same issue...

[@pavlok1995]

@@NurettinBerkeDemirel You need to check the item in the right menu "Receive Hardware Input"

[@timix465]

Hi theere I aaaaam writing this from my UE4 projeect, the only probleem i have is that thee mousee is showing up aafter I go aaway

[@BenOrmstad]

Yes, that's the last thing I mention in the video. Just go in and out of the collision box once more and the cursor should be gone.

[@rctrickstipsfun6504]

it works great in the editor, but it wont package (3.13). Does anybody have a solution? When the plugin is enabled it goes wrong. Seems like the media textures in 3.12 which didnt work either, but in 3.13 they changed it a bit, and that works fine.

[@sbk3dteam968]

Hi all and thanks Ben for a great tutorial! I have noticed this issue as well, regarding package problems when Web Browser Plugin is enabled. I mean it all comes down to the built project and if it fails there, all setup is in vain. In forums alot of people are pointing out same issue. Not sure if it has been resolved yet by now but at the UE forum, Rudy Triplett submitted a report to the developersfor consideration: answers.unrealengine.com/questions/265500/web-browser-ui-widget-doesnt-run.html Really hope a solution will be nearby if not yet.

[@rctrickstipsfun6504]

i got it working, but not like Ben did with a BP of a mesh (television). But if you display it in the widget, it packages fine. But how i exactly did i forgot, but it was easier as expected

[@sbk3dteam968]

Ok interesting! I tried out a simple widget blueprint in FP startup proj, added the web browser with a url adress and then added it to a 3D widget in the scene. Works fine in the editor but still fails when building project. UE v. is 4.14.3, also tried v. 4.15.1 Do you mind attaching some sreenshots of BP:s for your solution?

[@rctrickstipsfun6504]

and try this in the packaging: create compressed cooked packages. I think that was a clue too

[@sbk3dteam968]

Thanks for the tip! I checked the "create compressed cooked packages" option but unfortunately I got the same error message: PackagingResults:Error: Error Unknown Error. Might there be some other option you have ticked? No one else encountered this problem? FYI: if I just disable the plugin the packaging works fine.

[@MrUltracoin]

I did this exactly and i see the website but i can not scroll or type ;(

[@majorsquidgaming6965]

Please make fun-simple projects for us so we can teach by experimenting

[@tomp249]

anyone figured how to launch ue4 with this feature on android? all i get is failed to launch

[@maxmahesh891]

This is very knowledgeable tutorial #cgunreal

[@spiritofancientwherewolf149]

Cool :) Man its really great thing.

[@stepkefreak]

This works well, but it does not work if Project is packed as HTML5. If anyone knows the solution for that, please share that knowledge.

[@blackswan6386]

awsome thank you

[@GoatOfTheWoods]

Fosey tube? That piece of shit is everywhere, i swear.. Awesome tutorial, by the way !

[@gangedup1]

Badass! Subbed!

[@yessnowww5345]

Good Job :)

[@AdwWeb_dev_criptocurrency]

cool

[@Syurli]

thank you : )

[@JordanDubuDoyorn]

Can we control the sound ?

[@rob99201]

Should just the same as when in the web browser. I do notice though that Javascript is almost 2X as slow on my PC in game as it would be if it were in my browser outside Unreal.

[@aravawasthi3038]

YAY LOVE YOU

[@igor-ivanov]

Не работает. Когда использую EndOverlap, он не отключает UI управление. Я могу отойти на километр и пользоваться браузером. Что делать.

[@lordofthelair6716]

i would like to put a browser inside of my chatbox.

[@biubiuty]

thumb up for illuminati

[@gaminggoliath6881]

a good way to cheat a game >

[@kingreaper5142]

even pornhub?