Jump to content

Adding Augmented Reality to your Websites

STF News

Recommended Posts


Samsung Internet 12.1 Beta adds support for Augmented Reality — here’s how to try it out today

Last week we told you about our latest Beta, 12.1, which offers a host of quality-of-life improvements for end users. We’re also really glad to announce that with this beta we are also shipping modules for the WebXR Device API that enable Augmented Reality (AR) content to be built right in the browser: including the “hit test” module. Hit testing allows you to detect the position of the real world at a single point on the screen which can be used correctly position virtual objects in the real world.

One of the reasons we’re especially excited about this is because Samsung Internet have been playing a leadership role in developing the WebXR spec in W3C, along with many other companies and organizations.

You can try AR out for yourself using the XR Dinosaurs demo to place a dinosaur in your environment:

Step 1. Download the Samsung Internet Beta from the Play Store or the Galaxy Store:
Samsung Internet Browser Beta

Step 2. Go to https://xrdinosaurs.com and choose Augmented Reality


When you run this demo you will see this message, this means that the demo is able to place the virtual objects onto your environment but it cannot actually record the camera feed so you don’t have to worry about it recording what you are doing.

Step 3. Select a place on the floor to place the dinosaur

XR Dinosaurs was built by Brandon Jones (Tojiro) using THREE.js.XR Dinosaurs was built by Brandon Jones (Tojiro) using THREE.js.

Making your own AR Web Sites

This method of AR uses the Augmented Reality features of the WebXR Device API.

Here is a sample project you can use to help you get started:
A-Frame Hit Test Demo
*Remix to make your own augmented reality scenes.*hit-test.glitch.me

Snapshot of the sceneSnapshot of the scene

To make your own press the fish button then the remix on glitch button:

How to remix the appHow to remix the app

It shows a 3D object and some basic shapes around and lets the user reposition them as they need. You can then add interactivity or other models and 3D shapes to the scene.

Once the user enters VR a Reticle is used to select the location to place the objects. The hit-test API casts ray out from the center of the screen and works out that real world position and places the reticle there.

Once the user taps the screen it then places the objects in the scene.

If you want to hide an object in AR at the hide-in-ar-mode attribute. It will make objects in visible when AR gets turned on.

In the demo this has been done for the ‘a-sky’ element and the ‘world’ element. The world element contains the objects. When the user enters AR we make it invisible so it’s not floating in the air, we make it visible again once the user has selected the location.

I hope this helps you have fun adding Augmented Reality to your Websites. Please send us your feedback and let us know if you have any questions, either via Twitter or on our developer forum.

View the full blog at its source

