iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Software Development

新手也能打造網路電話系統-WebRTC入門與活用系列 第 19

Day 19 - 應用篇 - 雙方影像顯現與鏡像

我們已經完成一個能進行視訊通話的專案,接下來後續幾篇文章會陸續為系統添加一些常見的功能。

雙方影像顯現

在視訊過程中,除了看到對方的影像之外,第二個重要的事情是自己能否看見自己的影像,以調整自己的狀態,呈現最美好的自己給對方看。 這個功能我們只需要再建立一個video元件,並加入自己的媒體流,就可以達成囉!

Step1 新增video元件

開啟creator.htmljoiner.html檔案,並在videos下新增一個smallVideo

<div id="videos">
    <video id="largeVideo" playsinline></video>
    <video id="smallVideo" playsinline hidden></video>
</div>

Step2 調整video元件的版面位置

開啟main.css檔案,並撰寫以下程式碼,讓自己的畫面擺放在右上角。

#smallVideo {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
    border: 1px solid gray;
    border-radius: 16px;
    top: 20px;
    right: 20px;
    max-height: 17%;
    max-width: 17%;
    object-fit: cover;
    position: absolute;
    transform: translateZ(100px)
}

Step3 加入本地端媒體流

開啟creator.jsjoiner.js檔案,並在媒體流監聽事件內新增以下程式碼。當WebRTC協商成功後,不僅呈現對方的影像,也顯示自己的影像,但自己的視訊是靜音的,不然就會有很酷的Echo。

peerConnection.addEventListener('track', event => {
    ... //Others
    
    const video_small = document.getElementById('smallVideo');
    video_small.hidden = false;
    video_small.autoplay = true;
    video_small.muted = true;
    video_small.srcObject = localStream;
});

Step4 查看成果

執行專案後,讓兩個裝置進行視訊通話即可看到成果。

本地端鏡像

通常我們在看鏡子中的自己,會發現方向是相反的,這就是所謂的鏡像,在視訊通話時,通常都會將自己的畫面作鏡像,以符合現實生活的情境。

Step1 建立鏡像的Class

開啟main.css檔案,並撰寫以下程式碼,建立一個名為mirror的Class,當我們為元件添加這個Class時就會產生鏡像效果。

.mirror {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

Step2 添加鏡像的Class

開啟creator.jsjoiner.js檔案,並在自己的video元件添加mirror的Class。

const video_small = document.getElementById('smallVideo');
video_small.classList.toggle('mirror', true); //添加Class

上一篇
Day 18 - 應用篇 - 搭建ICE Server
下一篇
Day 20 - 應用篇 - 音視訊啟用與關閉
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言