Programming WebRTC

Applying Filters Remotely with Data Channels

Having made that detour to improve the WebRTC code with adapter.js, let’s get back to work on the goal of applying video filters remotely. Take the anonymous click-event handler you wrote earlier and rewrite it as a handleSelfVideo() callback. Start by immediately exiting the callback function when the peer connection state is anything other than connected:

demos/dc-filters/js/main.js

document.querySelector('#self')
  .addEventListener('click', handleSelfVideo);

function handleSelfVideo(event) {
  if ($peer.connection.connectionState !== 'connected') return;
  const filter = `filter-${$self.filters.cycleFilter()}`;
  event.target.className = filter;
}

Now the click event won’t ...