Skip to main content
The Ant Media Server JavaScript SDK enables WebRTC streaming in web browsers. It provides a simple API for publishing and playing streams with ultra-low latency.

​
Installation

​
CDN

Include the SDK directly in your HTML: 
<script src="https://your-server:5443/LiveApp/js/webrtc_adaptor.js"></script>

​
NPM

Install via npm for modern web applications: 
npm install @ant-media/webrtc_adaptor
Then import in your JavaScript: 
import { WebRTCAdaptor } from '@ant-media/webrtc_adaptor';

​
Basic Usage

​
Initialize the SDK

Create a WebRTC adaptor instance: 
const webRTCAdaptor = new WebRTCAdaptor({
  websocket_url: "wss://your-server:5443/WebRTCAppEE/websocket",
  mediaConstraints: {
    video: true,
    audio: true
  },
  peerconnection_config: {
    iceServers: [{urls: "stun:stun1.l.google.com:19302"}]
  },
  sdp_constraints: {
    OfferToReceiveAudio: false,
    OfferToReceiveVideo: false
  },
  localVideoId: "localVideo",
  remoteVideoId: "remoteVideo",
  callback: (info, obj) => {
    if (info === "initialized") {
      console.log("WebRTC adaptor initialized");
    } else if (info === "publish_started") {
      console.log("Publishing started");
    } else if (info === "publish_finished") {
      console.log("Publishing finished");
    }
  },
  callbackError: (error, message) => {
    console.error("Error:", error, message);
  }
});

​
Publishing a Stream

Publish video/audio from the user’s camera and microphone: 
// Start publishing with a stream ID
const streamId = "myStream123";
webRTCAdaptor.publish(streamId);

​
Playing a Stream

Play an existing stream: 
// Play a stream by ID
const streamId = "myStream123";
webRTCAdaptor.play(streamId);

​
Conference Room

Join a multi-party conference room: 
const roomId = "conference-room-1";
const streamId = "myStreamInRoom";

// Join room and start publishing
webRTCAdaptor.joinRoom(roomId, streamId);

// Handle room events in callback
callback: (info, obj) => {
  if (info === "joinedTheRoom") {
    console.log("Joined room:", obj.streamId);
    
    // Play other streams in the room
    const streams = obj.streams;
    streams.forEach(stream => {
      webRTCAdaptor.play(stream);
    });
  } else if (info === "newStreamAvailable") {
    console.log("New stream available:", obj.streamId);
    webRTCAdaptor.play(obj.streamId);
  }
}

​
Screen Sharing

Share your screen instead of camera: 
// Enable screen sharing
webRTCAdaptor.switchDesktopCapture(streamId);

// Switch back to camera
webRTCAdaptor.switchVideoCameraCapture(streamId, deviceId);

​
Data Channels

Send real-time data alongside video: 
// Send data to all viewers
const data = {
  message: "Hello viewers!",
  timestamp: Date.now()
};
webRTCAdaptor.sendData(streamId, JSON.stringify(data));

// Receive data in callback
callback: (info, obj) => {
  if (info === "data_received") {
    const receivedData = JSON.parse(obj.data);
    console.log("Received:", receivedData);
  }
}

​
Configuration Options

​
Media Constraints

Customize video and audio capture: 
mediaConstraints: {
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 },
    frameRate: { ideal: 30, max: 60 },
    facingMode: "user" // or "environment" for back camera
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true
  }
}

​
ICE Servers

Configure STUN/TURN servers for NAT traversal: 
peerconnection_config: {
  iceServers: [
    { urls: "stun:stun1.l.google.com:19302" },
    {
      urls: "turn:your-turn-server:3478",
      username: "turnuser",
      credential: "turnpassword"
    }
  ]
}

​
Event Callbacks

Handle SDK events: 
callback: (info, obj) => {
  switch(info) {
    case "initialized":
      console.log("SDK initialized");
      break;
    case "publish_started":
      console.log("Stream started:", obj.streamId);
      break;
    case "publish_finished":
      console.log("Stream stopped:", obj.streamId);
      break;
    case "play_started":
      console.log("Playback started:", obj.streamId);
      break;
    case "play_finished":
      console.log("Playback stopped:", obj.streamId);
      break;
    case "data_received":
      console.log("Data received:", obj.data);
      break;
  }
},
callbackError: (error, message) => {
  console.error("Error:", error, message);
}

​
Stop Publishing/Playing

Stop streams when done: 
// Stop publishing
webRTCAdaptor.stop(streamId);

// Leave conference room
webRTCAdaptor.leaveFromRoom(roomId);

// Close all connections
webRTCAdaptor.closeWebSocket();

​
Sample Application

View the complete sample application: 
<!DOCTYPE html>
<html>
<head>
  <title>Ant Media WebRTC</title>
</head>
<body>
  <video id="localVideo" autoplay muted></video>
  <video id="remoteVideo" autoplay></video>
  
  <button onclick="startPublishing()">Start Publishing</button>
  <button onclick="startPlaying()">Start Playing</button>
  
  <script src="https://your-server:5443/LiveApp/js/webrtc_adaptor.js"></script>
  <script>
    const webRTCAdaptor = new WebRTCAdaptor({
      websocket_url: "wss://your-server:5443/LiveApp/websocket",
      mediaConstraints: { video: true, audio: true },
      localVideoId: "localVideo",
      remoteVideoId: "remoteVideo",
      callback: (info) => console.log(info),
      callbackError: (error) => console.error(error)
    });
    
    function startPublishing() {
      webRTCAdaptor.publish("stream1");
    }
    
    function startPlaying() {
      webRTCAdaptor.play("stream1");
    }
  </script>
</body>
</html>

​
Resources

JavaScript SDK Repository

View source code, examples, and contribute on GitHub

​
Browser Compatibility

The JavaScript SDK supports all modern browsers with WebRTC:
  • Chrome 74+
  • Firefox 66+
  • Safari 12.1+
  • Edge 79+
  • Opera 62+
WebRTC requires HTTPS in production. Localhost works with HTTP for development only.

​
Next Steps

REST API

Control streams with the REST API

Authentication

Secure your streams with tokens

Build docs developers (and LLMs) love

Get started for freeTalk to us