I am trying to use WebRTC to build a web application that needs to pause/resume the video/audio stream when some events trigger. I have tried the getTracks()[0].stop()
but I am not sure how to resume the stream. Are there any advice on that? thanks
Asked
Active
Viewed 2.0k times
24

Ev3rlasting
- 2,145
- 4
- 18
- 31
2 Answers
40
getTracks()[0].stop()
is permanent.
Use getTracks()[0].enabled = false
instead. To unpause getTracks()[0].enabled = true
.
This will replace your video with black, and your audio with silence.
Try it (use https fiddle for Chrome):
var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => pc1.addStream(video1.srcObject = stream))
.catch(log);
var mute = () => video1.srcObject.getTracks().forEach(t => t.enabled = !t.enabled);
var add = (pc, can) => can && pc.addIceCandidate(can).catch(log);
pc1.onicecandidate = e => add(pc2, e.candidate);
pc2.onicecandidate = e => add(pc1, e.candidate);
pc2.onaddstream = e => video2.srcObject = e.stream;
pc1.onnegotiationneeded = e =>
pc1.createOffer().then(d => pc1.setLocalDescription(d))
.then(() => pc2.setRemoteDescription(pc1.localDescription))
.then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
.then(() => pc1.setRemoteDescription(pc2.localDescription))
.catch(log);
var log = msg => div.innerHTML += "<br>" + msg;
<video id="video1" height="120" width="160" autoplay muted></video>
<video id="video2" height="120" width="160" autoplay></video><br>
<input type="checkbox" onclick="mute()">mute</input><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
PeerConnections basically stop sending packets in this muted state, so it is highly efficient.

jib
- 40,579
- 17
- 100
- 158
-
The last sentence is unclear. Will "black video" and "silence" still use similar resources as before disabled (decoding/rendering, data transmission, etc)? – JSON Aug 13 '16 at 23:34
-
@JSON I've updated the answer to clarify that it hardly uses any resources. I confirmed it using stats in [this fiddle](https://jsfiddle.net/ec9ossmu/) (requires Firefox for spec-stats atm). Thanks for catching that it was unclear. – jib Aug 14 '16 at 03:18
-
Can you explain what happens to bandwidth? – Javad Asoodeh Sep 21 '20 at 08:37
-
I think i still receive track, but how can pause a particular transreceiver.sender(Audio/Video) from remote side with negotiation and without it ? – Javad Asoodeh Sep 21 '20 at 08:51
-
I changed direction attr from receiver side to 'inactive' and On the receiver side, the bandwidth decreased, do you think it's true way for pause audio/video ? – Javad Asoodeh Sep 21 '20 at 11:07
-
1@J4v4d Right, to pause from the remote end is a different question, and changing `direction` is one way to go there. See [my blog post](https://blog.mozilla.org/webrtc/rtcrtptransceiver-explored/) for the myriad ways to control a track remotely. – jib Sep 21 '20 at 16:54
-
is there any way out for just pausing the steaming simply instead of receiving blank frames , because I am sending those frames to the backend for processing – Atif Shafi Oct 22 '21 at 12:54
1
You should try using renegotiation, I believe the difference still exists how it is done in chrome and firefox:
In chrome, you just call
addStream
orremoveStream
on thePeerConnection
object to add/ remove the stream, then create and exchangesdp
.In firefox, there is no direct
removeStream
, you need to use RTCRtpSender andaddTrack
andremoveTrack
methods, you can take a look at this question