如何在html中相互添加視頻標籤？在視頻聊天應用程序？使用javascript

Question

我有一個視頻聊天應用程序，但它有一個糟糕的用戶界面。我想知道這兩個視頻怎麼可以像這個圖像一樣排列？

http://i.kinja-img.com/gawker-media/image/upload/s--iAgbzO34--/18iygzh4tkhpfpng.png

不要有口碑點不好意思，請參見鏈接。

我正在使用twilio，bootstrap，javascript。

<div id="call_tracks" class="modal fade" role="document"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    </div> 
    <div class="modal-body"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <div class="col-md-6" id="local"> 
     <div id="local-media"> 
     <video id="video1"></video> 
     </div> 
     <input id="button-preview" onclick="preview();" type="button" value="Preview My Camera" /> 
     </div> 
    </div> 
</div> 
    <div class="row"> 
    <div class="col-md-4"> 
    <div id="remote"> 
    <div id="remote-media"> 
     <img src="http://placehold.it/360x270s&text=Remote+Video" /> 
     <video id="video2"></video> 
    </div> 
    <p id="remote-video-label" class="video-label">participant video</p> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
</div> 
<script> 

document.getelementbyId(video1); 
document.getelementbyId(video2); 
<script> 

Answer 1

Twilio開發人員傳道這裏。

我最近創建了類似的東西。它沒有使用Bootstrap，但它確實包含了CSS來製作圖片風格的圖片。這是我創建Video chat web component的博客帖子的一部分。這裏是一個link to the CSS I used創建這個效果：

讓我知道這是否有助於在所有。