join us on Discord for support, updates, and all things Snap AR! See you there!
Camera Kit for Web
Answers
-
@Thor Thanks for posting on the forum and my apologies for the delayed response here. Confirming I created a ticket for our eng team to see if they can provide you a solution. Hang tight... Hoping I have something to share by June 14th.
Also.. if you're available this Wed, our PM and Partner Eng team is online for office hours and we can ask them there plus any other Qs you may have.
0 -
@Thor It seems you would need Remote API to address this. Unfortunately at the time of this writing, this feature isn't available/supported on Web.
0 -
Hi @Thor , I just wanted to follow up on this and let you know that since yesterday Remote API is available for Camera Kit on Web - https://docs.snap.com/camera-kit/guides/web-customization/remote-api
Thanks,
Jacek0 -
Hi @JacekC, thank you for your reply. I've checked out the remote-api documentation and understand that this allows to call remote APIs via web service calls and to send GET/POST requests to web-services which is great.
However, what I'm missing is a way to communicate directly with the website on which the lense is embedded into. Is this possible? Did I miss something in the documentation? Thank you0 -
Hi,
Yes, it's possible and designed to support it. You can do it by overriding the service implementation that you provide to Camera Kit from your service: https://camera-kit.snapchat.com/websdk/sample/remote-api.Thank you for the question. We will update documentation to make sure it's clear.
1 -
Thank you @JacekC , follow up question. In the example you shared it looks to me like the catFactService is injected into the Lens. And I assume the Lens calls this service using a predefined API endpoint. What would that endpoint configuration look like got this to work? Is the 'Cat Fact Lens' available as a template? Maybe that would make things more clear
0 -
Hi @Thor,
You are right the a Remote API endpoint has to be predefined and the service has to imported into the lens project in order to be used.
The sample page @JacekC shared has a link to a doc page: https://docs.snap.com/camera-kit/guides/tutorials/mobile-tutorials/communicating-between-lenses-and-app
It explain what Remote API service you can temporarily use for testing to check things out and what are the steps to register your own Remote API service. It also contains a video with a walkthrough example.
Please let us know if you still have any question!
0 -
Hi @Mikalai , I think I'm getting closer. However, the doc you shared is for native apps. I'd like to share information from a website with a lens which is embedded into the same website. Do you have any doc/examples for that? Cheers
[Edit] I assume this is the doc I'm looking for: https://camera-kit.snapchat.com/websdk/sample/remote-api?_ga=2.122982731.157012345.1698621663-159909320.1697753663
0 -
-
Hey @Thor @stevenxu @Mikalai @JacekC
I'm struggling to merge the code from the exemple (CatFacts) into the index.js from the official doc containg the session etc
(var cameraKit = await bootstrapCameraKit({ ...)Could you share me the piece of code I'm missing to integrate the SpecId + RequestHandler ? 🙏
I read all the doc and found nothing except this CatFact example.edit: The code was correct, I just had to precise the right camera-kit version in the package.json, here 0.13.1 and import everything related to RemoteApiService on top of the index.js
Leaving everthing here in case another one is in the same boat.
Would be great to have a full template available tho..`
import {
bootstrapCameraKit,
createMediaStreamSource,
Transform2D,
Injectable,
RemoteApiService,
RemoteApiServices,
RemoteApiRequest,
RemoteApiRequestHandler,
RemoteApiStatus,
remoteApiServicesFactory@} from '@snap/camera-kit'
(async function () {
const myService = { apiSpecId: "<apiSpecId>", getRequestHandler(request) { if (request.endpointId !== "<endpoint>") return; return (reply) => { fetch("https://<url>/<id>", { headers: { Accept: "application/json", }, }) .then((res) => res.text()) .then((res) => reply({ status: "success", metadata: {}, body: new TextEncoder().encode(res), }) ); }; }, }; var cameraKit = await bootstrapCameraKit({ apiToken: '<API_TOKEN>' }, (container) => container.provides( Injectable( remoteApiServicesFactory.token, [remoteApiServicesFactory.token], (existing) => [...existing, myService] ) ) ); const session = await cameraKit.createSession(); document.getElementById('canvas').replaceWith(session.output.live); const { lenses } = await cameraKit.lensRepository.loadLensGroups(['<lensGroup>']); session.applyLens(lenses[0]); let mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' //back camera, remove if front } }); const source = createMediaStreamSource(mediaStream, { // transform: Transform2D.MirrorX, //use with front cam fpsLimit: 30, cameraType: 'back', //back camera }); await session.setSource(source) session.setSource(source) session.source.setRenderSize(window.innerWidth, window.innerHeight) session.play();
})()
`0 -
Hey @Thor , were you able to solve the issue? Thanks for pointing out about the link, yeah I mistakenly shared a mobile SDK link, while the correct link is: https://docs.snap.com/camera-kit/guides/web-customization/remote-api We will update the sample page to point to the correct one.
I'll follow up with the Lens Studio team about the primitives issue if it's still unresolved.
0 -
Hey @BastienSarolea You didn't mention it, so I'm curious: are you attempting to use the CatFacts lens or something else? The Remote API feature functions with lenses that are compatible with it.
0