iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Software Development

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

Day 26 - 進階篇 - Codec設定

前一篇大致介紹了編解碼的用途以及常見的編解碼器,而本篇要介紹如何設定我們偏好的編解碼器。

取得支援的編解碼器

在設定之前,我們可使用以下程式碼,來得知設備支援的編解碼器有哪些。

const audioCodecList = RTCRtpSender.getCapabilities("audio").codecs; //audio的codec
const videoCodecList = RTCRtpSender.getCapabilities("video").codecs; //video的codec

設定編解碼器

SDP內部定義了該使用者的編解碼器資訊,因此可在此階段進行編解碼器設定,再將調整後的SDP資訊傳遞至遠端,使後續進行WebRTC通話時,可採用預期的編解碼器。

下圖是SDP的視訊媒體描述,每個編解碼器都有屬於自己的負載識別標籤(Payload Identifier)、相關描述及預設的採用順序,範例預設的編解碼器順序為VP8,其次為VP9,它們的負載識別標籤分別為96與98。若要優先採用VP9,需要將編解碼器的負載識別標籤與相關描述向前移動。

了解原理後,大家可以實際修改SDP資訊或者是使用以下程式碼來設定偏好的編解碼器,都能達到一樣的效果哦!

//Step1:建立調整編解碼格式順序的函式
function preferCodec(codecs, mimeType) {
  //Step2:建立兩個用於存放分類後編解碼格式的陣列
  const otherCodecs = [];
  const sortedCodecs = [];

  //Step3:進行編解碼格式分類
  codecs.forEach(codec => {
    if (codec.mimeType === mimeType) {
      sortedCodecs.push(codec);
    } else {
      otherCodecs.push(codec);
    }
  });

  //Step4:回傳新的編解碼格式順序
  return sortedCodecs.concat(otherCodecs);
}

//Step5:建立更改通話影像編解碼格式的函式
function changeVideoCodec(mimeType) {
  //Step6:取得發送端與接收端的所有傳遞資訊
  const transceivers = peerConnection.getTransceivers();

  transceivers.forEach(transceiver => {
    //Step7:取得媒體軌道的類型
    const kind = transceiver.sender.track.kind;
    
    if (kind === "video") {
      //Step8:將編解碼格式進行排序
      const sendCodecs = preferCodec(RTCRtpSender.getCapabilities(kind).codecs, mimeType);
      //Step9:設定編解碼格式的偏好
      transceiver.setCodecPreferences(sendCodecs);
    }
  });

  //Step10:進行WebRTC協商流程
  ...
}
  • Step1:建立調整編解碼格式順序的函式,該函式的第一個參數是存放編解碼格式的字串陣列,而我們取得使用者編解碼格式也是相同的類型,第二個參數是偏好的編解碼格式,其類型為字串,我們可以傳入希望優先採用的格式,例如"video/VP9"。
  • Step2:建立兩個用於存放分類後編解碼格式的陣列,sortedCodecs會放入偏好的格式,otherCodecs則放入其他支援的格式。
  • Step3:遍歷所有支援的編解碼格式並進行分類。
  • Step4:將偏好的格式與其他支援的格式重新組成一個陣列,並將其回傳。
  • Step5:建立更改通話影像編解碼格式的函式,該函式的參數為偏好的編解碼格式,其類型為字串。
  • Step6:使用RTCPeerConnection的getTransceivers方法取得發送端與接收端的所有傳遞資訊。
  • Step7:取得並判斷媒體軌道的類型是否為video類型。
  • Step8:取得支援的視訊編解碼格式,並使用preferCodec方法將格式進行偏好排序。
  • Step9:使用RTCRtpTransceiver的setCodecPreferences來設定排序完成的格式。
  • Step10:設定完成後要進行WebRTC協商流程,若已經在通話,則需要重新協商。

上一篇
Day 25 - 進階篇 - Codec
下一篇
Day 27 - 進階篇 - 統計數據與分析
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言