Connect with us


WebXR: A Contributor’s Story with Soham Parekh



The “Contributor’s Story” series is intended to provide a face and voice to our major open source contributors and community members, an overview of the projects they are working on, and the successes and challenges contributors face when developing.

In this blog post, we will be talking to Soham, a WebXR contributor working on creating immersive AR/VR examples using WebXR media layers through the Major League Hacking (MLH) Fellowship.

“I have discovered that the best way to get better at software development is to not only practice it but to use it to solve real world problems.”

Tell us a little bit about yourself and your current experience in the MLH Fellowship.

I am a software developer, currently in my final year, creating open source projects and writing about software development, competitive coding, machine learning, cybersecurity and information security awareness. I am also the founder of and lead maintainer at Devstation, a not-for-profit organisation with an aim to encourage startups and organisations to adopt open source tech.

I spent most of my day turning coffee to code primarily written in Golang, Rust, Python or JavaScript. My life goal is to make the web a better, safer place for humans. For this, I am actively involved in Natural Language Processing, particularly in the applications of social graphs and graph neural networks to problems in social computing like web ethics, identification of hate speech, etc. I also am of the opinion that the most disastrous invention of the human-kind is pineapple as a pizza topping.

The first time I got to know about the MLH Fellowship was through a previous fellow who worked with Jest as a part of his fellowship. A few months back, I had created a feature request for a Jest-plugin for Puppeteer for introducing a video recording for the tests. Knowing that I can contribute to the fellowship in exciting frameworks like Jest that solve real-world problems is something that really caught my attention.

free widgets for website

Where did you first learn about open source? How did you get started using/contributing?

I came into contact with open source through the speech-to-code engine called Dragonfly. Since then, I have been an active contributor to the Cloud Native Computing Foundation since the past few years. However, my first formal introduction to open-source was in a program similar to MLH Fellowship called Google Summer of Code. There I worked with Wikimedia Foundation as a part of the Release Engineering Team and absolutely fell in love with the open source community.

See also  Facebook's Good News - The New York Times

Describe the project you are currently working on.

For the fellowship, I am working with Zhixiang Teoh on creating immersive AR, VR examples on the web that incorporate the WebXR layers specification, particularly with the WebXR media layers. The WebXR media layers specification makes creating and interacting with the video layers in a virtual environment not only performant but also crisper, reducing the dependence on CPU and leveraging the GPU in a rather efficient fashion.

We have particularly focused our attention on achieving these implementations through an existing library like Three.js that makes interfacing with the browser’s WebGL and WebXR API relatively simple by abstracting it away through helper classes and functions. Our goals for the fellowship particularly were to create examples that indicate how multiple media layers with different 3D characteristics (equi-rectangular, quad or cylindrical) can be created and attach controller interactions with them such as fluid resizing, a toolbar for video play/pause and playback as well as moving the layers in the virtual 3D space.

How did you initially go about tackling the issue?

We were lucky to have some reference implementations that the previous fellows had worked on, but the existing code wasn’t really the best way to do it. The code examples were in the form of a single file that made traversing to the code rather convoluted.

Our first step was to migrate the existing code examples to be modular and use as many abstractions provided by Three.js as possible so that the future viewers of the code have an easier time following it. We also made the code well-commented and added support for “snowpack” to leverage support for ES Modules.

free widgets for website

What roadblocks or problems have you faced thus far in your contribution?

One of the major roadblocks we’ve had so far in our contribution is that the WebXR Layers are a relatively new feature recently added to the WebXR world. WebXR itself is particularly new in its field and while browser-support for immersive experiences on the Web has been on a steady rise, a lot of the things required a thorough understanding on our part on other areas of the WebXR API spec itself. This was rather challenging since the spec was intended to serve as a reference to the browser implementers. The process, however, was very exciting since it got as familiar with a lot of the things that work under the hood of a browser that make an immersive experience on the web achievable.

See also  Why the Bengal CPI(M) Secretary's Two-Hour Facebook Speech is Significant

What is the current status of development?

