how can I switch cameras in RTCMulticonnection
i fetch list of divices and their ids
var videoDevices = document.getElementById('video-devices');
var audioDevices = document.getElementById('audio-devices');
connection.DetectRTC.load(function() {
connection.DetectRTC.audioInputDevices.forEach(function(device) {
var option = document.createElement('option');
option.innerHTML = device.label;
option.value = device.id;
document.querySelector('select').appendChild(option);
});
connection.DetectRTC.videoInputDevices.forEach(function(device) {
var option = document.createElement('option');
option.innerHTML = device.label;
option.value = device.id;
videoDevices.appendChild(option);
});
});
And trying to change the camera by following. took this from GitHub issue
document.getElementById('switch-camera').onclick = function() {
var videoSourceId = videoDevices.value;
connection.codecs.video = 'VP8';
connection.bandwidth = { // all values in kbits/per/seconds
audio: 192,
video: 512,
screen: 512
};
connection.stopMediaAccess();
setTimeout(() => {
connection.mediaConstraints.video.optional = [{
sourceId: videoSourceId
}];
connection.addStream({audio: true, video: true});
},2000);
};
but no use camera won't change at all I tried in many ways but lands with failure
here is an example on codepen
This example from WebRTC samples may helpful it does what i want, but got confussed integrating with RTCMulticoonection.
If you want to switch camera front and back there is a solution in documentation of RTCMulticonnection.
and here is solution for you if you want to switch cameras (i.e. front/back)
function openOrJOinRoom(roomid) {
connection.mediaConstraints = {
audio: true,
video: {
facingMode: {exact : 'environment'}
}
};
connection.openOrJoin(roomid);
}
function selectFrontCameraDuringActiveSession() {
// we need to stop previous video tracks because
// mobile device may not allow us capture
// both front and back camera streams
// at the same time
connection.attachStreams.forEach(function(stream) {
// stop only video tracks
// so that we can recapture video track
stream.getVideoTracks().forEach(function(track) {
track.stop();
});
});
var mediaConstraints = {
audio: false, // NO need to capture audio again
video: {
facingMode: {exact : 'user'}
}
};
navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(frontCamera) {
var frontCameraTrack = frontCamera.getVideoTracks()[0];
connection.getAllParticipants().forEach(function(pid) {
connection.peers[pid].peer.getSenders().forEach(function(sender) {
if (sender.track.kind == 'video') {
sender.replaceTrack(frontCameraTrack);
}
});
});
});
}
function selectBackCameraDuringActiveSession() {
// we need to stop previous video tracks because
// mobile device may not allow us capture
// both front and back camera streams
// at the same time
connection.attachStreams.forEach(function(stream) {
// stop only video tracks
// so that we can recapture video track
stream.getVideoTracks().forEach(function(track) {
track.stop();
});
});
var mediaConstraints = {
audio: false, // NO need to capture audio again
video: {
facingMode: {exact : 'environment'}
}
};
navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(frontCamera) {
var frontCameraTrack = frontCamera.getVideoTracks()[0];
connection.getAllParticipants().forEach(function(pid) {
connection.peers[pid].peer.getSenders().forEach(function(sender) {
if (sender.track.kind == 'video') {
sender.replaceTrack(frontCameraTrack);
}
});
});
});
}
I copied this from GitHub issue. please do not forget to add adapter.js Hope you find this answer helpful.