Introduction

Let's discover Twyng sdk in less than 5 minutes.

Getting Started

Get started by creating a new coneferncing application.

Or try twyng immediately with twyng.com.

Generate a coneferncing application

Generate a new a coneferncing application using the twyng javascrit sdk.

Download the latest version of twyng javascript sdk from here

Start your development

Add two elements into the DOM:

  <div>
    <video id="localVideo" autoplay></video>
    <video id="remoteVideo" autoplay></video>
  </div>

Create a main.js file and added following to it.

    /**main.js **/

    const localVideo = document.getElementById('localVideo')
    const remoteVideo = document.getElementById('remoteVideo')
    localVideo.muted = true

    const twyng = new Twyng({
      clientId: 'CLIENT_ID',
      apiKey: 'CLIENT_API_KEY',
      iceServers: [
        { urls: ['stun:stun.l.google.com:19302'] }
      ]
    })

    const joinInfo = {
      roomId: 'ROOM_ID',
      userId: 'UNIQUE_USER_ID',
      name: 'name',
      attributes: {
        name: 'USER_NAME',
      }
    }

    /** Listening new publishers in the particular room*/
    twyng.addEventListener('new-publisher', async (event) => {
      console.log("new-publisher entered ")
      const { data } = event
      let subscription = await twyng.subscribe(data)
      remoteVideo.srcObject = subscription.mediaStream
    })

    twyng.join(joinInfo).then(async (response) => {
        if (response.status) {  
          const localstream = await twyng.createMediastream({
            video: {
              source: 'camera',
              resolution: {
                width: 640,
                height: 360
              }
            }, audio: 'mic'
          })
        const publication = await twyng.publish(localstream)

        /** Listening publishing connection errors*/
        publication.addEventListener('error', (err) => {
          console.log("publication err", err)
        })
        localVideo.srcObject = stream
      }
    })

    window.onbeforeunload = () => twyng.leave() 

    /**End of main.js **/

Add twyng.js and main.js file to the html pgae.

    <script src="twyng.js" ></script>
    <script src="main.js" ></script>

Start a web server and serve the HTML page through the web server. Now you can see two videos on this page. One is your own video, and the other is the subscribed video of you from the media server. This is the demo implementaion of twyng javascript sdk