skywayを用いたweb会議システムにおいて参加者画面が縦一列に表示される

前提・実現したいこと

初投稿失礼致します。
skyway-js-sdkを用いてweb会議システムを制作しました。
しかし、以下の写真のように参加者画面が縦一列に表示されてしまいます。
これを横一列に表示させたいと考えています。
どうかご回答よろしくお願い致します。
![]

＜追記問題＞
画面の人数を増やすと文字に画面がかぶってしまう問題が発生してしまいました。
文字にかぶらず画面を増やしたいと考えています。

発生している問題・エラーメッセージ

画面が縦一列に表示される。
＜追記問題＞
画面が文字にかぶる

該当のソースコード

使用したコードを乗せておきます。

html
1<html>
2<head>
3  <meta charset="utf-8">
4  <title>SkyWay - Video chat example</title>
5  <link rel="stylesheet" href="style.css">
6  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7  <script type="text/javascript" src="//cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
8  <script type="text/javascript" src="../key.js"></script>
9  <script type="text/javascript" src="script.js"></script>
10</head>
11
12<body>
13
14<div class="pure-g">
15
16  <!-- Video area -->
17  <div class="pure-u-2-3" id="video-container">
18    <div id="their-videos"></div>
19    <video id="my-video" muted="true" autoplay playsinline ></video>
20  </div>
21
22  <!-- Steps -->
23  <div class="pure-u-1-3">
24    <h2>オンラインビデオ会議　デモ版</h2>
25
26    <div class="select">
27      <label for="audioSource">Audio input source: </label><select id="audioSource"></select>
28    </div>
29
30    <div class="select">
31      <label for="videoSource">Video source: </label><select id="videoSource"></select>
32    </div>
33
34    <!-- Get local audio/video stream -->
35    <div id="step1">
36      <p>Please click `allow` on the top of the screen so we can access your webcam and microphone for calls.</p>
37      <div id="step1-error">
38        <p>Failed to access the webcam and microphone. Make sure to run this demo on an http server and click allow when asked for permission by the browser.</p>
39        <a href="#" class="pure-button pure-button-error" id="step1-retry">Try again</a>
40      </div>
41    </div>
42
43   
44    <!-- Make calls to others -->
45    <div id="step2">
46      <h3>電話をかける</h3>
47      <form id="make-call" class="pure-form">
48        <input type="text" placeholder="Join room..." id="join-room">
49        <button class="pure-button pure-button-success" type="submit">Join</button>
50      </form>
51      <p><strong>注意：</strong>同じルーム名を使用した場合、知らない人と接続する可能性があります。</p>
52    </div>
53
54    <!-- Call in progress -->
55    <div id="step3">
56      <p>現在の部屋 <span id="room-id">...</span></p>
57      <p><a href="#" class="pure-button pure-button-error" id="end-call">電話を切る</a></p>
58    </div>
59  </div>
60</div>
61
62
63</body>
64</html>

css
1.pure-button-success,
2.pure-button-error,
3.pure-button-warning,
4.pure-button-secondary {
5  color: rgb(252, 248, 248);
6  border-radius: 4px;
7  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
8}
9.pure-button-success {
10  background: rgb(57, 11, 223); /* this is a green */
11}
12.pure-button-error {
13  background: rgb(205, 235, 34); /* this is a maroon */
14}
15.pure-button-warning {
16  background: rgb(223, 117, 20); /* this is an orange */
17}
18.pure-button-secondary {
19  background: rgb(66, 184, 221); /* this is a light blue */
20}
21
22
23
24
25
26*, *:before, *:after {
27  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
28}
29
30#my-video {
31  margin-top: 15px;
32  width: 280px;
33  height: auto;
34  background-color: #eee;
35}
36
37.remoteVideos {
38  width: 100%;
39  height: 75%;
40  max-height: 480px;
41  background-color: #eee;
42  position: sticky;
43}
44
45#video-container {
46  padding: 20px;
47  text-align: center;
48}
49
50#step1-error, #step2, #step3 {
51  display: none;
52}

