How can I reset the video object in firefox?
Here is my code:
<script>
async function updateSrc(){
var media=document.getElementById("media");
var shareAudio=document.getElementById("audioSrc");
var shareVideo=document.getElementById("videoSrc");
shareAudio=shareAudio.options[shareAudio.selectedIndex].value;
shareVideo=shareVideo.options[shareVideo.selectedIndex].value;
await getStream(shareVideo,shareAudio)
.then(stream=>{
if (media.srcObject!=null){
var trackList=media.srcObject.getTracks();
for (var i=0;i<trackList.length;i++){
trackList[i].stop();
media.srcObject.removeTrack(trackList[i]);
}
media.srcObject=null;
}
media.srcObject=new MediaStream();
stream.getTracks().forEach(track=>{
media.srcObject.addTrack(track);
});
})
.catch(err=>{
if (media.srcObject){
var trackList=media.srcObject.getTracks();
for (var i=0;i<trackList.length;i++){
trackList[i].stop();
media.srcObject.removeTrack(trackList[i]);
}
}
media.srcObject=null;
console.log(err);
});
}
function getStream(shareVideo,shareAudio) {
templateConstraint = {
"video": {
"width": {
"min": "640",
"ideal": "1280",
"max": "1920"
},
"height": {
"min": "480",
"ideal": "720",
"max": "1080"
}
},
"audio":true
}
var constraints={};
if (shareVideo=="yes"){
constraints.video=templateConstraint.video;
}
if (shareAudio=="yes"){
constraints.audio=templateConstraint.audio;
}
return navigator.mediaDevices.getUserMedia(constraints);
}
</script>
Share Video
<select id="videoSrc" onchange="updateSrc()">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
Share Audio
<select id="audioSrc" onchange="updateSrc()" autocomplete="off">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
At first, when I change the "share audio" value to yes, both Chrome and Firefox can play the sound.
After that, I close the browser. And then open a new browser, load the page.
if I change the "share video" value to yes, and then change the "share audio" value to yes, the Firefox browser cannot play the sound, even I rebuild the video tag media stream.
So how can I fix the problem?
Here is my code:
<pre>
<html>
<head>
<script>
async function updateSrc(){
var media=document.getElementById("media");
var shareAudio=document.getElementById("audioSrc");
var shareVideo=document.getElementById("videoSrc");
shareAudio=shareAudio.options[shareAudio.selectedIndex].value;
shareVideo=shareVideo.options[shareVideo.selectedIndex].value;
await getStream(shareVideo,shareAudio)
.then(stream=>{
if (media.srcObject!=null){
var trackList=media.srcObject.getTracks();
for (var i=0;i<trackList.length;i++){
trackList[i].stop();
media.srcObject.removeTrack(trackList[i]);
}
media.srcObject=null;
}
media.srcObject=new MediaStream();
stream.getTracks().forEach(track=>{
media.srcObject.addTrack(track);
});
})
.catch(err=>{
if (media.srcObject){
var trackList=media.srcObject.getTracks();
for (var i=0;i<trackList.length;i++){
trackList[i].stop();
media.srcObject.removeTrack(trackList[i]);
}
}
media.srcObject=null;
console.log(err);
});
}
function getStream(shareVideo,shareAudio) {
templateConstraint = {
"video": {
"width": {
"min": "640",
"ideal": "1280",
"max": "1920"
},
"height": {
"min": "480",
"ideal": "720",
"max": "1080"
}
},
"audio":true
}
var constraints={};
if (shareVideo=="yes"){
constraints.video=templateConstraint.video;
}
if (shareAudio=="yes"){
constraints.audio=templateConstraint.audio;
}
return navigator.mediaDevices.getUserMedia(constraints);
}
</script>
</head>
<body>
<div style="display:flex;
flex-direction:column;
justify-content:space-around">
<video autoPlay controls id="media" muted>
</video>
<div style="display:flex;
flex-direction:row;
justify-content:space-around">
<div>
Share Video
<select id="videoSrc" onchange="updateSrc()">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div>
Share Audio
<select id="audioSrc" onchange="updateSrc()" autocomplete="off">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
</div>
</div>
</body>
</html>
</pre>
At first, when I change the "share audio" value to yes, both Chrome and Firefox can play the sound.
After that, I close the browser. And then open a new browser, load the page.
if I change the "share video" value to yes, and then change the "share audio" value to yes, the Firefox browser cannot play the sound, even I rebuild the video tag media stream.
So how can I fix the problem?