【发布时间】：2019-06-13 20:23:56
【问题描述】：
我正在构建一个 webrtc 群组视频通话，到目前为止一切正常，但其他用户的视频分辨率太大。我尝试了针对其他问题给出的一些解决方案，例如：
var video_constraints = {
mandatory: {
maxHeight: 480,
maxWidth: 640
},
optional: []
};
webrtc.mediaDevices.getUserMedia({
audio: true,
video: video_constraints
}, onsuccess);
但仍然没有进展，而是我的本地视频变为空白。这是我的代码：
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`);
};
});
我想在所有远程视频屏幕上使用 320 x 240 的分辨率，如果我能获得一些关于如何将视频和音频静音的代码 sn-p。并且还留下一个连接的对等体。感谢您的帮助。
【问题讨论】：
-
并非所有视频设备都支持低至 320x240。为什么不在你的媒体限制中指出你想要 4:3 的纵横比，在 WebRTC 端强制低比特率，让浏览器协商缩放？您想要 320x240 是否有某些特殊原因，或者您只是想节省带宽？
-
@Brad 我也可以使用其他中等分辨率，问题是当我使用媒体约束时我没有得到任何结果，只是一个空白屏幕
标签： express video-streaming webrtc p2p videochat