# Usar o Snap com o SDK de Transmissão do IVS Este documento explica como usar o SDK de Kit de Câmera do Snap com o SDK de Transmissão do IVS. ## Web Esta seção pressupõe que você já esteja familiarizado com a [publicação e a inscrição em vídeos usando o SDK de Transmissão na Web](getting-started-pub-sub-web.md). Para integrar o SDK Camera Kit do Snap com o SDK de Transmissão na Web de streaming em tempo real do IVS, você precisa: 1. Instalar o SDK Camera Kit e o Webpack. (Nosso exemplo usa o Webpack como empacotador, mas você pode usar qualquer empacotador de sua escolha.) 1. Create `index.html`. 1. Adicionar elementos de configuração. 1. Create `index.css`. 1. Exibir e configurar os participantes. 1. Exibir câmeras e microfones conectados. 1. Criar uma sessão do Camera Kit. 1. Obtenha as lentes e preencha o seletor de lentes. 1. Renderizar a saída de uma sessão do Camera Kit em uma tela. 1. Crie uma função para preencher o menu suspenso Lentes. 1. Fornecer uma fonte de mídia para o Camera Kit renderizar e publicar um `LocalStageStream`. 1. Create `package.json`. 1. Criar um arquivo de configuração do Webpack. 1. Configure um servidor HTTPS e teste. Cada uma dessas etapas está descrita abaixo. ### Instalar o SDK Camera Kit e o Webpack Neste exemplo, usamos o Webpack como nosso empacotador; no entanto, você pode usar qualquer empacotador. ``` npm i @snap/camera-kit webpack webpack-cli ``` ### Crie index.html Em seguida, crie o padrão em HTML e importe o SDK de Transmissão da Web como uma tag de script. No código a seguir, certifique-se de substituir `` pela versão do SDK de Transmissão que você estiver usando. #### HTML ``` Amazon IVS Real-Time Streaming Web Sample (HTML and JavaScript)

Amazon IVS Real-Time Streaming Web Sample (HTML and JavaScript)

This sample is used to demonstrate basic HTML / JS usage. Use the AWS CLI to create a Stage and a corresponding ParticipantToken. Multiple participants can load this page and put in their own tokens. You can read more about stages in our public docs.

``` ### Adicionar elementos de configuração Crie o HTML para selecionar uma câmera, microfone e lentes, e para especificar um token de participante: #### HTML ```

Select Camera

Select Microphone

Participant Token

``` Acrescente HTML adicional abaixo para exibir os feeds da câmera de participantes locais e remotos: #### HTML ```

