diff --git a/examples/webrtc-player/example.html b/examples/webrtc-player/example.html
index 75d77b5..6b57142 100644
--- a/examples/webrtc-player/example.html
+++ b/examples/webrtc-player/example.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,15 +11,22 @@
             margin: 1rem;
         }
 
-        *, body, html {
+        *,
+        body,
+        html {
             box-sizing: border-box;
         }
 
-        label, input, select, button {
+        label,
+        input,
+        select,
+        button {
             display: block;
         }
 
-        input, select, button {
+        input,
+        select,
+        button {
             margin-bottom: 1rem;
         }
 
@@ -77,8 +85,34 @@
         .hidden {
             display: none;
         }
+
+        .error-message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(220, 38, 38, 0.9);
+            color: white;
+            padding: 1.5rem 2rem;
+            border-radius: 0.5rem;
+            max-width: 80%;
+            text-align: center;
+            z-index: 300;
+        }
+
+        .error-message button {
+            margin-top: 1rem;
+            padding: 0.5rem 1rem;
+            background: white;
+            color: rgb(220, 38, 38);
+            border: none;
+            border-radius: 0.25rem;
+            cursor: pointer;
+            font-weight: bold;
+        }
     </style>
 </head>
+
 <body>
     <!--
         A bit of a boilerplate to allow changing the camera IP address and
@@ -133,8 +167,13 @@
     <div class="video-wrapper">
         <div class="video-wrapper-inner">
             <div class="overlay">
+                <div id="error-message" class="error-message hidden">
+                    <div id="error-text"></div>
+                    <button id="retry-button" type="button">Retry Connection</button>
+                </div>
                 <button id="play-button" class="play-button hidden" type="button">
-                    <svg height="640" width="512" version="1.1" id="svg4" viewBox="0 0 512 640" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+                    <svg height="640" width="512" version="1.1" id="svg4" viewBox="0 0 512 640"
+                        xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
                         <defs id="defs8" />
                         <path d="M 0,0 512,320 0,640 Z" id="path2" />
                     </svg>
@@ -235,7 +274,7 @@
         })();
     </script>
     <script type="module">
