MediaStreamTrack:unmute 事件

Baseline 已廣泛支援

此功能非常成熟,並且在許多裝置和瀏覽器版本中都能正常工作。它自 ⁨2018 年 3 月⁩ 起就已在瀏覽器中可用。

unmute 事件的 MediaStreamTrack 源在一段時間內無法提供媒體資料後,又能重新提供媒體資料時,會向該 MediaStreamTrack 傳送此事件。

這標誌著由 mute 事件開始的 muted 狀態的結束。

注意:大多數人認為的“靜音”狀態(即使用者可控的靜音軌道方式)實際上是透過 MediaStreamTrack.enabled 屬性來管理的,該屬性沒有相關的事件。

此事件不可取消,也不會冒泡。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

js
addEventListener("unmute", (event) => { })

onunmute = (event) => { }

事件型別

一個通用的 Event

示例

在此示例中,為 muteunmute 事件設定了事件處理程式,以便檢測儲存在變數 musicTrack 中的 MediaStreamTrack 的媒體是否停止從源流出。

js
musicTrack.addEventListener("mute", (event) => {
  const widget = document.getElementById("timeline-widget");
  widget.style.backgroundColor = "#aaaaaa";
});

musicTrack.addEventListener("unmute", (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "white";
});

在設定了這些事件處理程式後,當 musicTrack 進入其 muted 狀態時,ID 為 timeline-widget 的元素的背景顏色會被更改為 #aaaaaa。當軌道退出靜音狀態時(透過接收到 unmuted 事件檢測到),背景顏色將恢復為白色。

您也可以使用 onunmute 事件處理程式屬性來設定此事件的處理程式;同樣,對於 mute 事件,可以使用 onmute 事件處理程式來設定處理程式。以下示例展示了這一點。

js
musicTrack.onmute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "#aaaaaa";
};

musicTrack.onunmute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "white";
};

透過接收器取消靜音軌道

以下示例顯示瞭如何使用接收器來取消靜音軌道。

js
// Peer 1 (Sender)
const transceivers = peer.getTransceivers();

const audioTrack = transceivers[0];
audioTrack.direction = "sendrecv";

const videoTrack = transceivers[1];
videoTrack.direction = "sendrecv";

// Peer 2 (Receiver)
audioTrack.addEventListener("unmute", (event) => {
  // Do something in UI
});

videoTrack.addEventListener("unmute", (event) => {
  // Do something in UI
});

transceivers 是一個 RTCRtpTransceiver 陣列,您可以在其中找到傳送和接收的音訊或影片軌道。有關更多資訊,請參閱 direction 文章。

規範

規範
媒體捕獲和流
# event-mediastreamtrack-unmute

瀏覽器相容性

另見