iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Software Development

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

Day 21 - 應用篇 - 媒體裝置選擇

視訊過程中,使用者可能會有切換鏡頭或其他硬體設備的需求,而這樣的功能需要先取得所有的裝置設備,並取代媒體軌道來完成。

取得裝置設備資訊

透過MediaDevices的enumerateDevices方法可取得所有裝置的資訊,其中包含裝置的ID、類型與名稱。

navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        console.log(devices);
    })
    .catch(msg => console.log(msg));

取得特定硬體裝置

在約束條件中指定裝置的ID並請求權限後,即可取得特定裝置的媒體流。

const constraints = { 
    audio: true, 
    video: { deviceId: preferredCameraDeviceId } 
}

navigator.mediaDevices
    .getUserMedia(constraints)
    .then(stream => {
        stream; //特定裝置的媒體流
    })
    .catch(msg => console.log(msg));

通話時替換媒體軌道

在通話前只要使用特定硬體裝置的媒體流進行WebRTC協商,就能使用特定裝置進行通話,但在協商成功之後,就必須替換原先已協商的媒體軌道,才能切換成指定的裝置。

const track = stream.getVideoTracks()[0]; //新裝置的視訊軌道
const sender = peerConnection.getSenders().find((s) => s.track.kind === track.kind); //取得視訊軌道的發送來源
sender.replaceTrack(track); //替換軌道

專案修改

將媒體裝置選擇的功能加入專案中。

Step1 建立設定按鈕、設定視窗及選單元件

開啟creator.htmljoiner.html檔案,並撰寫以下程式碼。

<div id="btns" hidden>
    ...
    
    <button id="settingBtn" class="mdc-fab active">
        <div class="mdc-fab__ripple"></div>
        <span id="videoBtnImg" class="mdc-fab__icon material-icons">settings</span>
    </button>
</div>

<div id="popup" hidden>
    <label for="select">選擇攝影機:</label>
    <select id="select"></select>
</div>

Step2 調整元件的擺放位置

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

#popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: #f2f2f2;
    text-align: center;
    align-items: center;
    padding: 20px;
    border: 1px solid #b3b3b3;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
    z-index: 9999;
}

Step3 建立選單監聽事件

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

function setSelectListener() {
    const select = document.getElementById('select');
    select.addEventListener('change', (event) => { //當選單被更改時,進入此監聽事件
        //取得指定的媒體設備裝置
        const constraints = {
            audio: true,
            video: { deviceId: event.target.value }
        }

        navigator.mediaDevices
            .getUserMedia(constraints)
            .then(stream => {
                //替換傳遞給對方的視訊媒體軌道
                const track = stream.getVideoTracks()[0];
                const sender = peerConnection.getSenders().find((s) => s.track.kind === track.kind);
                sender.replaceTrack(track);

                //將本地端媒體流替換成新的媒體流
                localStream = stream;
                const video_small = document.getElementById('smallVideo');
                video_small.srcObject = localStream;

                //隱藏設定的畫面
                const popup = document.getElementById('popup');
                popup.hidden = true;
            })
            .catch(msg => console.log(msg));
    });
}

Step4 顯示設定視窗

開啟creator.jsjoiner.js檔案,並將程式碼撰寫於setButtonListener方法中,當設定按鈕被點擊時顯示視窗。

function setButtonListener() {
    ...

    const btn_setting = document.getElementById('settingBtn');
    btn_setting.addEventListener('click', () => {
        //顯示設定的畫面
        const popup = document.getElementById('popup');
        popup.hidden = false;
    });
}

上一篇
Day 20 - 應用篇 - 音視訊啟用與關閉
下一篇
Day 22 - 應用篇 - 螢幕分享
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言