Video mirror

In order to share video streams we can use the rtc-media module to help us manage the video and audio feed for each user. This demo shows how to get access to the local user's video and audio stream and render it to the browser.

Include the rtc-media module. This will return a reference to the rtc-media object.

var mediaMod = require('rtc-media');

Now we can call the returned media object to get access to user's local video and audio stream - in this case we just need to pass an option to tell the browser to start streaming media immediately.

var mediaObj = mediaMod({ start: true });

We'll also need a reference to the DOM element that we want to render the video stream to.

var mirrorWindow = document.getElementById('mirror');

Now we simply call render with the target element as the argument, to display the video feed. Given a <video> element, rtc-media will render the new stream to that element. Given any other element rtc-media will create a <video> element as a child element.

mediaObj.render(mirrorWindow);

To create a realistic mirror experience we will flip the rendered video.

mirrorWindow.style.transform = 'rotateY(180deg)';

The result is a local video mirror!

var mediaMod = require('rtc-media');
var mediaObj = mediaMod({ start: true });
var mirrorWindow = document.getElementById('mirror');

// Render local video
mediaObj.render(mirrorWindow);

// Flip rendered video so the user views their own
// feed as a mirror image
mirrorWindow.style.transform = 'rotateY(180deg)';