I'm building a webrtc group video call, so far so good everything is working but the video resolution of the other users are too large. I've tried some solutions given on other questions like:
var video_constraints = {
mandatory: {
maxHeight: 480,
maxWidth: 640
},
optional: []
};
webrtc.mediaDevices.getUserMedia({
audio: true,
video: video_constraints
}, onsuccess);
But still no progress, instead my local video go blank. Here is my code:
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Group Video Call</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<!--============================ Main Starts
=============================================-->
<section>
<div class="ui container">
<div class="ui two column stackable grid">
<div class="ui ten wide column">
<div class="ui segment" id="segment">
<!--=========================== local camera =============================================-->
<div class="ui six wide column" id="local">
<img id="local-image" class="ui large image">
<video id="local-video" class="ui large image" autoplay></video>
</div>
</div>
</div>
<div class="video-actions">
<button value="submit" class="outBtn">Make room public</button>
<button value="submit" class="outBtn">Leave</button>
<button value="submit" id="muteBtn">Mute</button>
<button value="submit" class="outBtn">Kick</button>
</div>
<!--========================== reomte cameras
=============================================-->
<div id="remote-videos" class="ui stackable grid">
<div >
<img class="ui centered small image">
</div>
<div >
<img class="ui centered small image">
</div>
<div >
<img class="ui centered small image">
</div>
<div >
<img class="ui centered small image">
</div>
</div>
</div>
<!--======================== remote video template
=============================================-->
<script id="remote-video-template" type="text/x-handlebars-template">
<div id="{{ id }}" class="remote-img">
</div>
</script>
<div class="clr"></div>
</div>
</section>
</div>
<!--================================ scripts
==============================================-->
<script src="../functions/node_modules/jquery/dist/jquery.min.js"></script>
<script src="../functions/node_modules/handlebars/dist/handlebars.min.js ">
</script>
<script src="../functions/node_modules/simplewebrtc/out/simplewebrtc-with-
adapter.bundle.js"></script>
<script src="../functions/node_modules/semantic-ui-css/semantic.min.js">
</script>
<script src="js/app.js"></script>
</body>
</html>
JAVASCRIPT:
window.addEventListener('load', () => {
// for Group Creator Video
const localImageEl = $('#local-image');
const localVideoEl = $('#local-video');
// Joined Friends Videos
const remoteVideoTemplate = Handlebars.compile($('#remote-video-
template').html());
const remoteVideosEl = $('#remote-videos');
let remoteVideosCount = 0;
let height = 200;
let width = 200;
// Hiding cameras until they are initialized
localVideoEl.hide();
// initial rules for form verification
formEl.form({
fields: {
roomName: 'empty',
username: 'empty',
},
});
// create the webrtc connection
const webrtc = new SimpleWebRTC({
// the id dom element that will hold "our" video
localVideoEl: 'local-video',
// the id dom element that will hold remote videos
remoteVideosEl: 'remote-videos',
// for gaining video and voice access
autoRequestMedia: true,
debug: false,
detectSpeakingEvents: true,
autoAdjustMic: false,
});
// if (localCameraacess==1)
webrtc.on('localStream', () => {
localImageEl.hide();
localVideoEl.show();
});
// adding remote videos
webrtc.on('videoAdded', (video, peer) => {
// eslint-disable-next-line no-console
const id = webrtc.getDomId(peer);
const html = remoteVideoTemplate({ id });
if (remoteVideosCount < 5){
if (remoteVideosCount === 0) {
remoteVideosEl.html(html);
} else {
remoteVideosEl.append(html);
}
$(`#${id}`).html(video);
//$(`#${id} video`).addClass('ui image medium'); // for video
image to be responsive not good through
remoteVideosCount += 1;
}
});
// registeration of new chat room
const createRoom = (roomName) => {
console.info(`Creating new room: ${roomName}`);
webrtc.createRoom(roomName, (err, name) => {
formEl.form('clear');
showChatRoom(name);
postMessage(`${username} created chatroom`);
});
};
// Join existing Chat Room
const joinRoom = (roomName) => {
// eslint-disable-next-line no-console
console.log(`Joining Room: ${roomName}`);
webrtc.joinRoom(roomName);
showChatRoom(roomName);
postMessage(`${username} joined chatroom`);
};
});
I want to use a resolution of 320 x 240 on all remote video screens and also if i could get some code snippet on how to mute both VIDEO and AUDIO. And also leaving a connected peer. I appreciate any help.
