Camera Kit for Web

Options
Thor
Thor Posts: 8
edited June 2023 in General #1

Hi,
how can I establish a communication between a Lens and the surrounding webpage? For example sending the string of a text field that the user entered on the website (form) to the lens. Or sending a user tap event on a lens object to the page.

Answers

  • stevenxu
    stevenxu Posts: 596 👻
    Options

    @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.

  • stevenxu
    stevenxu Posts: 596 👻
    Options

    @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.

    https://docs.snap.com/camera-kit/quick-start/build-manage-ar-content/lens-studio-compatibility#unsupported-lens-features

  • JacekC
    JacekC Posts: 19 🔥
    Options

    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,
    Jacek

  • Thor
    Thor Posts: 8
    Options

    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 you

  • JacekC
    JacekC Posts: 19 🔥
    Options

    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.

  • Thor
    Thor Posts: 8
    Options

    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

  • Mikalai
    Options

    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!

  • Thor
    Thor Posts: 8
    edited October 2023 #9
    Options

    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

  • Thor
    Options

    Hi @Mikalai @JacekC , I was successful with sending data via the remote API. Now I found that Lens Studio is complaining as soon as I want to send something that isn't an int, float or a string (primitive). Is it at all possible to send an array of primitives or even an object via remote API?

  • BastienSarolea
    BastienSarolea Posts: 6
    edited November 2023 #11
    Options

    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 :smile:
    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();
    

    })()
    `

  • Mikalai
    Options

    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.

  • Mikalai
    Options

    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.