iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Software Development

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

Day 20 - 應用篇 - 音視訊啟用與關閉

視訊過程中,使用者可能會有關閉麥克風或攝影機的需求,而這樣的功能可藉由控制MediaStream中的MediaStreamTrack來完成。

取得音視訊軌道

從媒體流中取得音訊軌道與視訊軌道可分別使用getAudioTracksgetVideoTracks方法,該方法會回傳在媒體流中所有的音訊或視訊軌道,因此我們可使用forEach將其一一取出。

localStream.getAudioTracks().forEach(track => {
    track; //音訊軌
});
localStream.getVideoTracks().forEach(track => {
    track; //視訊軌
});

啟用與關閉音視訊軌道

MediaStreamTrack中有enabled屬性,它是一個Boolean值,其值為true則啟動軌道,其值為false則關閉軌道。

localStream.getAudioTracks().forEach(track => {
    track.enabled = false; //關閉音訊軌
});

專案修改

將音視訊啟用與關閉的功能加入專案中。

Step1 匯入MDC套件與素材

開啟creator.htmljoiner.html檔案,並撰寫以下程式碼,以匯入Material Design的相關套件及素材,這可以幫助我們建立具原生造型的元件及圖片。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

Step2 建立按鈕元件

開啟creator.htmljoiner.html檔案,並撰寫以下程式碼,以建立按鈕元件。

<div id="btns" hidden>
    <button id="audioBtn" class="mdc-fab active">
        <div class="mdc-fab__ripple"></div>
        <span id="audioBtnImg" class="mdc-fab__icon material-icons">mic</span>
    </button>

    <button id="videoBtn" class="mdc-fab active">
        <div class="mdc-fab__ripple"></div>
        <span id="videoBtnImg" class="mdc-fab__icon material-icons">videocam</span>
    </button>
</div>

Step3 調整元件的擺放位置

開啟main.css檔案,並撰寫以下程式碼。

#btns {
    z-index: 3;
    transform: translateZ(120px);
    -webkit-transform: translateZ(120px);
    -moz-transform: translateZ(120px);
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

#btns>button {
    margin: 1em;
}

#videoBtn,
#audioBtn {
    background-color: #9D9D9D;
}

#videoBtn.active,
#audioBtn.active {
    background-color: #009393;
}

Step4 建立按鈕監聽事件

開啟creator.jsjoiner.js檔案,並撰寫以下程式碼,以建立按鈕的監聽事件,setButtonListener方法可在網頁載入時一併執行。

function setButtonListener() {
    const btn_audio = document.getElementById('audioBtn');
    const img_audio = document.getElementById('audioBtnImg');
    btn_audio.addEventListener('click', () => {
        const enable = btn_audio.classList.contains('active');

        localStream.getAudioTracks().forEach(track => {
            track.enabled = !enable;
        });

        btn_audio.classList.toggle('active', !enable);
        img_audio.innerHTML = (!enable) ? "mic" : "mic_off";
    });

    const btn_video = document.getElementById('videoBtn');
    const img_video = document.getElementById('videoBtnImg');
    btn_video.addEventListener('click', () => {
        const enable = btn_video.classList.contains('active');

        localStream.getVideoTracks().forEach(track => {
            track.enabled = !enable;
        });

        btn_video.classList.toggle('active', !enable);
        img_video.innerHTML = (!enable) ? "videocam" : "videocam_off";
    });
}

Step5 顯示按鈕

開啟creator.jsjoiner.js檔案,並將程式碼撰寫於媒體流監聽事件中,將按鈕顯示於畫面。

peerConnection.addEventListener('track', event => {
    ... //Others

    const btns = document.getElementById('btns');
    btns.hidden = false;
});

Step6 查看成果

執行專案後,讓兩個裝置進行視訊通話即可看到兩個按鈕,點擊麥克風按鈕後會關閉自己的麥克風。

關閉攝影機的話,就會看不見自己的影像,而對方也會無法看見你的視訊畫面。


上一篇
Day 19 - 應用篇 - 雙方影像顯現與鏡像
下一篇
Day 21 - 應用篇 - 媒體裝置選擇
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言