how to access video and audio stream on web using webRTC

 Hi, reader in this blog you gonna read how to access video and audio stream using JavaScript. we will cover up this tutorial with code snippet and explanation 

We will use navigator object that provide access to your hardware equipment  like media devices , bluetooth , geolocation etc..

We will focus on accessing camera.

Perquisites: 

- Camera and Mic

- Browser with JavaScript support

Lets start

let stream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true,
        });
console.log('stream', stream)

//html side 
// <video id="cam"></video>
//To bind this stream with html
let videoNode = document.getElementById('cam');
                videoNode.srcObject = stream;
                videoNode.onloadedmetadata = function () {
                    videoNode.play();
                }

The above code snippet provide you a stream with audio and video track as you can see we passed the constraint object in getUserMedia function, this is async/await approach put this in async function.

Once this code executed successfully it will ask you camera and mic permission by accepting you will get media stream  object.

Here some of useful method for stream object that can help you to get the track , setting, configuration etc..

To determining if a constraint is supported, use this code snippet, this will log all the supported constraint in console

let supported = navigator.mediaDevices.getSupportedConstraints();

console.log('supported', supported)

To get tracks list from a media stream, we have to tracks in stream because we have audio and video = true in constraint prams

let tracks = stream.getTracks()
console.log('tracks', tracks)

Get If you want to see the compatibility of your track you first need to get a track from your stream then

use track.getAudioTracks() it has a list of audio track the for example we taking the first track with this 

line of code let track = stream.getAudioTracks()[0]

        //Get audio tracks 
        let audioTracks = stream.getAudioTracks();
        //You can loop through or get first track from audioTracks
        let copabilityObj = audioTracks[0].getCapabilities();
        //copabilityObj will list all the supported constraint for this track
        console.log('copabilityObj', copabilityObj);
        //the same for video
        let videoTracks = stream.getVideoTracks();
        let copabilityVObj = videoTracks[0].getCapabilities();
        console.log('copabilityVObj', copabilityVObj);

    Result 
            autoGainControl: (2) [true, false]
            channelCount: {max: 1, min: 1}
            deviceId: "default"
            echoCancellation: (2) [true, false]
            groupId: "0bb0b02192b67423684d8fe82e59199e4795c1ce94494c489dd6278252ae4e7b"
            latency: {max: 0.010666, min: 0.002666}
            noiseSuppression: (2) [true, false]
            sampleRate: {max: 48000, min: 48000}
            sampleSize: {max: 16, min: 16}
        
         //this will provide the setting of a track
        let settingTrack =  audioTracks[0].getSettings();
        console.log('settingTrack', settingTrack);
        //this will provide the current applied constraint on track
        let constraintTrack =  audioTracks[0].getConstraints();
        console.log('constraintTrack', constraintTrack);

Complete and final code Run this code and see result 

//call the method and it will print all in your console
    async function runMediaStreamLog() {
        let supported = navigator.mediaDevices.getSupportedConstraints();
        console.log('1. Get supported constraint list', supported)
        let stream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true,
        });
        console.log('2. Get stream audio and video', stream)
        let tracks = stream.getTracks()
        console.log('3. Print tracks in stream', tracks)
        console.log('5. Print audio tracks--', tracks)
        stream.getAudioTracks().forEach(track => {
            let capabilities = track.getCapabilities();
            console.log('1. Print audio track Capabilities', capabilities)
            let setting = track.getSettings();
            console.log('2. Print audio track setting', setting)
            let constraint = track.getConstraints();
            console.log('3. Print audio track current constraint', constraint)
        })
        console.log('5. Print video tracks--', tracks)
        stream.getVideoTracks().forEach(track => {
            let capabilities = track.getCapabilities();
            console.log('1. Print video track Capabilities', capabilities)
            let setting = track.getSettings();
            console.log('2. Print video track setting', setting)
            let constraint = track.getConstraints();
            console.log('3. Print video track current constraint', constraint)
        })
    }
runMediaStreamLog();

List of constraints

 

Video: 

aspectRatio: 1.3333333333333333
brightness: 0
colorTemperature: 4600
contrast: 0
deviceId: "9fc0e675808c949595b8e49d1cc1353eaaaae677095f18b8cc8f9c0beeee524d"
exposureCompensation: 1
exposureMode: "continuous"
exposureTime: 156.25
facingMode: "user"
frameRate: 30
groupId: "b9a78ba9a5ee62198a8a24d187fa5e5279e3da2185a43d41856ff74b7656a41d"
height: 480
resizeMode: "none"
saturation: 64
sharpness: 2
whiteBalanceMode: "continuous"
width: 640
Audio: 

autoGainControl: true
channelCount: 1
deviceId: "default"
echoCancellation: true
groupId: "0bb0b02192b67423684d8fe82e59199e4795c1ce94494c489dd6278252ae4e7b"
latency: 0.01
noiseSuppression: true
sampleRate: 48000

Compatability (audio/video): 

aspectRatio: true
autoGainControl: true
brightness: true
channelCount: true
colorTemperature: true
contrast: true
deviceId: true
echoCancellation: true
exposureCompensation: true
exposureMode: true
exposureTime: true
facingMode: true
focusDistance: true
focusMode: true
frameRate: true
groupId: true
height: true
iso: true
latency: true
noiseSuppression: true
pan: true
pointsOfInterest: true
resizeMode: true
sampleRate: true
sampleSize: true
saturation: true
sharpness: true
tilt: true
torch: true
whiteBalanceMode: true
width: true
zoom: true