Best way to share 360 photos (plus videos and website embeds)

When I bought the Insta360 One X2, I thought it would present a great tool for my personal and professional life.

What I have learned is that the Insta360 One X2 is a really good camera, but you really have to get familiar with the software.

For the first few months, I took photos and videos and just viewed them on my computer. Frankly, it was a bit of a waste of its talents.

Here’s what I have learned over the year of ownership in which I took photos of a renovated home, went on a bicycle tour with it and went on the water with it.

Presenting photos to others

Here are some tools you can use to share your 360 photos with others. These tools allow you to zoom and rotate your camera view which gives it the authentic 360 experience.

I use Google Photos for 360 photos

For photos:

You’ve just gone out and taken some photos. Your friends or colleagues want to see those photos.

The Insta360’s photos come in a proprietary format — .insv or .insp.

You can’t share those.

Instead, what you need to do is to export the image from Insta360 Studio.

You can also export single files by opening the file you want to export and going to the bottom right export button.

Export it at the highest resolution, which is usually the default.

The file you export will eventually look like this.

The jpg file will look like the image above when opened with a regular photo viewer. You can upload it to Google Photos.

I use Google Photos or YouTube for videos

The process for videos is the same, but make sure to export the “360 Video” in the export screen. Do not export the Reframed Video unless you want a non-360 video.

When you upload to Google Photos, it will take some time before Google can process it into a video.

The same video can go to YouTube.

You’ll know it’s a 360 video when you have the compass on the top-left corner.

YouTube doesn’t display the video at its highest resolution, so make sure to choose 2160p (or whatever is highest) when you view the videos.

If it’s a public video,

I’ll list it as a public video. If I just want to share it with friends, I will put it as an Unlisted video. Here’s a public video:

Google Photos and YouTube will display the videos as 360 videos on mobile, especially if you have their respective apps.

Bonus: automatically convert Insta360 videos and upload to Google

Github user whmou has created a script that “Automatically takes insv (insp) files from Google Drive and convert them to 360 mp4 (jpg) and upload to Google Photos”

It’s not for the faint of heart as it requires you to know how to run a Python script in Docker and you also need a computer (local or cloud) that runs the script.

See more here.

Embedding 360 photo onto website

I’ve built a Gutenberg block plugin for WordPress that allows you to embed a 360 photo onto your page.

I developed this by forking (copying) the Panolens repo by Ray Chen.

If you want to embed a 360 image on any website, use the Panolens repo.

Ray’s Panolens simply targets an element by class and transforms it into an interactive box.

If you’re on WordPress, here’s how to use my block.

How to use Xuyun’s Pano Viewer

Files and source code are here. I believe you have to run npm install to get the node_modules.

You need to install the plugin. Either download the .zip file from the Github repo and upload in the plugin menu or copy the folder into your plugins directory. I did the latter via FTP.

Once installed and activated, you should see this in your Gutenberg block menu:

After you’ve added the block, you can choose a 360 image exported from Insta360 and embed it. It won’t work in the preview but will work on the live page.

You can download the plugin’s files and source code here.

Modifying the code

The source code is provided in the Github repo and you can change a few things if you know how to build a custom Gutenberg block.

In the folder assets\js, main.js is where you instantiate and configure PANOLENS.Viewer

  const viewer = new PANOLENS.Viewer({
    container: container,
    autoRotate: true,
    autoRotateSpeed: 0.3,
    controlBar: true,
  });

Here, you can change many different settings. Consult Ray’s Panolens docs for all the settings.

In the folder src, you will find style.css. This is where you can toggle the size of the block.

It’s currently set to this to ensure it goes across the page, and its height is a compromise between mobile and desktop formats.

.pano-container {
  width: 100%;
  height: max(20vh, 500px);
}

Every time you change something, you will need to run npm run build (or start). It compiled fine on Node 16 but not Node 18.

A final tip is to specify the page where you want the plugin to load the JavaScript assets.

In plugin.php in the root folder, place this if statement, in bold. This ensures the plugin’s loading overhead is borne on pages where you need the pano viewer.

Use is_single() if you are on a post, and is_page() if you are on a page. You can find the id integer in the address bar.

