Avatar for Username

ابحث في الدعم

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

How can I reset the video object in firefox?

  • ما من ردود
  • 1 has this problem
  • 4 views
knvbhk
knvbhk
more options

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?