Using Amazon Web Services S3 to Host 360° Virtual Reality Panoramas & 360° Video

Amazon Web Services S3 is an excellent solution for hosting 360° VR Panoramas, S3 is very inexpensive, easy to set up and manage, and allows easy embeds of your panoramas on other domains and websites using iframes, PanoPress, etc

AWS S3 has no inode limit and works especially well with multi-res panoramas, gigapixel panoramas, and large virtual tours with tens of thousands of image tiles, many standard shared hosting plans have an inode limit of 100,000 files per account, which can easily be exceeded with a few large gigapixel tours created with krpano, Panotour Pro, or Pano2VR, AWS S3 also works well for large streaming 360° Video Files

However, setting up bucket policies and CORS configuration to automatically set proper viewing permissions and HTML5 Virtual Realty functions requires a bit of code on the AWS bucket setting s page, see below for details

Exmaple Panorama

Here is an example 360° panorama hosted on Amazon S3, embedded here with an iframe


Create an AWS S3 Account

If you do not already have an AWS S3 account, sign up for a Free Amazon Web Services Trial Account, see the following video for details


Create a Bucket

Once you have created your account you will need to create at least one Bucket, see the following video for simple instructions if you are not already familiar with basics of using AWS S3


Set permissions for your bucket

use the AWS web interface to set AWS Bucket Policy & CORS Configuration, setting these as below will automatically set public read access permissions for all files in that bucket, otherwise you will have to set permission per file and may have trouble viewing your panoramas

Amazon-s3-panorama-hosting


AWS S3 Bucket Permissions: Bucket Policy and CORS Configuration

Go to your "All Buckets" list on your S3 page, click on the "Properties" button in the upper right, select your bucket, and click on the "Permissions" option, and set the following -


Edit Bucket Policy -

Replace MY_BUCKET_NAME with the name of the bucket you are editing

{
    "Version": "2008-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "readonly policy",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::MY_BUCKET_NAME/*"
        }
    ]
}

Add CORS Configuration


    
        http://*
        https://*
        GET
        3000
        Authorization
    


Uploading Panoramas

You can upload your panoramas to AWS S3 either using the web interface, or with ftp clients such as Cyberduck or Transmit, and many others


More Info on Using AWS S3

See the Amazon S3 documentation or search Google for more information on using AWS S3 and other AWS web hosting services

Sam


6 thoughts on “Tutorial – Hosting 360° VR Panoramas & Virtual Tours on Amazon Web Services S3

  1. Hi! Serious newbie here – I was able to get through all of these instructions, thanks so much for them! I’ve NEVER hosted anything online, and I’m trying to learn how to host my demo virtual tour – I created a tour with Marzipano, and it says to deploy I have to upload the contents of a file into a hosting service. I uploaded them to my bucket, now what would be the next step in order to view them and have others view the tour?

    • Hi everybody,

      I need some help. I decide that I move my panotours to the Amazon S3 service from my webhosting provider.

      I have tour on my own server: https://360pano.si/panorama/2017/10/Velikaplanina/resa.html
      The same tour I copy to Amazon S3, https://resa.360pano.si

      The problem is that on Amazon S3 I have trouble with panoramamenu text show (in the midle bottom of screen). It says undefined. On my own server its is ok. What can be here the fix fot that?

      Is something whit the bucket policy?

      This is what i set:
      {
      “Version”: “2012-10-17”,
      “Statement”: [
      {
      “Sid”: “PublicReadGetObject”,
      “Effect”: “Allow”,
      “Principal”: ““,
      “Action”: “s3:GetObject”,
      “Resource”: “arn:aws:s3:::resa.360pano.si/

      }
      ]
      }

Leave a reply