Как добавить аудио/видео кнопки отключения/включения звука в видеочате 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); 
}