(e.g. https://xyzcreativeworks.com/wp-admin/post.php?post=1579&action=edit)

function bdg_blocks_scripts_init() {
	if (is_single(1579)) {
		wp_register_script( 'bdg_three', plugins_url( 'assets/js/three.min.js', __FILE__ ), null, '1.0', true );
		wp_enqueue_script( 'bdg_three' );
	
		wp_register_script( 'bdg_panolens', plugins_url( 'assets/js/panolens.min.js', __FILE__ ), null, '1.0', true );
		wp_enqueue_script( 'bdg_panolens' );
	
		wp_register_script( 'bdg_main', plugins_url( 'assets/js/main.js', __FILE__ ), null, '1.0', true );
		wp_enqueue_script( 'bdg_main' );
		}
	}

Otherwise, a safer, but less efficient way is to have the assets load on every page, which is what the code does without modification.

Editing Insta360 videos

I have edited Insta360 videos on the Insta360 smartphone app as well as Insta360 Studio on Windows and Adobe Premiere Pro.

I have opinions about all of them. Here’s how I’d use each aforementioned tool:

• Insta360 smartphone app: for creating TikToks or Instagram content
• Insta360 Studio (desktop): for editing of single photos/videos and bulk exporting
• Adobe Premiere Pro (desktop): for compiling a video with multiple 360 videos.

Insta360 smartphone app: Use the Stories mode

My workflow is to always use the “Stories” tab to create a story that consists of various videos.

The advantage here is that you can quickly cut the video to the aspect ratio that you want

The smartphone app is truly amazing. It’s the easiest and best way to make short videos.

As you start the app up and press “Create a Story”, you will be asked which videos you want to use.

At this opportune time, make sure you have a lot of spare battery life left and also disable all power saving options.

Once you have chosen your clips that you want to piece together, I usually start by choosing the aspect ratio. If it’s meant for an Instagram Story, I will choose 9:16.

Then, I will press the Reframe button on the bottom taskbar (not pictured above). If you have just imported the video, you might see a “Reframe 360 video” button. That works too.

After you have entered the Reframe menu, the “Viewfinder” mode is the easiest because it allows you to zoom, rotate and tilt by moving your smartphone.

The slider in the middle controls the zoom, and physically moving your phone will point it in different directions. It’s best you do it in a place where you can move.

Transferring Insta360 media onto phone

While you can use the WiFi function to transfer videos, I found that to be less than ideal.

In my case, the connection was rather choppy. It’s probably the 5GHz chip on my Samsung Note 9 not working well.

So, I bought a USB-C to USB-C cable and have been transferring videos from the Insta360 onto my Android phone that way.

When I plug in the Insta360 into my phone, it immediately becomes a mounted drive. So, I go into the images folder (DCIM) and copy the videos I want to load into the Insta360 app to this folder:

smartphone drive > Insta360OneR > Migration > OneX

It should be an empty folder. once you have copied the files, open up the Insta360 app and the app should recognize and “migrate” the files. The folder will once again be empty.

Insta360 Studio on desktop

There’s not really much I do on the Insta360 Studio desktop app. I usually only use it to trim videos and to export videos in bulk.

However, there are others that use it to reframe their videos for editing in Premiere Pro. I do not use this workflow because I prefer to do it all in Premiere Pro.

I can see why some people might want to do it: Deep Track.

On the Insta360 Studio, you can use Deep Track to follow a certain point on the video. For example, if you want the camera to point towards a sign as you move away from it.

Insta360 videos in Adobe Premiere Pro

I created a compilation of my London to Germany bicycle tour using Premiere Pro.

It’s a tool that I have used for a while so I am familiar with it.

For Premiere Pro to be able to read .insv files, you will need two pieces of software: the Insta360 Studio app and the GoPro FX Reframe Plugin (under Third-Party Software)

Once you have those, you can import the .insv files into your project.

Note that you need to load the files starting with VID and not LRV. LRV files are low-res. Also, make sure you are plugged in and have the performance of your computer maxed out.

Garmin Fenix watches have an app

I have a Garmin Fenix 6 smartwatch that allows me to remotely control my Insta360.

You will need the Garmin Connect IQ app, which is the app store for Garmin smartwatches and not the default Garmin Connect app.

Search for “Insta360 One R Remote”. It works with the Insta360 One X2.

It’s not bug-free, but it’s free, and therefore it’s better than nothing.

I use this when I don’t want to drain my phone’s battery life through using the Insta360 app to remotely control the camera.

Viewing it in 360 on a smartphone

There are two aspects to this.

First, how do you view a 360 photo or video in the photo gallery without any special apps to interpret 360 media. Secondly, how do you view photos with a 360 headset like a Google Cardboard.

View 360 photos and videos in Samsung Gallery

Viewing photos is extremely easy. You could just use Google Photos for both photos and videos as I explained above.

I do prefer to use the in-built gallery app. On Samsung phones, it’s the Samsung Gallery app.

The Gallery app knows when it’s seeing a 360 photo so you will automatically enter into 360 view when you open a 360 photo. Same with 360 video, except you have to press a button to enter into 360 video mode.

One thing I noticed is that the Samsung Gallery doesn’t like 5.7K videos. It won’t open them. However, once I exported them at 4K, they worked fine.

Of course, if you have the original .insv files, you can always view them in the app.

Viewing 360 media in a VR headset

What I like about 360 media is that it’s the closest way to experience the place where you were — without being there.

If you have a Google Cardboard or an equivalent VR headset, you can use the Android app called VR Media Player. It has a VR viewer mode (shown by a VR goggles icon.

You can also upload the video to YouTube and view the video through the YouTube app which has a VR headset mode.