WebRTC Example

WebRTC Example


<!doctype html>
    <!-- Recommended shim for cross-browser WebRTC support. -->
    <script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
    <!-- `autoplay` will immediately show preview video. `muted` will mute the audio to avoid feedback noise. -->
    <video id="red5pro-publisher" autoplay muted></video>
    <!-- Exposes `red5prosdk` on the window global. -->
    <script src="lib/red5pro/red5pro-sdk.min.js"></script>
    <!-- Example script below. -->
    <script src="main.js"></script>


(function (red5prosdk) {

  // Create a new instance of the WebRTC publisher.
  var publisher = new red5prosdk.RTCPublisher();

  // Initialize
      protocol: 'ws',
      port: 5080,
      host: 'localhost',
      app: 'live',
      streamName: 'mystream',
      rtcConfiguration: {
        iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
        iceCandidatePoolSize: 2,
        bundlePolicy: 'max-bundle'
      }, // See https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#RTCConfiguration_dictionary
      streamMode: 'live',
      mediaElementId: 'red5pro-publisher',
      bandwidth: {
        audio: 56,
        video: 512
      mediaConstraints: {
        audio: true,
        video: {
          width: {
            exact: 640
          height: {
            exact: 480
          frameRate: {
            min: 8,
            max: 24
    .then(function() {
      // Invoke the publish action.
      return publisher.publish();
    .catch(function(error) {
      // A fault occurred while trying to initialize and publish the stream.


Because this example demonstrates publishing to a Red5 Pro Server located on localhost, we set the protocol to ws and port to 5080, which are the default values for non-secure socket connection. If you are publishing to a remote Red5 Pro Server, it will need to be delivered securely - upon which you can rely on the default property values of wss and 443, respectively.

The video or audio element has the autoplay and muted attributes defined. This will ensure:

  • autoplay: Once access to your Camera and Microphone are available, it will show a preview of your broadcast to yourself.
  • muted: You don't get noise feedback when you start publishing, since it will mute your playback volume. Your publishing session will still have audio.