WebRTC

&

Devices

Navigator

is

browser window interface

and

represents the state and the identity of the user agent 

window.navigator

Properties

Standard

Non-standard

Product

Experimental

Read only

Editable

Media Devices

List of devices

is

Promise returns MediaDeviceInfo

navigator.mediaDevices.enumerateDevices()
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

MediaDeviceInfo

Device Kind

Device ID

audioinput

audiooutput

videoinput

'default'

 

'communications'

 

'b3931bb98c3647058161f03f92a96ed7190a887b073489d5c2b30364bde6a363'

Streams

MediaStream

is

interface represents a stream of media content

new MediaStream();

await navigator.mediaDevices.getUserMedia(constraints);

MediaStreamConstraints

is based on 

MediaTrackConstraints

audio

video

echoCancellation
noiseSuppression
sampleRate
volume

aspectRatio
frameRate
height
width

HTMLMediaElement

<audio>

<video>

.audioTracks

.audioTracks

.videoTracks

src

srcObject

≠

Is a DOMString that reflects the src HTML attribute, which contains the URL of a media resource to use.

Is a MediaStream representing the media to play or that has played in the current HTMLMediaElement, or null if not assigned.

set stream

video.srcObject = newMediaStream;
video.play();
video.pause();

video.fastSeek(360);
video.captureStream();
video.videoTracks // .audioTracks
video.videoTracks[i].enabled = false; // true

disable stream

.enabled

.stop()

mediaStream.getTracks().forEach((track) => {
    track.enabled = false;
    track.stop();
    mediaStream.removeTrack(track);
});

.removeTrack()

WebRTC

this.peerConnection.addEventListener('track', (e: RTCMediaStreamTrackEvent) => {
    this.onTrackAdd(e);
});
this.peerConnection = new RTCPeerConnection(configuration);

offer / answer

v=0
o=- 4 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE 0 1
a=msid-semantic: WMS

m=audio 59255 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8

m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 122

offer / answer

const sendParams: Calls.SendParameters = {
    offerToReceiveAudio: true,
    offerToReceiveVideo: true,
};

const offer = await this.peerConnection.createOffer(sendParams);

manage tracks

this._sender = this.peerConnection.addTrack(track, localStream);

this.peerConnection.removeTrack(this._sender);

this.peerConnection.createOffer();

Handle device plug in / out

navigator.mediaDevices.ondevicechange = () => {}

Time for demo!

WebRTC and Devices

By Sergey Shalyapin

Made with Slides.com

WebRTC and Devices

  • 1,070

More from Sergey Shalyapin