如何在WebRTC視頻聊天中添加音頻/視頻靜音/取消靜音按鈕

Question

我正在嘗試創建WebRTC視頻聊天。現在，我將創建媒體軌道按鈕（靜音視頻啓用或禁用視頻發送，以及將音頻靜音以使其與音頻相同）疊加在一起。這是我的代碼。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script> 
    <script> 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 

    var myStream; 
    var peer = new Peer({key: 'PeerJS key'}); 
    var setOthersStream = function(stream){ 
    $('#others-video').prop('src', URL.createObjectURL(stream)); 
    }; 

    var setMyStream = function(stream){ 
    myStream = stream; 
    $('#video').prop('src', URL.createObjectURL(stream)); 

    }; 

    peer.on('open', function(id){ 
    $('#peer-id').text(id); 
    }); 

    peer.on('call', function(call){ 
    call.answer(myStream); 
    call.on('stream', setOthersStream); 
    }); 

    $(function(){ 
    navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){}); 

    $('#call').on('click', function(){ 
     var call = peer.call($('#others-peer-id').val(), myStream); 
     call.on('stream', setOthersStream); 
    }); 
    }); 

    peer.on('error', function(e){ 
    console.log(e.message); 
    }); 

任何人都可以引導我嗎？

Answer 1

終於我得到它的工作！ 來自這個「webrtc video stream stop sharing」問題的第一個答案引導我走向正確的方向。 我創建了兩個新的函數來靜音視頻和音頻，並將它們綁定到html文件中的相應按鈕。 最後它成了這個樣子：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 

var myStream; 
var peer = new Peer({key: 'PeerJS key'}); 

var setOthersStream = function(stream){ 
    $('#others-video').prop('src', URL.createObjectURL(stream)); 
}; 

var setMyStream = function(stream){ 
    myStream = stream; 
    $('#video').prop('src', URL.createObjectURL(stream)); 
}; 

peer.on('open', function(id){ 
    $('#peer-id').text(id); 
}); 

peer.on('call', function(call){ 
    call.answer(myStream); 
    call.on('stream', setOthersStream); 
}); 

$(function(){ 
    navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){}); 
    $('#call').on('click', function(){ 
    var call = peer.call($('#others-peer-id').val(), myStream); 
    call.on('stream', setOthersStream); 
    }); 
}); 

peer.on('error', function(e){ 
    console.log(e.message); 
}); 

//create button to toggle video 
var video_button = document.createElement("video_button"); 
video_button.appendChild(document.createTextNode("Toggle hold")); 

video_button.video_onclick = function(){ 
    myStream.getVideoTracks()[0].enabled = !(myStream.getVideoTracks()[0].enabled); 
} 

var audio_button = document.createElement("audio_button"); 
video_button.appendChild(document.createTextNode("Toggle hold")); 

audio_button.audio_onclick = function(){ 
    myStream.getAudioTracks()[0].enabled = !(myStream.getAudioTracks()[0].enabled); 
} 

希望這將有助於給別人。

Answer 2

流中的視頻和音頻軌道具有您可以修改的enabled屬性。例如：

function mute() { 
    myStream.getTracks().forEach(track => track.enabled = !track.enabled); 
}