Link to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Topics

    • By STF News
      We’re constantly working to make your web experience better and more secure. This month we’re introducing our latest Samsung Internet beta, 15.0, with a engine upgrade as well as new features and privacy protections.
      To start off with, 15.0 will be based on Chromium M90. This means developers will have new APIs to work with as well as the 9.0 version of the v8 JavaScript engine.
      Adding the search widget to your home screen: long-press the Samsung Internet icon and select “widgets.” You will then be prompted to Add the search widget to your device’s homescreen.
      We’re working to make your search experience more intuitive and easier. 15.0 introduces a search widget to better integrate your web searching experience (with your chosen search provider) right to your home screen so your home screen searches better integrate with the rest of your web usage. More updates on the search experience is coming soon.
      We’re also including some enhancements to user privacy with 15.0 — notably making our browser more resistant to fingerprinting by introducing some “noise” in the results from APIs that are commonly used by finger-printers. Fingerprinting is one technique that tracking networks use to correlate information about people even when they use secret browsing mode or tracking blockers such as the previous version of our Smart Anti-Tracking did so building in fingerprinting resistance should help Samsung Internet users maintain their chosen privacy settings.
      Our new “Back-Forward cache” feature will allow you to navigate pages more quickly. For frequently accessed web pages, this will bring cache hits from ~20% to around ~70%, and should greatly speed up browsing time (and reduce data usage) as you flick between pages.
      Back-Forward cache (“bfcache”) is an in-memory cache that stores a complete snapshot of a page (including the JavaScript heap) as the user is navigating away. With the entire page in memory, the browser can easily restore it if the user returns. More info on how bfcache works can be found in this web.dev article.
      We’ve enhanced bfcache for Samsung Internet by adding some further heuristics to determine whether the page should be restored or not.
      To make back-forward cache work better for your sites, remember to set the follow the instructions on web.dev about optimising your page for bfcache.
      Privacy is also about the ability to delete your data when you choose to. We’re making it more straightforward to delete your browsing data by providing you more information about what you’re deleting.
      Another way we’re safeguarding your privacy is by making it more straightforward to use Secret Mode (our private browsing mode). With 15.0, once you select Secret Mode, Samsung Internet will launch in Secret Mode by default even if terminated.
      Our new Beta is available on both the Galaxy and Play stores for download today!
      If you find any bugs or issues, please let us know at: [email protected]
      View the full blog at its source
    • By STF News
      In this episode of POW, Tony Morelan is joined by all five members of the Samsung Internet Developer Advocacy Team.
      During our chat we’ll talk about building responsive web experiences for foldable devices, privacy and security on the web and exciting new technologies related to WebXR and the Samsung Internet browser.
      Topics Covered:
      The Benefits of Samsung Internet Browser Web Standards and User Experiences Foldables and Responsive Design Privacy and Security AR/VR (Augmented Reality / Virtual Reality) Android Developers Immersive Web Weekly 5G Tours W3C  
      To hear all the Samsung Developer Podcasts, please visit samsungdev.buzzsprout.com.
      View the full blog at its source
    • By STF News
      New upgrade to improve your browser experience
      From upgrading some features like moving elements to improve usability or dark (forced mode) to continue taking care of users' privacy, the Samsung Internet is committed to delivering a great user experience.
      Let’s take a look at its most recent new features and enhancements.
      Privacy: Permission control for individual site
      Users will be able to customize individual site permission, they can activate or deactivate permissions by switching on/off at the sites list. Currently, Location, Camera, and Mic permissions are available.

      Activating / Deactivating individual site permissions
      Bookmark Bar

      Bookmark Bar
      In order to increase the bookmark usability especially in Tablet device or DeX mode, this feature provides a bookmark bar in the upper toolbar area. Once the “Show bookmark bar” menu is turned on, the bookmark bar is shown. Users can add a bookmark in the Bookmark bar and directly load that bookmark URL in the current tab. Some context menus are supported like “Open in new tab”, “Edit bookmark”, etc.
      Enhanced ‘Continue apps on other devices’: Hands-off — Scroll position
      Continue Apps enables using Samsung Internet on a different Samsung device and automatically sync clipboards across devices for copying and pasting text and images. Every device will need to be on the same Wi-Fi network with Bluetooth enabled to use Continue Apps.

      Continue apps set up
      How many times you were scrolling reading one article and then suddenly missed where you were reading because you had to switch to a new device? Well, the update Continue apps feature allows users to easily open not only the URL but also the scroll position on the web page using multiple Samsung devices. To activate Continue Apps:
      Go to settings on your device
      Select Advanced features
      Enable Continue apps on other devices
      When a user clicks on the hands-off icon of a second device, along with the URL, the website automatically scrolls to the position where the user left off from the first device.
      How to test Continue Apps:
      Launch Samsung Internet on one Galaxy device.
      Load the website and scroll down to a certain part of the page
      Click on the hands-off icon on the second device
      Wait for the webpage to load on the second device and notice the page scrolls automatically to the desired position
      Note: it won’t work on dynamically loaded content when scrolled or a webpage behind logins.
      Other features and enhancements:
      S Pen Air Action : The S Pen air action provides more gesture functions when using BLE SPEN. It allows users a remote control on Samsung Internet. Now the user can navigate forward / backward, scroll up / down and refresh the web page by right/left/up/down/circle gesture.
      Tab bar GUI enhancement : Renewed tab bar design for better visibility and usability.
      Update popup for new password autofill: Provides a chance whether users would update the password or not when the entered password is different from the already saved. If login is successful with the new password, a password update confirmation pop-up will be displayed from v14.2 to let users choose whether the autofill database in Samsung Pass would be updated or not.
      Quick access page at fresh launch: When running the Internet app, a new tab is created to display the quick access page
      Tip card for desktop view setting: It shows a tip card to guide users to use “Request desktop sites” setting or “Desktop site” button in the toolbar by customizing the menu.
      You can test the new Beta version 14.2 right now by downloading the beta from the Galaxy or Play stores, let us know which is your favourite feature!
      View the full blog at its source
    • By STF News
      Our strategic partnership with BrowserStack gives you six months' free access to their real device cloud to test in Samsung Internet
      Our strategic partnership with BrowserStack gives you six months' free access to their real device cloud to test your websites on Samsung Internet
      Click here to find out more from the BrowserStack WebSite.
      Debugging mobile devices can be a real pain compared to debugging desktop browsers. When you want to start testing on many devices this process can get even more infuriating, including juggling USB-C Cables, Micro USB and Lightning Cables, and, ensuring your testing devices are charged and updated. If you want to get serious about mobile testing you need to set up a full device lab which requires a significant amount of investment. Once you have set up a wide range of testing devices, next you need to set up your browsers to test on. So which browsers do you pick to test?

      Photo of a device testing wall from Google IO 2015 photo © Ada Rose Cannon
      With over half a billion active users as of March 2021, Samsung Internet is a browser to be reckoned with. And yet, testing on Samsung Internet is not as mainstream as, say, Chrome or Safari. Our latest partnership with BrowserStack is all set to change this. All you have to do is sign up and start testing.

      Mobile Browser Market Share in Europe — March 2021
      Real devices make all the difference
      Samsung Internet is the default browser for Samsung devices but can be used on all Android devices. It is a fork of Chrome maintained by Samsung that allows us to add enhancements to meet the need of Samsung's power users. Though we try to maintain as much compatibility with mainline Chromium, there may be some unexpected issues. This makes it incredibly important to test and debug on Samsung Internet in addition to other popular mobile browsers on real devices for real-world results. Samsung Internet can be debugged through ADB (Android Device Bridge) and chrome://inspect just like mobile Chrome. But there is a more convenient route to debugging on Samsung Internet than plugging a device into your computer, which is to test and debug on real devices instantly with BrowserStack.
      BrowserStack is the world's leading testing platform that provides instant access to 2,000+ real mobile devices and browsers and is used by over 2 million developers worldwide. Samsung Internet and BrowserStack's exclusive partnership gets you six months of unlimited free testing on Samsung devices, giving you the perfect environment to test Samsung Internet.
      Testing on Samsung Internet with BrowserStack
      BrowserStack allows you to test on Samsung Internet on real devices. You need to sign up to start debugging on real devices streamed to your browser.
      First sign up here, for the exclusive free trial, giving you six months' free access to test on Samsung Internet on BrowserStack's real device cloud.
      Free Samsung Internet Testing on BrowserStack

      Next, open up BrowserStack's Live dashboard to select the Samsung device you would like to use with Samsung Internet.

      The device will open up in your desktop browser letting you interact with the remote mobile browser using your mouse and keyboard. You can test sites running on localhost by downloading the browserstack local binary can forward a local HTTP server to be accessed by devices on BrowserStack. Samsung Internet is available on all android devices on Android L or greater. To test on these devices you can select the device on the dashboard.

      Samsung Internet is an incredibly popular browser and thanks to BrowserStack, testing is easier than ever before. There is no reason not to start testing today.
      Free Samsung Internet Testing on BrowserStack
      View the full blog at its source
    • By STF News
      via GIPHY
      People dancing on Soul Train
      This is my first week on the Samsung Internet team as a Developer Advocate and things still feel very surreal but 2020 has been full of (mostly bad) surprises so it’s nice to be celebrating something good and new.
      For the last 6 years, I’ve been working in web & software development, in various roles mainly as a Ruby & Ruby on Rails developer for various companies, but most recently as a Core Support Engineer for Heroku. Outside of work my focus has been more community based & creative; I ran a non-profit for 5 years that encouraged Black women to get into the tech industry. I ran workshops, events and a paid internship with partner company, 8th Light. I host a technical podcast, do 1–1 mentoring, give talks and I’m currently finishing up my Masters in Computer Science.
      However, what I really enjoy doing is tinkering, exploring and creating. My first degree is in Creative Writing and English Literature and since getting into the tech industry I’ve been distracted and haven’t done much creating in the way I’d like. This is part of what spurred my shift into developer advocacy. I enjoyed my role at Heroku because I got to help people solve their technical problems but it was also structured enough that I could close my laptop at the end of the day without feeling completely spent. That was until this year. This year, I found myself needing the freedom of exploration again and flexibility around what I create, when and who for.
      In hindsight, I’ve spent the majority of my years in tech doing some kind of developer advocacy work but when my manager suggested it to me, I was apprehensive. I didn’t want to be restricted in the kinds of technology I could advocate for & explore or be confined to arbitrary metrics of N blog posts a week. Then there was the heavy marketing I’d seen from other Developer Advocates, it became hard to tell what was a genuine contribution to the developer community and what was a push to use a fancy new product.
      But I’ve always been an inquisitive person, so I emailed, video called and tweeted with some folk I knew in the space. Most of them thought I had the skillset for the job, some of them put me in touch with others to speak to and I had the overwhelming support to make the shift, if I wanted to. I just had to choose a company who’s work culture and values aligned with my own and who valued creative expression and experimentation.
      The Samsung job advert had been in my personal job board for a couple of days, it was there as a “maybe”. I met 90% of the job requirements. I had done some snooping on the team and knew the kind of work they were doing and the content they were putting out, about best web development practices and interesting web APIs they had used or experimented with, was what I wanted to do but still “maybe I should look for something a little more introductory”, I thought. Then I spontaneously quit my job and all of a sudden I didn’t have time for self-doubt, my bills don’t care about all of that. Then I realised I was friends with someone who knew Dan & Ada and was able to get an intro with Dan and find out more about how the team worked.
      Things happened really fast after that, so two weeks later here I am. My first week being an adventurer for Samsung Internet. 🎉
      View the full blog at its source

  • Create New...