MediaStreamTrack:mute 事件
當 MediaStreamTrack 的源暫時無法提供媒體資料時,會向該 MediaStreamTrack 傳送 mute 事件。
當軌道再次能夠產生媒體輸出時,會發送一個 unmute 事件。
在 mute 事件和 unmute 事件之間的時間段內,軌道的 muted 屬性的值為 true。
注意:大多數人認為的“靜音”條件(即使用者切換的靜音軌道狀態)實際上是透過 MediaStreamTrack.enabled 屬性管理的,該屬性沒有事件。
此事件不可取消,也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。
js
addEventListener("mute", (event) => { })
onmute = (event) => { }
事件型別
一個通用的 Event。
示例
在此示例中,為 mute 和 unmute 事件建立了事件處理程式,以檢測 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。當軌道退出靜音狀態(透過 unmute 事件的到來檢測到)時,背景色將恢復為白色。
您還可以使用 onmute 事件處理程式屬性來設定此事件的處理程式;同樣,onunmute 事件處理程式也可用於設定 unmute 事件的處理程式。以下示例演示了這一點
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 = "recvonly";
const videoTrack = transceivers[1];
videoTrack.direction = "recvonly";
// Peer 2 (Receiver)
audioTrack.addEventListener("mute", (event) => {
// Do something in UI
});
videoTrack.addEventListener("mute", (event) => {
// Do something in UI
});
transceivers 是一個 RTCRtpTransceiver 陣列,您可以在其中找到傳送和接收的音訊或影片軌道。有關更多資訊,請參閱 direction 文章。
規範
| 規範 |
|---|
| 媒體捕獲和流 # dom-mediastreamtrack-onmute |
瀏覽器相容性
載入中…