Angular, Svelte and more

import { Injectable, OnDestroy } from '@angular/core';import { EdithPro } from '@edithpro/sdk'; @Injectable({ providedIn: 'root' })export class EdithProService implements OnDestroy {  readonly ep = new EdithPro({    clientId: 'ep_live_abc123',    workspaceId: 'ws_64f2a1b3',  });   constructor() { this.ep.init(); }  open() { this.ep.open(); }  ngOnDestroy() { this.ep.destroy(); }}

@Component({  selector: 'app-record-button',  template: `<button (click)="edithpro.open()">Record a video</button>`,})export class RecordButtonComponent {  constructor(public edithpro: EdithProService) {}}

<script>  import { onMount, onDestroy } from 'svelte';  let ep;   onMount(async () => {    const { EdithPro } = await import('@edithpro/sdk');    ep = new EdithPro({ clientId: 'ep_live_abc123', workspaceId: 'ws_64f2a1b3' });    ep.init();  });  onDestroy(() => ep?.destroy());</script> <button on:click={() => ep?.open()}>Record a video</button>

import { EdithPro } from '@edithpro/sdk'; class EdithProButton extends HTMLElement {  connectedCallback() {    this.ep = new EdithPro({      clientId: this.getAttribute('client-id'),      workspaceId: this.getAttribute('workspace-id'),    });    this.ep.init();    this.addEventListener('click', () => this.ep.open());  }  disconnectedCallback() { this.ep.destroy(); }}customElements.define('edithpro-button', EdithProButton);