As the fellowship nears its close, we have achieved most of the deliverables with a well-commented code. Currently we are working to make the existing code more refined, filtering out potential bugs, adding documentation for caveats and work around that we have incorporated and making the code more performant in places where we can.

What have you learned about the project, development, or open source thus far?

The last time I worked with Three.js was two years ago with a primary aim to learn it while constructing my personal website. Since peeking into Three.js implementation of native WebGL and WebXR APIs became a recurring trend, working with WebXR as a part of the fellowship gave me a chance to explore Three.js a lot more in depth. I now feel confident to contribute to Three.js and the Immersive Web community and feel ready to dive deep into complicated codebases.

There is one key experience that I particularly value a lot as the fellowship comes to a close and that is getting to know and work with Teoh. I have a tendency to over engineer, and Teoh was always helpful in keeping me track without spending too much time on refining a feature and taking breaks when necessary. I’ve learnt that quick pair programming sessions are a great way to work on complicated tasks and a great way to get to know your fellow developers.

Overall, contributing to open source and knowing that our examples will serve as a reference for future implementations of the layer specification fills me with a sense of satisfaction.

free widgets for website

What advice would you give future contributors to the open source project?

WebXR looks quite more intimidating than it actually is. I think the best way to approach it is to first read the MDN Web Docs on the WebXR specification and then read the official WebXR API spec. The official WebXR specification is meant for browser tormentors. This makes it easy to get lost. The idea is to use this specification only to understand the corresponding documentation on MDN in more detail.

See also  India wants Facebook to track every single WhatsApp message

Three.js does a wonderful job of working with WebGL. Using the abstractions provided by Three.js has really helped us to work with WebGL and WebXR APIs with relative ease. 1

We discovered another such framework called A-frame halfway into the fellowship. A-frame makes working with immersive experiences on the web simpler and I highly recommend future contributors take a look at it.

We’d like to thank Soham for their continuous contributions to the Facebook Open Source ecosystem. You can follow Soham’s work through his Website, GitHub, and LinkedIn.

If you’d like to learn more about Facebook Open Source, follow us on Twitter, Facebook, and YouTube for relevant updates, and check out the WebXR website for how to get started. Also, we recently sponsored Open Web Docs, where we hope to do our part to continue the MDN tradition of providing quality web documentation on a variety of technologies, including XR.

free widgets for website

Facebook Developers

Continue Reading
Advertisement free widgets for website


Creating Apps with App Use Cases





With the goal of making Meta’s app creation process easier for developers to create and customize their apps, we are announcing the rollout of an updated process using App Use Cases instead of the former product-focused process. App Use Cases will enable developers to quickly create apps by selecting the use case that best represents their reason for creating an app.

Currently, the product-focused app creation process requires developers to select an app type and individually request permission to API endpoints. After listening to feedback from developers saying this process was, at times, confusing and difficult to navigate, we’re updating our approach that’s based on App Use Cases. With App Use Cases, user permissions and features will be bundled with each use case so developers can now confidently select the right data access for their needs. This change sets developers up for success to create their app and navigate app review, ensuring they only get the exact data access they need to accomplish their goals.

Starting today Facebook Login will be the first use case to become available to developers. This will be the first of many use cases that will be built into the app creation process that will roll out continually in 2023. For more information please reference our Facebook Login documentation.

First seen at

See also  Girlfriend keeps fans on Facebook
Continue Reading


Understanding Authorization Tokens and Access for the WhatsApp Business Platform





The WhatsApp Business Platform makes it easy to send WhatsApp messages to your customers and automate replies. Here, we’ll explore authentication using the Cloud API, hosted by Meta.

We’ll start with generating and using a temporary access token and then replace it with a permanent access token. This tutorial assumes you’re building a server-side application and won’t need additional steps to keep your WhatsApp application secrets securely stored.

Managing Access and Authorization Tokens

First, let’s review how to manage authorization tokens and safely access the API.


Start by making sure you have a developer account on Meta for Developers. You’ll also need WhatsApp installed on a mobile device to send test messages to.

Creating an App

Before you can authenticate, you’ll need an application to authenticate you.

