webrtc Getting started with webrtc Get access to your audio and video using getUserMedia() API, Hello WebRTC!

Example

navigator.mediaDevices is the common method adapted in Chrome and FF to getUserMedia as of now.

A promised based call back which returns local stream on success

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

You can pass audio and video constraints to getUserMedia to control capture settings like resolution, framerate, device preference, and more.

Attach the stream to a video element

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

stop both video and audio

localStream.getTracks().forEach((track) => {
    track.stop();
});

stop only audio

localStream.getAudioTracks()[0].stop();

stop only video

localStream.getVideoTracks()[0].stop();

Live demo