-        (function() {
+        (function () {
             // add your STUN servers here
             const stunServers = [
                 'stun.goodcam.io:3478',
@@ -263,6 +302,9 @@
             const form = document.getElementById('camera-info');
             const video = document.getElementById('my-video');
             const play = document.getElementById('play-button');
+            const errorMessage = document.getElementById('error-message');
+            const errorText = document.getElementById('error-text');
+            const retryButton = document.getElementById('retry-button');
             const cloudConnectionInfo = document.getElementById('cloud-connection-info');
             const directConnectionInfo = document.getElementById('direct-connection-info');
 
@@ -273,6 +315,16 @@
             const stream = form['stream'];
             const update = form['update'];
 
+            function showError(message) {
+                errorText.textContent = message;
+                errorMessage.classList.remove('hidden');
+                play.classList.add('hidden');
+            }
+
+            function hideError() {
+                errorMessage.classList.add('hidden');
+            }
+
             // fill in the form
             connection.value = settings['connection'];
             deviceId.value = settings['device-id'];
@@ -323,16 +375,23 @@
             }
 
             function createPlayer() {
+                hideError();
+
                 let promise = (async () => {
                     try {
                         const url = await getStreamUrl();
-                        const player = new VideoPlayer(video, play);
+                        const player = new VideoPlayer(video, play, (err) => {
+                            console.error('Streaming session error', err);
+                            showError('Streaming connection lost: ' + err.message);
+                        });
 
                         player.play(url, stunServers);
 
                         return player;
                     } catch (e) {
                         console.error('unable to create player', e);
+                        showError('Failed to initialize player: ' + e.message);
+                        return null;
                     }
                 })();
 
@@ -388,9 +447,15 @@
                 play.classList.add('hidden');
             });
 
+            retryButton.addEventListener('click', async (e) => {
+                player.stop();
+                player = createPlayer();
+            });
+
             // hide input fields that should not be visible
             connection.dispatchEvent(new Event('change'));
         })();
     </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/examples/webrtc-player/js/webrtc-player.js b/examples/webrtc-player/js/webrtc-player.js
index 3a55627..85ac9a0 100644
--- a/examples/webrtc-player/js/webrtc-player.js
+++ b/examples/webrtc-player/js/webrtc-player.js
@@ -10,9 +10,10 @@ class StreamingSession {
      * content
      * @param {Element} playButtonElem play button element
      */
-    constructor(videoElem, playButtonElem) {
+    constructor(videoElem, playButtonElem, errorCallback) {
         this.videoElem = videoElem;
         this.playButtonElem = playButtonElem;
+        this.errorCallback = errorCallback;
 
         this.bufferLocalICECandidates = true;
         this.bufferedLocalICECandidates = [];
@@ -118,6 +119,8 @@ class StreamingSession {
 
         this.bufferRemoteICECandidates = true;
         this.bufferedRemoteICECandidates = [];
+
+        this.errorCallback?.(err || new Error('Streaming session terminated'));
     }
 
     /**
@@ -285,9 +288,11 @@ class VideoPlayer {
      * Create a new video player.
      *
      * @param {Element} videoElem video element
+     * @param {Element} playButtonElem play button element
+     * @param {Function} errorCallback error callback function called when an error occurs in the webRTC session
      */
-    constructor(videoElem, playButtonElem) {
-        this.session = new StreamingSession(videoElem, playButtonElem);
+    constructor(videoElem, playButtonElem, errorCallback) {
+        this.session = new StreamingSession(videoElem, playButtonElem, errorCallback);
         this.connect = null;
     }
 
diff --git a/examples/webrtc-player/js/webrtc-player.ts b/examples/webrtc-player/js/webrtc-player.ts
new file mode 100644
index 0000000..705b69c
--- /dev/null
+++ b/examples/webrtc-player/js/webrtc-player.ts
@@ -0,0 +1,347 @@
+/* eslint-disable no-console */
+/**
+ * WebRTC streaming session.
+ */
+class StreamingSession {
+  videoElem: HTMLVideoElement
+  playButtonElem: HTMLButtonElement
+  bufferLocalICECandidates: boolean
+  bufferedLocalICECandidates: any[]
+  bufferRemoteICECandidates: boolean
+  bufferedRemoteICECandidates: any[]
+  connection: RTCPeerConnection | null
+  ws: WebSocket | null
+  tracks: MediaStreamTrack[]
+  errorCallback: ((err: any) => void) | null
+  /**
+   * Create a new streaming session.
+   *
+   * @param {Element} videoElem video element that will display the video content
+   * @param {Element} playButtonElem play button element
+   * @param {Function} errorCallback error callback function called when an error occurs in the webRTC session
+   */
+  constructor(videoElem: HTMLVideoElement, playButtonElem: HTMLButtonElement, errorCallback: (err: any) => void) {
+    this.videoElem = videoElem
+    this.playButtonElem = playButtonElem
+    this.errorCallback = errorCallback
+
+    this.bufferLocalICECandidates = true
+    this.bufferedLocalICECandidates = []
+
+    this.bufferRemoteICECandidates = true
+    this.bufferedRemoteICECandidates = []
+
+    this.connection = null
+    this.ws = null
+    this.tracks = []
+  }
+
+  /**
+   * Connect to a given signaling URL and start streaming.
+   *
+   * @param {string} url WebRTC signaling URL
+   * @param {Array} stunServers STUN servers
+   */
+  async connect(url: string, stunServers: string[]) {
+    stunServers = stunServers || []
+
+    this.connection = new RTCPeerConnection({
+      iceServers: stunServers.map(server => ({
+        urls: `stun:${server}`,
+      })),
+    })
+
+    this.tracks = []
+
+    this.connection.onicecandidate = e => this.sendLocalCandidate(e.candidate)
+    this.connection.ontrack = (e) => {
+      this.tracks.push(e.track)
+    }
+    this.connection.oniceconnectionstatechange = async (e: any) => {
+      if (e.target?.iceConnectionState === 'connected') {
+        this.videoElem.srcObject = new MediaStream(this.tracks)
+
+        try {
+          await this.videoElem.play()
+        }
+        catch {
+          this.playButtonElem.classList.remove('hidden')
+        }
+      }
+
+      if (e.target?.iceConnectionState === 'failed' || e.target?.iceConnectionState === 'disconnected') {
+        this.terminate(new Error(`ICE connection state is ${e.target?.iceConnectionState}`))
+      }
+    }
+
+    this.ws = await new Promise((resolve, reject) => {
+      const ws = new WebSocket(url)
+
+      ws.onopen = () => {
+        ws.onopen = null
+        ws.onerror = err => this.terminate(err)
+        ws.onclose = () => this.terminate()
+        ws.onmessage = msg => this.processWsMessage(msg)
+
+        resolve(ws)
+      }
+
+      ws.onerror = (err) => {
+        ws.onopen = null
+        ws.onerror = null
+
+        reject(err)
+      }
+    })
+
+    this.sendMessage({
+      type: 'hello',
+      stun_servers: stunServers,
+    })
+  }
+
+  /**
+   * Terminate the streaming session.
+   *
+   * @param {*} err possible error
+   */
+  terminate(err?: any) {
+    if (err) {
+      console.error(err)
+    }
+
+    if (this.connection !== null) {
+      this.connection.onicecandidate = null
+      this.connection.ontrack = null
+
+      this.connection.close()
+
+      this.connection = null
+    }
+
+    if (this.ws !== null) {
+      this.ws.onerror = null
+      this.ws.onclose = null
+      this.ws.onmessage = null
+
+      this.ws.close()
+
+      this.ws = null
+    }
+
+    this.bufferLocalICECandidates = true
+    this.bufferedLocalICECandidates = []
+
+    this.bufferRemoteICECandidates = true
+    this.bufferedRemoteICECandidates = []
+
+    this.errorCallback?.(err || new Error('Streaming session terminated'))
+  }
+
+  /**
+   * Send a given signaling message.
+   *
+   * @param {*} msg a message to be sent
+   */
+  sendMessage(msg: object) {
+    console.debug('Sending signaling message', msg)
+    this.ws?.send(JSON.stringify(msg))
+  }
+
+  /**
+   * Send a given answer.
+   *
+   * @param {*} answer answer generated by RTCPeerConnection
+   */
+  sendAnswer(answer: RTCSessionDescriptionInit) {
+    this.sendMessage({
+      type: 'answer',
+      sdp: answer.sdp,
+    })
+  }
+
+  /**
+   * Send a given local candidate.
+   *
+   * @param {*} candidate local candidate generated by RTCPeerConnection
+   */
+  sendLocalCandidate(candidate: RTCIceCandidate | null) {
+    if (this.bufferLocalICECandidates) {
+      this.bufferedLocalICECandidates.push(candidate)
+    }
+    else {
+      this.sendMessage({
+        type: 'candidate',
+        candidate: candidateToMessage(candidate),
+      })
+    }
+  }
+
+  /**
+   * Process a given WS message event.
+   *
+   * @param {*} msg a WS message event
+   */
+  processWsMessage(msg: MessageEvent) {
+    if (msg.type === 'message') {
+      this.processMessage(JSON.parse(msg.data))
+    }
+  }
+
+  /**
+   * Process a given signaling message.
+   *
+   * @param {*} msg incoming signaling message
+   */
+  processMessage(msg: any) {
+    console.debug('Signaling message received', msg)
+
+    if (msg.type === 'offer') {
+      this.processOffer(msg.sdp)
+    }
+    else if (msg.type === 'candidate') {
+      this.processRemoteCandidate(msg.candidate)
+    }
+    else {
+      console.warn('Unknown signaling message received', msg)
+    }
+  }
+
+  /**
+   * Process a given offer.
+   *
+   * @param {*} offer WebRTC offer
+   */
+  async processOffer(offer: any) {
+    try {
+      await this.connection?.setRemoteDescription({
+        type: 'offer',
+        sdp: offer,
+      })
+
+      // we can accept remote candidates once the remote description has
+      // been set
+      this.bufferRemoteICECandidates = false
+      for (const candidate of this.bufferedRemoteICECandidates) {
+        this.processRemoteCandidate(candidate)
+      }
+      this.bufferedRemoteICECandidates = []
+
+      const answer = await this.connection!.createAnswer()
+
+      this.sendAnswer(answer)
+
+      // we can send local candidates once the SDP answer has been sent
+      this.bufferLocalICECandidates = false
+      for (const candidate of this.bufferedLocalICECandidates) {
+        this.sendLocalCandidate(candidate)
+      }
+      this.bufferedLocalICECandidates = []
+
+      await this.connection?.setLocalDescription(answer)
+    }
+    catch (e) {
+      console.error(e)
+    }
+  }
+
+  /**
+   * Process a given remote candidate.
+   *
+   * @param {*} candidate remote candidate
+   */
+  async processRemoteCandidate(candidate: RTCIceCandidateInit) {
+    if (this.bufferRemoteICECandidates) {
+      this.bufferedRemoteICECandidates.push(candidate)
+    }
+    else {
+      try {
+        await this.connection?.addIceCandidate(candidateFromMessage(candidate))
+      }
+      catch (e) {
+        console.error(e)
+      }
+    }
+  }
+}
+
+/**
+ * Create a candidate from a given candidate message payload.
+ *
+ * @param {*} msg candidate message payload
+ * @returns candidate
+ */
+function candidateFromMessage(msg: any) {
+  if (!msg) {
+    return null
+  }
+
+  return {
+    candidate: msg.candidate,
+    sdpMid: msg.mid,
+    usernameFragment: msg.username_fragment,
+  }
+}
+
+/**
+ * Create a candidate message payload from a given candidate.
+ *
+ * @param {*} candidate candidate
+ * @returns candidate message payload
+ */
+function candidateToMessage(candidate: RTCIceCandidate | null) {
+  if (!candidate) {
+    return null
+  }
+
+  return {
+    candidate: candidate.candidate,
+    mid: candidate.sdpMid,
+    username_fragment: candidate.usernameFragment,
+  }
+}
+
+/**
+ * Video player.
+ */
+export class VideoPlayer {
+  session: StreamingSession
+  connect: Promise<void> | null
+  /**
+   * Create a new video player.
+   *
+   * @param {Element} videoElem video element
+   */
+  constructor(videoElem: HTMLVideoElement, playButtonElem: HTMLButtonElement, errorCallback: (err: any) => void) {
+    this.session = new StreamingSession(videoElem, playButtonElem, errorCallback)
+    this.connect = null
+  }
+
+  /**
+   * Start playback.
+   *
+   * @param {string} url WebRTC signaling URL
+   * @param {Array} stunServers STUN servers
+   */
+  play(url: string, stunServers: string[]) {
+    console.info(`Starting video playback from ${url}`)
+
+    this.connect = this.session.connect(url, stunServers)
+  }
+
+  /**
+   * Stop playback.
+   */
+  async stop() {
+    if (!this.connect) {
+      return
+    }
+
+    console.info('Stopping video playback')
+
+    await this.connect
+
+    this.session.terminate()
+    this.connect = null
+  }
+}