javascript
1/* eslint-disable require-jsdoc */
2$(function() {
3  // Peer object
4  const peer = new Peer({
5    key:   わざと開けています
6    debug: 3,
7  });
8
9  let localStream;
10  let room;
11  peer.on('open', () => {
12    $('#my-id').text(peer.id);
13    // Get things started
14    step1();
15  });
16
17  peer.on('error', err => {
18    alert(err.message);
19    // Return to step 2 if error occurs
20    step2();
21  });
22
23  $('#make-call').on('submit', e => {
24    e.preventDefault();
25    // Initiate a call!
26    const roomName = $('#join-room').val();
27    if (!roomName) {
28      return;
29    }
30    room = peer.joinRoom('mesh_video_' + roomName, {stream: localStream});
31
32    $('#room-id').text(roomName);
33    step3(room);
34  });
35
36  $('#end-call').on('click', () => {
37    room.close();
38    step2();
39  });
40
41  // Retry if getUserMedia fails
42  $('#step1-retry').on('click', () => {
43    $('#step1-error').hide();
44    step1();
45  });
46
47  // set up audio and video input selectors
48  const audioSelect = $('#audioSource');
49  const videoSelect = $('#videoSource');
50  const selectors = [audioSelect, videoSelect];
51
52  navigator.mediaDevices.enumerateDevices()
53    .then(deviceInfos => {
54      const values = selectors.map(select => select.val() || '');
55      selectors.forEach(select => {
56        const children = select.children(':first');
57        while (children.length) {
58          select.remove(children);
59        }
60      });
61
62      for (let i = 0; i !== deviceInfos.length; ++i) {
63        const deviceInfo = deviceInfos[i];
64        const option = $('<option>').val(deviceInfo.deviceId);
65
66        if (deviceInfo.kind === 'audioinput') {
67          option.text(deviceInfo.label ||
68            'Microphone ' + (audioSelect.children().length + 1));
69          audioSelect.append(option);
70        } else if (deviceInfo.kind === 'videoinput') {
71          option.text(deviceInfo.label ||
72            'Camera ' + (videoSelect.children().length + 1));
73          videoSelect.append(option);
74        }
75      }
76
77      selectors.forEach((select, selectorIndex) => {
78        if (Array.prototype.slice.call(select.children()).some(n => {
79            return n.value === values[selectorIndex];
80          })) {
81          select.val(values[selectorIndex]);
82        }
83      });
84
85      videoSelect.on('change', step1);
86      audioSelect.on('change', step1);
87    });
88
89  function step1() {
90    // Get audio/video stream
91    const audioSource = $('#audioSource').val();
92    const videoSource = $('#videoSource').val();
93    const constraints = {
94      audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
95      video: {deviceId: videoSource ? {exact: videoSource} : undefined},
96    };
97    navigator.mediaDevices.getUserMedia(constraints).then(stream => {
98      $('#my-video').get(0).srcObject = stream;
99      localStream = stream;
100
101      if (room) {
102        room.replaceStream(stream);
103        return;
104      }
105
106      step2();
107    }).catch(err => {
108      $('#step1-error').show();
109      console.error(err);
110    });
111  }
112
113  function step2() {
114    $('#their-videos').empty();
115    $('#step1, #step3').hide();
116    $('#step2').show();
117    $('#join-room').focus();
118  }
119
120  function step3(room) {
121    // Wait for stream on the call, then set peer video display
122    room.on('stream', stream => {
123      const peerId = stream.peerId;
124      const id = 'video_' + peerId + '_' + stream.id.replace('{', '').replace('}', '');
125
126      $('#their-videos').append($(
127        '<div class="video_' + peerId +'" id="' + id + '">' +
128          '<label>' + stream.peerId + ':' + stream.id + '</label>' +
129          '<video class="remoteVideos" autoplay playsinline>' +
130        '</div>'));
131      const el = $('#' + id).find('video').get(0);
132      el.srcObject = stream;
133      el.play();
134    });
135
136    room.on('removeStream', function(stream) {
137      const peerId = stream.peerId;
138      $('#video_' + peerId + '_' + stream.id.replace('{', '').replace('}', '')).remove();
139    });
140
141    // UI stuff
142    room.on('close', step2);
143    room.on('peerLeave', peerId => {
144      $('.video_' + peerId).remove();
145    });
146    $('#step1, #step2').hide();
147    $('#step3').show();
148  }
149});

補足情報

javascriptのkeyの部分はわざと開けています。

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

再現ができないので推測ですが、こんな感じではないでしょうか。

css
1#their-videos{
2  display: flex;
3}

投稿2020/12/19 15:27

Lhankor_Mhy

総合スコア36074

hotokeR

2020/12/20 11:57

無事横並びにすることができました。しかし、画面の人数を増やすと文字に画面がかぶってしまう問題が発生してしまいました。文字にかぶらず画面を増やすにはどうすればよいでしょうか？ご回答いただけると幸いです。

Lhankor_Mhy

2020/12/21 01:40

ここに書かれているコード以外の影響だと思います。現状のCSSだけだと、そもそも「オンラインビデオ会議　デモ版」が右カラムを作らないです。

hotokeR

2020/12/22 17:45

なるほどありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！