free widgets for website

Once you’re signed in, you see the Meta for Developers App Dashboard. Click Create App to get started.

Next, you’ll need to choose an app type. Choose Business.

After that, enter a display name for your application. If you have a business account to link to your app, select it. If not, don’t worry. The Meta for Developers platform creates a test business account you can use to experiment with the API. When done, click Create App.

Then, you’ll need to add products to your app. Scroll down until you see WhatsApp and click the Set up button:

Finally, choose an existing Meta Business Account or ask the platform to create a new one and click Continue:

free widgets for website

And with that, your app is created and ready to use. You’re automatically directed to the app’s dashboard.

Note that you have a temporary access token. For security reasons, the token expires in less than 24 hours. However, you can use it for now to test accessing the API. Later, we’ll cover how to generate a permanent access token that your server applications can use. Also, note your app’s phone number ID because you’ll need it soon.

See also  What you must do before spending a cent on Facebook ads

Click the dropdown under the To field, and then click Manage phone number list.

In the popup that appears, enter the phone number of a WhatsApp account to send test messages to.

Then, scroll further down the dashboard page and you’ll see an example curl call that looks similar to this:

free widgets for website
curl -i -X POST -H 'Authorization: Bearer ' -H 'Content-Type: application/json' -d '{ "messaging_product": "whatsapp", "to": "", "type": "template", "template": { "name": "hello_world", "language": { "code": "en_US" } } }'

Note that the Meta for Developers platform inserts your app’s phone number ID and access token instead of the and placeholders shown above. If you have curl installed, paste the command into your terminal and run it. You should receive a “hello world” message in WhatsApp on your test device.

If you’d prefer, you can convert the curl request into an HTTP request in your programming language by simply creating a POST request that sets the Authorization and Content-Type headers as shown above, including the JSON payload in the request body.

Since this post is about authentication, let’s focus on that. Notice that you’ve included your app’s access token in the Authorization header. For any request to the API, you must set the Authorization header to Bearer .

Remember that you must use your token instead of the placeholder. Using bearer tokens will be familiar if you’ve worked with JWT or OAuth2 tokens before. If you’ve never seen one before, a bearer token is essentially a random secret string that you, as the bearer of the token, can present to an API to prove you’re allowed to access it.

Failure to include this header causes the API to return a 401 Unauthorized response code.

free widgets for website

Creating a Permanent Access Token

Knowing that you need to use a bearer token in the Authorization header of an HTTP request is helpful, but it’s not enough. The only access token you’ve seen so far is temporary. Chances are that you want your app to access the API for more than 24 hours, so you need to generate a longer-lasting access token.

Fortunately, the Meta for Developers platform makes this easy. All you need to do is add a System User to your business account to obtain an access token you can use to continue accessing the API. To create a system user, do the following:

  • Go to Business Settings.

  • Select the business account your app is associated with.
  • Below Users, click System Users.
  • Click Add.
  • Name the system user, choose Admin as the user role, and click Create System User.
  • Select the whatsapp_business_messaging permission.
  • Click Generate New Token.
  • Copy and save your token.

Your access token is a random string of letters and numbers. Now, try re-running the earlier request using the token you just created instead of the temporary one:

curl -i -X POST -H 'Authorization: Bearer ' -H 'Content-Type: application/json' -d '{ "messaging_product": "whatsapp", "to": "", "type": "template", "template": { "name": "hello_world", "language": { "code": "en_US" } } }'

Your test device should receive a second hello message sent via the API.

Best Practices for Managing Access Tokens

It’s important to remember that you should never embed an App Access Token in a mobile or desktop application. These tokens are only for use in server-side applications that communicate with the API. Safeguard them the same way you would any other application secrets, like your database credentials, as anyone with your token has access to the API as your business.

If your application runs on a cloud services provider like AWS, Azure, GCP, or others, those platforms have tools to securely store app secrets. Alternatively there are freely-available secret stores like Vault or Conjur. While any of these options may work for you, it’s important to evaluate your options and choose what works best for your setup. At the very least, consider storing access tokens in environment variables and not in a database or a file where they’re easy to find during a data breach.

free widgets for website


In this post, you learned how to create a Meta for Developers app that leverages the WhatsApp Business Platform. You now know how the Cloud API’s bearer access tokens work, how to send an access token using an HTTP authorization header, and what happens if you send an invalid access token. You also understand the importance of keeping your access tokens safe since an access token allows an application to access a business’ WhatsApp messaging capabilities.

Why not try using the Cloud API, hosted by Meta if you’re considering building an app for your business to manage WhatsApp messaging? Now that you know how to obtain and use access tokens, you can use them to access any endpoint in the API.

First seen at

Continue Reading


Now people can share directly to Instagram Reels from some of their favorite apps





More people are creating, sharing and watching Reels than ever before. We’ve seen the creator community dive deeply into video content – and use it to connect with their communities. We’re running a limited alpha test that lets creators share video content directly from select integrated apps to Instagram Reels. Now, creators won’t be interrupted in their workflow, making it easier for them share share and express themselves on Reels.

“With the shift to video happening across almost all online platforms, our innovative tools and services empower creativity and fuel the creator economy and we are proud to be able to offer a powerful editing tool like Videoleap that allows seamless content creation, while partnering with companies like Meta to make sharing content that much easier.”- Zeev Farbman, CEO and co-founder of Lightricks.

Starting this month, creators can share short videos directly to Instagram Reels from some of their favorite apps, including Videoleap, Reface, Smule, VivaVideo, SNOW, B612, VITA and Zoomerang, with more coming soon. These apps and others also allow direct sharing to Facebook , which is available for any business with a registered Facebook App to use.

We hope to expand this test to more partners in 2023. If you’re interested in being a part of that beta program, please fill out this form and we will keep track of your submission. We do not currently have information to share about general availability of this integration.

Learn more here about sharing Stories and Reels to Facebook and Instagram and start building today.

free widgets for website


Q. What is the difference between the Instagram Content Publishing API and Instagram Sharing to Reels?

See also  Instagram to Integrate Reels Into Facebook Social Network

A: Sharing to Reels is different from the Instagram Content Publishing API, which allows Instagram Business accounts to schedule and publish posts to Instagram from third-party platforms. Sharing to Reels is specifically for mobile apps to display a ‘Share to Reels’ widget. The target audience for the Share to Reels widget is consumers, whereas the Content Publishing API is targeted towards businesses, including third-party publishing platforms such as Hootsuite and Sprout Social that consolidate sharing to social media platforms within their third-party app.

Q: Why is Instagram partnering with other apps?

A: Creators already use a variety of apps to create and edit videos before uploading them to Instagram Reels – now we’re making that experience faster and easier. We are currently doing a small test of an integration with mobile apps that creators know and love, with more coming soon.

Q: How can I share my video from another app to Reels on Instagram?

free widgets for website

A: How it works (Make sure to update the mobile app you’re using to see the new Share to Reels option):

  • Create and edit your video in one of our partner apps
  • Once your video is ready, tap share and then tap the Instagram Reels icon
  • You will enter the Instagram Camera, where you can customize your reel with audio, effects, Voiceover and stickers. Record any additional clips or swipe up to add an additional clip from your camera roll.
  • Tap ‘Next’ to add a caption, hashtag, location, tag others or use the paid partnerships label.
  • Tap ‘Share’. Your reel will be visible where you share reels today, depending on your privacy settings.
See also  Pennsylvania Lottery to host its first ever Facebook Live drawing July 11

Q: How were partners selected?

A. We are currently working with a small group of developers that focus on video creation and editing as early partners. We’ll continue to expand to apps with other types of creation experiences.

Q: When will other developers be able to access Sharing to Reels on Instagram?

A: We do not currently have a date for general availability, but are planning to expand further in 2023.

Q: Can you share to Facebook Reels from other apps?

free widgets for website

A: Yes, Facebook offers the ability for developers to integrate with Sharing to Reels. For more information on third-party sharing opportunities, check out our entire suite of sharing offerings .

First seen at

Continue Reading