Question

我正在建立一个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的分辨率，如果我也能获得一些有关如何使VIDEO和AUDIO静音的代码段，请使用。并且还留下了一个连接的对等体。感谢您的帮助。

Answer 1

感谢所有答案，但是我已经从一个已经提出的问题中找到了解决方法：

WebRTC video constraints not working

我所做的只是将代码放在“ window”函数上方，并且可以正常工作。仍然不知道它是否可以在Firefox上使用。

WebRTC远程视频分辨率太大

1 个答案: