I want to make a video call with webrtc. I have two streams, one is local and the second one is remote stream.

In Chrome, I mute my video tag in order not to hear my voice which leads to echo. My HTML tag is like;

<video style="position:absolute;right:5px;bottom:5px;display: inline;" class="localVideo" autoplay="autoplay" 
muted="true" 
src="mediastream:3ffffe01-da89-44d9-b9cf-454b11ec6a6a" height="25%" width="25%"></video>

In Firefox muted="true" property not working, so that I hear my own voice. I tried to set muted propery with many ways in other topics like;

var video = document.querySelector("#movie");     
video.muted = true;

different variations of this code snippet with jquery didn't worked.

Then I've decided to add controls property to the video tag, in order to watch how Firefox control buttons works. I've seen that mute button on Firefox controller doesn't works either.

This issue occurs in both Firefox 35 and Firefox ESR 31.5 with windows 7 - 8.1, macOS with Yosemite. I get media stream via webrtc libraries localStream.

Is this a known issue, if so is there any workaround to overcome this issue?

Thanks.

I want to make a video call with webrtc. I have two streams, one is local and the second one is remote stream.

In Chrome, I mute my video tag in order not to hear my voice which leads to echo. My HTML tag is like;

<video style="position:absolute;right:5px;bottom:5px;display: inline;" class="localVideo" autoplay="autoplay" 
muted="true" 
src="mediastream:3ffffe01-da89-44d9-b9cf-454b11ec6a6a" height="25%" width="25%"></video>

In Firefox muted="true" property not working, so that I hear my own voice. I tried to set muted propery with many ways in other topics like;

var video = document.querySelector("#movie");     
video.muted = true;

different variations of this code snippet with jquery didn't worked.

Then I've decided to add controls property to the video tag, in order to watch how Firefox control buttons works. I've seen that mute button on Firefox controller doesn't works either.

This issue occurs in both Firefox 35 and Firefox ESR 31.5 with windows 7 - 8.1, macOS with Yosemite. I get media stream via webrtc libraries localStream.

Is this a known issue, if so is there any workaround to overcome this issue?

Thanks.

• javascript
• html
• firefox
• html5-video
• webrtc

• Which library do you use? Or in case you write the code on your own, please share some useful pieces of your code. It is hard to say why it fails as this property works for me in both Chrome and FF. Also please share the OS and FF version. – igorpavlov Commented Feb 27, 2015 at 10:46
• I've added some information. Thanks! – Uğurcan Şengit Commented Feb 27, 2015 at 12:29
• You video doesn't have the id="movie". Give it an ID first. Also try to execute in console the following code: document.getElementById("movie").muted = true – igorpavlov Commented Feb 27, 2015 at 12:53
• That code snippet added to illustrate the way I've tried. I haven't used the movie id. Thanks for response. – Uğurcan Şengit Commented Feb 27, 2015 at 12:54
• So please try to temporary add an id and execute a code I provided in console. Maybe your library un-mutes a video tag in FF. – igorpavlov Commented Feb 27, 2015 at 12:56

3 Answers 3

I also came across this issue with Firefox, the simplest solution I've found is using the onloadedmetadata event as below:

video {
  width: 200px;
  height: 200px;
}

<video
  src="https://scontent-lhr3-1.cdninstagram.com/t50.2886-16/12930587_1020784647992081_252978711_n.mp4"
  muted
  onloadedmetadata="this.muted = true"
  onmouseenter="play()"
  onmouseleave="pause()"
  playsinline>

Note: There's a better answer in this question

I also had this problem in FF45. The solution was to set muted in code vs. the DOM.

$("#browserCheck").get(0)
<video id="browserCheck" class="img-responsive" autoplay="" muted="true">
$("#browserCheck").get(0).muted
false
$("#browserCheck").get(0).muted = true
true
$("#browserCheck").get(0).muted
true

I've had trouble muting video with Firefox, too. No problem in Chrome. I worked around the Firefox issue by setting the volume to zero. Same net effect?

var video = document.querySelector("#movie");     
video.volume = 0;