iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Software Development

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

Day 22 - 應用篇 - 螢幕分享

視訊過程中,有時我們會藉由分享螢幕畫面,來表達我們想描述的事情,而這樣的功能可藉由MediaDevicesgetDisplayMedia方法來完成。

分享螢幕畫面

透過MediaDevices的getDisplayMedia方法可取得顯示於螢幕的顯示器媒體流。由於該媒體流必定有畫面,所以它的約束條件至少會有video屬性。

const constraints = {};
constraints.video = true;
        
navigator.mediaDevices
    .getDisplayMedia(constraints)
    .then(stream => {
        stream; //顯示器媒體流
    })
    .catch(msg => console.log(msg));

停止分享螢幕畫面

在分享螢幕時,瀏覽器會在下方顯示一個正在共用的小視窗,該視窗內會有一個停止共用的按鈕,而此按鈕沒有辦法設定監聽事件,但按鈕按下後,顯示器媒體流的視訊軌道就會進入ended的狀態,因此我們可對該軌道設定ended的監聽事件,當進入此事件後,我們可將顯示器的媒體流替換成原本的視訊流,以停止分享螢幕畫面。

const track = stream.getVideoTracks()[0];
track.addEventListener('ended', () => {
    console.log('Stop sharing');
    ... //To get local media
});

專案修改

將螢幕分享的功能加入專案中。

Step1 建立分享按鈕元件

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

<div id="btns" hidden>
    ...

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

Step2 分享螢幕畫面

開啟creator.jsjoiner.js檔案,並將程式碼撰寫於setButtonListener方法中,當分享按鈕被點擊時分享螢幕畫面。

function setButtonListener() {
    ...

    const btn_screen = document.getElementById('screenBtn');
    btn_screen.addEventListener('click', () => {
        const constraints = {};
        constraints.video = true;

        navigator.mediaDevices
            .getDisplayMedia(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;

                track.addEventListener('ended', async() => {
                    console.log('Stop sharing');
                    //To get local media
                });
            })
            .catch(msg => console.log(msg));
    });
}

Step3 查看成果

執行專案後,讓兩個裝置進行視訊通話即可看到四個按鈕,點擊分享按鈕就會出現視窗,我們可以選擇分享整個螢幕畫面、視窗或是Chrome的分頁。

分享螢幕後,下方會顯示正在共用視窗,我們可以點選停止共用以結束畫面分享。


上一篇
Day 21 - 應用篇 - 媒體裝置選擇
下一篇
Day 23 - 應用篇 - 錄音錄影
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言