Vue Example

This example shows SnapRTC initiator in action as a Vue component.

Use your device to scan the QR code and the photos will load to the left.

Vue Initiator Example

View the source for this example in the Github repo.

<template>
  <div class="wrapper">
    <div class="container">
      <div style="flex: 1 1;">
        <img
          v-for="url in photos"
          :src="url"
          class="photo"
        />
      </div>
      <div style="flex: 0 1; text-align: right; min-width: 120px; margin-top: 0px !important;">
        <img
          v-if="qrCode !== ''"
          :src="qrCode"
          style="width: 120px; height: 120px;"
        />
      </div>
    </div>
    <div style="border-top: 1px solid var(--sl-color-gray-5); padding: 8px; text-align: center">
      <a :href="captureUrl" target="_blank">{{ captureUrl }}</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { snaprtcInit } from 'snaprtc';
import { STATIC_SESSION } from '../../environment';
import { arrayBufferToBase64 } from '../utils';

const props = defineProps<{
  interfaceUrl: string,
  signalingServer: string,
}>()

const emits = defineEmits<{
  photoReceived: [Uint8Array]
}>()

const qrCode = ref('')

const captureUrl = ref('')

const photos = ref<string[]>([])

const isLocalDev = window.location.hostname === "localhost";

onMounted(() => {
  snaprtcInit({
    // The URL that displays the capture interface
    interfaceUrl: `${props.interfaceUrl.replace(/\/$/, "")}/reference/01-capture-example/`,

    // The URL of the signaling server
    signalingServer: props.signalingServer,

    // Use a static ID for local dev
    idConfig: isLocalDev ? {
      explicitId: STATIC_SESSION
    } : undefined,

    // The function to be invoked when the connection is ready
    readyFn: (qr, id, url) => {
      qrCode.value = qr
      captureUrl.value = url
    },

    // The function to receive the photo
    blobReceivedFn: handleBlob
  });
})

function handleBlob(photo: Uint8Array): void {
  const photoDataUrl = "data:image/png;base64," + arrayBufferToBase64(photo)

  photos.value.push(photoDataUrl)

  // Emit and handle this or handle it here.
  emits("photoReceived", photo)
}
</script>