``` Carregue lógica adicional, incluindo métodos auxiliares para configurar a câmera e o arquivo JavaScript incluído. (Posteriormente nesta seção, você criará esses arquivos JavaScript e os agrupará em um único arquivo, para poder importar o Camera Kit como um módulo. O arquivo JavaScript incluído conterá a lógica para configurar o Camera Kit, aplicar uma Lente e publicar o feed da câmera com uma Lente aplicada a um palco.) Adicione tags de fechamento para os elementos `body` e `html` para concluir a criação do `index.html`. #### HTML ``` ``` ### Crie o index.css Crie um arquivo de origem de CSS para estilizar a página. Não examinaremos esse código para focar na lógica de gerenciamento de um palco e na integração com o SDK do Camera Kit do Snap. #### CSS ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ html, body { margin: 2rem; box-sizing: border-box; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; } hr { margin: 1rem 0; } table { display: table; } canvas { margin-bottom: 1rem; background: green; } video { margin-bottom: 1rem; background: black; max-width: 100%; max-height: 150px; } .log { flex: none; height: 300px; } .content { flex: 1 0 auto; } .button { display: block; margin: 0 auto; } .local-container { position: relative; } .static-controls { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: -4rem; text-align: center; } .static-controls button { display: inline-block; } .hidden { display: none; } .participant-container { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 1rem; } video { border: 0.5rem solid #555; border-radius: 0.5rem; } .placeholder { background-color: #333333; display: flex; text-align: center; margin-bottom: 1rem; } .placeholder span { margin: auto; color: white; } #local-media { display: inline-block; width: 100vw; } #local-media video { max-height: 300px; } #remote-media { display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100%; } #lens-selector { width: 100%; margin-bottom: 1rem; } ``` ### Exibir e configurar os participantes Em seguida, crie `helpers.js`, que contém métodos auxiliares que você usará para exibir e configurar os participantes: #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ function setupParticipant({ isLocal, id }) { const groupId = isLocal ? 'local-media' : 'remote-media'; const groupContainer = document.getElementById(groupId); const participantContainerId = isLocal ? 'local' : id; const participantContainer = createContainer(participantContainerId); const videoEl = createVideoEl(participantContainerId); participantContainer.appendChild(videoEl); groupContainer.appendChild(participantContainer); return videoEl; } function teardownParticipant({ isLocal, id }) { const groupId = isLocal ? 'local-media' : 'remote-media'; const groupContainer = document.getElementById(groupId); const participantContainerId = isLocal ? 'local' : id; const participantDiv = document.getElementById( participantContainerId + '-container' ); if (!participantDiv) { return; } groupContainer.removeChild(participantDiv); } function createVideoEl(id) { const videoEl = document.createElement('video'); videoEl.id = id; videoEl.autoplay = true; videoEl.playsInline = true; videoEl.srcObject = new MediaStream(); return videoEl; } function createContainer(id) { const participantContainer = document.createElement('div'); participantContainer.classList = 'participant-container'; participantContainer.id = id + '-container'; return participantContainer; } ``` ### Exibir câmeras e microfones conectados Em seguida, crie `media-devices.js`, que contém métodos auxiliares para exibir câmeras e microfones conectados ao seu dispositivo: #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ /** * Returns an initial list of devices populated on the page selects */ async function initializeDeviceSelect() { const videoSelectEl = document.getElementById('video-devices'); videoSelectEl.disabled = false; const { videoDevices, audioDevices } = await getDevices(); videoDevices.forEach((device, index) => { videoSelectEl.options[index] = new Option(device.label, device.deviceId); }); const audioSelectEl = document.getElementById('audio-devices'); audioSelectEl.disabled = false; audioDevices.forEach((device, index) => { audioSelectEl.options[index] = new Option(device.label, device.deviceId); }); } /** * Returns all devices available on the current device */ async function getDevices() { // Prevents issues on Safari/FF so devices are not blank await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); const devices = await navigator.mediaDevices.enumerateDevices(); // Get all video devices const videoDevices = devices.filter((d) => d.kind === 'videoinput'); if (!videoDevices.length) { console.error('No video devices found.'); } // Get all audio devices const audioDevices = devices.filter((d) => d.kind === 'audioinput'); if (!audioDevices.length) { console.error('No audio devices found.'); } return { videoDevices, audioDevices }; } async function getCamera(deviceId) { // Use Max Width and Height return navigator.mediaDevices.getUserMedia({ video: { deviceId: deviceId ? { exact: deviceId } : null, }, audio: false, }); } async function getMic(deviceId) { return navigator.mediaDevices.getUserMedia({ video: false, audio: { deviceId: deviceId ? { exact: deviceId } : null, }, }); } ``` ### Criar uma sessão do Camera Kit Crie `stages.js`, que contém a lógica para aplicar uma Lente ao feed da câmera e publicar o feed em um palco. Recomendamos copiar e colar o bloco de código a seguir em `stages.js`. Em seguida, você pode revisar o código, peça por peça, para entender o que está acontecendo nas seções a seguir. #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ const { Stage, LocalStageStream, SubscribeType, StageEvents, ConnectionState, StreamType, } = IVSBroadcastClient; import { bootstrapCameraKit, createMediaStreamSource, Transform2D, } from '@snap/camera-kit'; let cameraButton = document.getElementById('camera-control'); let micButton = document.getElementById('mic-control'); let joinButton = document.getElementById('join-button'); let leaveButton = document.getElementById('leave-button'); let controls = document.getElementById('local-controls'); let videoDevicesList = document.getElementById('video-devices'); let audioDevicesList = document.getElementById('audio-devices'); let lensSelector = document.getElementById('lens-selector'); let session; let availableLenses = []; // Stage management let stage; let joining = false; let connected = false; let localCamera; let localMic; let cameraStageStream; let micStageStream; const liveRenderTarget = document.getElementById('canvas'); const init = async () => { await initializeDeviceSelect(); const cameraKit = await bootstrapCameraKit({ apiToken: 'INSERT_YOUR_API_TOKEN_HERE', }); session = await cameraKit.createSession({ liveRenderTarget }); const { lenses } = await cameraKit.lensRepository.loadLensGroups([ 'INSERT_YOUR_LENS_GROUP_ID_HERE', ]); availableLenses = lenses; populateLensSelector(lenses); const snapStream = liveRenderTarget.captureStream(); lensSelector.addEventListener('change', handleLensChange); lensSelector.disabled = true; cameraButton.addEventListener('click', () => { const isMuted = !cameraStageStream.isMuted; cameraStageStream.setMuted(isMuted); cameraButton.innerText = isMuted ? 'Show Camera' : 'Hide Camera'; }); micButton.addEventListener('click', () => { const isMuted = !micStageStream.isMuted; micStageStream.setMuted(isMuted); micButton.innerText = isMuted ? 'Unmute Mic' : 'Mute Mic'; }); joinButton.addEventListener('click', () => { joinStage(session, snapStream); }); leaveButton.addEventListener('click', () => { leaveStage(); }); }; async function setCameraKitSource(session, mediaStream) { const source = createMediaStreamSource(mediaStream); await session.setSource(source); source.setTransform(Transform2D.MirrorX); session.play(); } const populateLensSelector = (lenses) => { lensSelector.innerHTML = ''; lenses.forEach((lens, index) => { const option = document.createElement('option'); option.value = index; option.text = lens.name || `Lens ${index + 1}`; lensSelector.appendChild(option); }); }; const handleLensChange = (event) => { const selectedIndex = parseInt(event.target.value); if (session && availableLenses[selectedIndex]) { session.applyLens(availableLenses[selectedIndex]); } }; const joinStage = async (session, snapStream) => { if (connected || joining) { return; } joining = true; const token = document.getElementById('token').value; if (!token) { window.alert('Please enter a participant token'); joining = false; return; } // Retrieve the User Media currently set on the page localCamera = await getCamera(videoDevicesList.value); localMic = await getMic(audioDevicesList.value); await setCameraKitSource(session, localCamera); // Create StageStreams for Audio and Video cameraStageStream = new LocalStageStream(snapStream.getVideoTracks()[0]); micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]); const strategy = { stageStreamsToPublish() { return [cameraStageStream, micStageStream]; }, shouldPublishParticipant() { return true; }, shouldSubscribeToParticipant() { return SubscribeType.AUDIO_VIDEO; }, }; stage = new Stage(token, strategy); // Other available events: // https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-guides/stages#events stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => { connected = state === ConnectionState.CONNECTED; if (connected) { joining = false; controls.classList.remove('hidden'); lensSelector.disabled = false; } else { controls.classList.add('hidden'); lensSelector.disabled = true; } }); stage.on(StageEvents.STAGE_PARTICIPANT_JOINED, (participant) => { console.log('Participant Joined:', participant); }); stage.on( StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { console.log('Participant Media Added: ', participant, streams); let streamsToDisplay = streams; if (participant.isLocal) { // Ensure to exclude local audio streams, otherwise echo will occur streamsToDisplay = streams.filter( (stream) => stream.streamType === StreamType.VIDEO ); } const videoEl = setupParticipant(participant); streamsToDisplay.forEach((stream) => videoEl.srcObject.addTrack(stream.mediaStreamTrack) ); } ); stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => { console.log('Participant Left: ', participant); teardownParticipant(participant); }); try { await stage.join(); } catch (err) { joining = false; connected = false; console.error(err.message); } }; const leaveStage = async () => { stage.leave(); joining = false; connected = false; cameraButton.innerText = 'Hide Camera'; micButton.innerText = 'Mute Mic'; controls.classList.add('hidden'); }; init(); ``` Na primeira parte desse arquivo, importamos o SDK de Transmissão e o SDK do Camera Kit Web e inicializamos as variáveis que usaremos com cada SDK. Criaremos uma sessão do Camera Kit chamando `createSession` após [fazer o bootstrap do SDK do Camera Kit Web](https://kit.snapchat.com/reference/CameraKit/web/0.7.0/index.html#bootstrapping-the-sdk). Observe que um objeto de elemento de tela é transmitido para uma sessão e isso faz com que o Camera Kit seja renderizado nessa tela. #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ const { Stage, LocalStageStream, SubscribeType, StageEvents, ConnectionState, StreamType, } = IVSBroadcastClient; import { bootstrapCameraKit, createMediaStreamSource, Transform2D, } from '@snap/camera-kit'; let cameraButton = document.getElementById('camera-control'); let micButton = document.getElementById('mic-control'); let joinButton = document.getElementById('join-button'); let leaveButton = document.getElementById('leave-button'); let controls = document.getElementById('local-controls'); let videoDevicesList = document.getElementById('video-devices'); let audioDevicesList = document.getElementById('audio-devices'); let lensSelector = document.getElementById('lens-selector'); let session; let availableLenses = []; // Stage management let stage; let joining = false; let connected = false; let localCamera; let localMic; let cameraStageStream; let micStageStream; const liveRenderTarget = document.getElementById('canvas'); const init = async () => { await initializeDeviceSelect(); const cameraKit = await bootstrapCameraKit({ apiToken: 'INSERT_YOUR_API_TOKEN_HERE', }); session = await cameraKit.createSession({ liveRenderTarget }); ``` ### Obtenha as lentes e preencha o seletor de lentes Para buscar suas Lentes, substitua o espaço reservado para o ID de grupo de Lentes pelo seu próprio, que está disponível no [Portal do desenvolvedor do Camera Kit](https://camera-kit.snapchat.com/). Preencha a lista suspensa de seleção de lentes usando a função `populateLensSelector()` que criaremos posteriormente. #### JavaScript ``` session = await cameraKit.createSession({ liveRenderTarget }); const { lenses } = await cameraKit.lensRepository.loadLensGroups([ 'INSERT_YOUR_LENS_GROUP_ID_HERE', ]); availableLenses = lenses; populateLensSelector(lenses); ``` ### Renderizar a saída de uma sessão do Camera Kit em uma tela Use o método [captureStream](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream) para retornar um `MediaStream` do conteúdo da tela. A tela conterá uma transmissão de vídeo do feed da câmera com uma Lente aplicada. Além disso, adicione receptores de eventos para os botões de silenciar a câmera e o microfone, bem como receptores de eventos para entrar e sair de um palco. Caso um receptor entre em um palco, passaremos uma sessão do Camera Kit e o `MediaStream` da tela para que ela possa ser publicada em um palco. #### JavaScript ``` const snapStream = liveRenderTarget.captureStream(); lensSelector.addEventListener('change', handleLensChange); lensSelector.disabled = true; cameraButton.addEventListener('click', () => { const isMuted = !cameraStageStream.isMuted; cameraStageStream.setMuted(isMuted); cameraButton.innerText = isMuted ? 'Show Camera' : 'Hide Camera'; }); micButton.addEventListener('click', () => { const isMuted = !micStageStream.isMuted; micStageStream.setMuted(isMuted); micButton.innerText = isMuted ? 'Unmute Mic' : 'Mute Mic'; }); joinButton.addEventListener('click', () => { joinStage(session, snapStream); }); leaveButton.addEventListener('click', () => { leaveStage(); }); }; ``` ### Crie uma função para preencher a lista suspensa de lentes Crie a função a seguir para preencher o seletor **Lentes** com as lentes obtidas anteriormente. O seletor **Lentes** é um elemento de interface de usuário na página que permite selecionar uma lista de lentes para aplicar ao feed da câmera. Além disso, crie a função de retorno de chamada `handleLensChange` para aplicar a lente especificada quando ela for selecionada no menu suspenso **Lentes**. #### JavaScript ``` const populateLensSelector = (lenses) => { lensSelector.innerHTML = ''; lenses.forEach((lens, index) => { const option = document.createElement('option'); option.value = index; option.text = lens.name || `Lens ${index + 1}`; lensSelector.appendChild(option); }); }; const handleLensChange = (event) => { const selectedIndex = parseInt(event.target.value); if (session && availableLenses[selectedIndex]) { session.applyLens(availableLenses[selectedIndex]); } }; ``` ### Fornecer o Camera com uma fonte de mídia para renderização e publicar um LocalStageStream Para publicar uma transmissão de vídeo com uma Lente aplicada, crie uma função chamada `setCameraKitSource` para transmitir o `MediaStream` que foi capturado da tela anteriormente. O `MediaStream` da tela não estará fazendo nada no momento porque ainda não incorporamos nosso feed de câmera local. Podemos incorporar nosso feed de câmera local chamando o método auxiliar `getCamera` e atribuindo-o a `localCamera`. Em seguida, podemos transmitir nosso feed de câmera local (via `localCamera`) e o objeto da sessão para `setCameraKitSource`. A função `setCameraKitSource` converte nosso feed de câmera local em uma [fonte de mídia para o CameraKit](https://docs.snap.com/camera-kit/integrate-sdk/web/web-configuration#creating-a-camerakitsource) chamando `createMediaStreamSource`. Em seguida, a fonte de mídia para `CameraKit` é [transformada](https://docs.snap.com/camera-kit/integrate-sdk/web/web-configuration#2d-transforms) para espelhar a câmera frontal. O efeito da Lente é aplicado à fonte de mídia e renderizado na tela de saída chamando `session.play()`. Agora, com a Lente aplicada ao `MediaStream` capturado da tela, poderemos publicá-lo em um palco. Fazemos isso criando um `LocalStageStream` com as faixas de vídeo do `MediaStream`. Em seguida, é possível transmitir uma instância de `LocalStageStream` para um `StageStrategy` para publicação. #### JavaScript ``` async function setCameraKitSource(session, mediaStream) { const source = createMediaStreamSource(mediaStream); await session.setSource(source); source.setTransform(Transform2D.MirrorX); session.play(); } const joinStage = async (session, snapStream) => { if (connected || joining) { return; } joining = true; const token = document.getElementById('token').value; if (!token) { window.alert('Please enter a participant token'); joining = false; return; } // Retrieve the User Media currently set on the page localCamera = await getCamera(videoDevicesList.value); localMic = await getMic(audioDevicesList.value); await setCameraKitSource(session, localCamera); // Create StageStreams for Audio and Video // cameraStageStream = new LocalStageStream(localCamera.getVideoTracks()[0]); cameraStageStream = new LocalStageStream(snapStream.getVideoTracks()[0]); micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]); const strategy = { stageStreamsToPublish() { return [cameraStageStream, micStageStream]; }, shouldPublishParticipant() { return true; }, shouldSubscribeToParticipant() { return SubscribeType.AUDIO_VIDEO; }, }; ``` O código restante abaixo serve para criar e gerenciar nosso palco: #### JavaScript ``` stage = new Stage(token, strategy); // Other available events: // https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-guides/stages#events stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => { connected = state === ConnectionState.CONNECTED; if (connected) { joining = false; controls.classList.remove('hidden'); } else { controls.classList.add('hidden'); } }); stage.on(StageEvents.STAGE_PARTICIPANT_JOINED, (participant) => { console.log('Participant Joined:', participant); }); stage.on( StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { console.log('Participant Media Added: ', participant, streams); let streamsToDisplay = streams; if (participant.isLocal) { // Ensure to exclude local audio streams, otherwise echo will occur streamsToDisplay = streams.filter( (stream) => stream.streamType === StreamType.VIDEO ); } const videoEl = setupParticipant(participant); streamsToDisplay.forEach((stream) => videoEl.srcObject.addTrack(stream.mediaStreamTrack) ); } ); stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => { console.log('Participant Left: ', participant); teardownParticipant(participant); }); try { await stage.join(); } catch (err) { joining = false; connected = false; console.error(err.message); } }; const leaveStage = async () => { stage.leave(); joining = false; connected = false; cameraButton.innerText = 'Hide Camera'; micButton.innerText = 'Mute Mic'; controls.classList.add('hidden'); }; init(); ``` ### Crie o package.json Crie `package.json` e adicione a configuração JSON a seguir. Esse arquivo define nossas dependências e inclui um comando de script para empacotar nosso código. #### Configuração de JSON ``` { "dependencies": { "@snap/camera-kit": "^0.10.0" }, "name": "ivs-stages-with-snap-camerakit", "version": "1.0.0", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "description": "", "devDependencies": { "webpack": "^5.95.0", "webpack-cli": "^5.1.4" } } ``` ### Criar um arquivo de configuração do Webpack Crie `webpack.config.js` e adicione o código a seguir. Isso empacota o código que criamos até aqui para que você possa usar a instrução de importar para usar o Camera Kit. #### JavaScript ``` const path = require('path'); module.exports = { entry: ['./stage.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, }; ``` Por fim, execute `npm run build` para empacotar seu JavaScript conforme definido no arquivo de configuração do Webpack. Para fins de teste, será possível servir HTML e JavaScript a partir de seu computador local. Neste exemplo, usamos o módulo `http.server` do Python. ### Configure um servidor HTTPS e teste Para testar nosso código, é necessário configurar um servidor HTTPS. O uso de um servidor HTTPS para desenvolvimento local e testes da integração da sua aplicação da Web com o SDK do Snap Camera Kit ajudará a evitar problemas de CORS (compartilhamento de recursos de origem cruzada). Abra um terminal e navegue até o diretório em que você criou todo o código até esse ponto. Use o comando a seguir para gerar um certificado SSL/TLS autoassinado e uma chave privada: ``` openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes ``` Isso cria dois arquivos: `key.pem` (a chave privada) e `cert.pem` (o certificado autoassinado). Crie um novo arquivo de Python chamado `https_server.py` e adicione o seguinte código: #### Python ``` import http.server import ssl # Set the directory to serve files from DIRECTORY = '.' # Create the HTTPS server server_address = ('', 4443) httpd = http.server.HTTPServer( server_address, http.server.SimpleHTTPRequestHandler) # Wrap the socket with SSL/TLS context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER) context.load_cert_chain('cert.pem', 'key.pem') httpd.socket = context.wrap_socket(httpd.socket, server_side=True) print(f'Starting HTTPS server on https://localhost:4443, serving {DIRECTORY}') httpd.serve_forever() ``` Abra um terminal, navegue até o diretório em que você criou o arquivo `https_server.py` e execute o comando a seguir: ``` python3 https_server.py ``` Isso inicia o servidor de HTTPS em https://localhost:4443, servindo arquivos do diretório atual. Certifique-se de que os arquivos `cert.pem` e `key.pem` estejam no mesmo diretório do arquivo `https_server.py`. Abra seu navegador e navegue até https://localhost:4443. Como esse é um certificado SSL/TLS autoassinado, seu navegador não confiará nele, então você receberá um aviso. Como isso é apenas para fins de teste, você pode ignorar o aviso. Você então deverá ver o efeito de AR da lente do Snap que especificou anteriormente aplicado ao feed da câmera na tela. Observe que essa configuração usando os módulos integrados `http.server` e `ssl` do Python é adequada para fins locais de desenvolvimento e teste, mas não é recomendada para um ambiente de produção. O certificado SSL/TLS autoassinado usado nessa configuração não é confiável para navegadores da Web e outros clientes, o que significa que os usuários receberão avisos de segurança ao acessar o servidor. Além disso, embora usemos os módulos http.server e ssl integrados do Python neste exemplo, você pode optar por usar outra solução de servidor de HTTPS. ## Android Para integrar o SDK do Camera Kit do Snap com o SDK de Transmissão do IVS para Android, você deverá instalar o SDK do Camera Kit, inicializar uma sessão do Camera Kit, aplicar uma Lente e alimentar a saída da sessão do Camera Kit para a fonte de entrada de imagem personalizada. Para instalar o SDK do Camera Kit, adicione o seguinte ao arquivo `build.gradle` do seu módulo. Substitua `$cameraKitVersion` pela [versão mais recente do SDK do Camera Kit](https://docs.snap.com/camera-kit/integrate-sdk/mobile/changelog-mobile). ### Java ``` implementation "com.snap.camerakit:camerakit:$cameraKitVersion" ``` Inicialize e obtenha um `cameraKitSession`. O Camera Kit também conta com um pacote prático para as APIs [CameraX](https://developer.android.com/media/camera/camerax) do Android, de modo que você não precise escrever uma lógica complicada para usar o CameraX com o Camera Kit. Você pode usar o objeto `CameraXImageProcessorSource` como uma [fonte](https://snapchat.github.io/camera-kit-reference/api/android/latest/-camera-kit/com.snap.camerakit/-source/index.html) para [ImageProcessor](https://snapchat.github.io/camera-kit-reference/api/android/latest/-camera-kit/com.snap.camerakit/-image-processor/index.html), o que permite iniciar quadros de streaming de pré-visualização da câmera. ### Java ``` protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Camera Kit support implementation of ImageProcessor that is backed by CameraX library: // https://developer.android.com/training/camerax CameraXImageProcessorSource imageProcessorSource = new CameraXImageProcessorSource( this /*context*/, this /*lifecycleOwner*/ ); imageProcessorSource.startPreview(true /*cameraFacingFront*/); cameraKitSession = Sessions.newBuilder(this) .imageProcessorSource(imageProcessorSource) .attachTo(findViewById(R.id.camerakit_stub)) .build(); } ``` ### Buscar e aplicar Lentes Você pode configurar as Lentes e sua ordem no carrossel no [Portal do Desenvolvedor do Camera Kit](https://camera-kit.snapchat.com/): #### Java ``` // Fetch lenses from repository and apply them // Replace LENS_GROUP_ID with Lens Group ID from https://camera-kit.snapchat.com cameraKitSession.getLenses().getRepository().get(new Available(LENS_GROUP_ID), available -> { Log.d(TAG, "Available lenses: " + available); Lenses.whenHasFirst(available, lens -> cameraKitSession.getLenses().getProcessor().apply(lens, result -> { Log.d(TAG, "Apply lens [" + lens + "] success: " + result); })); }); ``` Para transmitir, envie quadros processados para o `Surface` subjacente de uma fonte de imagem personalizada. Use um objeto `DeviceDiscovery` e crie um `CustomImageSource` para retornar um `SurfaceSource`. Em seguida, será possível renderizar a saída de uma sessão `CameraKit` para o `Surface` subjacente fornecido pelo `SurfaceSource`. #### Java ``` val publishStreams = ArrayList() val deviceDiscovery = DeviceDiscovery(applicationContext) val customSource = deviceDiscovery.createImageInputSource(BroadcastConfiguration.Vec2(720f, 1280f)) cameraKitSession.processor.connectOutput(outputFrom(customSource.inputSurface)) val customStream = ImageLocalStageStream(customSource) // After rendering the output from a Camera Kit session to the Surface, you can // then return it as a LocalStageStream to be published by the Broadcast SDK val customStream: ImageLocalStageStream = ImageLocalStageStream(surfaceSource) publishStreams.add(customStream) @Override fun stageStreamsToPublishForParticipant(stage: Stage, participantInfo: ParticipantInfo): List = publishStreams ```