Live Audio/Video

Table of Contents

WebRTC

WebRTC stands for Web Real Time Communication. We’ll get more into this next week but I want to get started with one portion:

getUserMedia

getUserMedia is a method specified as part of WebRTC that allows access to the microphone and webcam of users.

<button id="thebutton">Click Me!</button>
<video id="thevideo"></video>
<script>
    // The video element on the page to display the webcam
    let video = document.getElementById('thevideo')
    // Constraints - what do we want?
    let constraints = { audio: false, video: true }
    // Prompt the user for permission, get the stream
    document.getElementById('thebutton').addEventListener('click', startVideo)
    function startVideo() {
        navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function (stream) {
                /* Use the stream */
                // Attach to our video object
                video.srcObject = stream;
                // Wait for the stream to load enough to play
                video.onloadedmetadata = function (e) {
                    video.play();
                }
            })
            .catch(function (err) {
                /* Handle the error */
                alert(err);
            })
    }
</script>

One cool aspect of this is that you can draw the video on to a canvas as well (perhaps to manipulate it):

<script>
// Canvas element on the page
let thecanvas = document.getElementById('thecanvas');
let thecontext = thecanvas.getContext('2d');
let offset = 0;
// draw video to our cannvas
function drawVideoToCanvas() {
  thecontext.drawImage(video, offset, 0, 50, 150);  
  offset += 50;
  if (offset >= 300) offset = 0;
  setTimeout(drawVideoToCanvas, 500);  
}
</script>

From the canvas, you can create an image and send that via Socket.io to everyone else, making simple video server:

// Create a data URL from the canvas
var dataUrl = thecanvas.toDataURL('image/webp', 1)

// Optionally draw it to an image object to make sure it works
document.getElementById('imagefile').src = dataUrl

// Send it via our socket server the same way as we send the image
socket.emit('image', dataUrl)

More Information: Capturing Audio and Video in HTML5 (a bit out of date)