Video streaming in browser not working

MIP
, , , ,
1

I downloaded mipsdkmobile-web and was able to view live video using the VideoStream sample.

So in preparation of incorporating a video viewer into the application, I examined the sample code to work out to what it and the associated libraries were actually doing. I wrote a small HTML document with hardcoded server and camera ID (same as used with the VideoStream sample) to make sure it would work. It does not, and I cannot figure out why.

When it runs, I see a frozen image from the camera briefly, then it disappears, then the frozen image reappears, then it takes the fallback clause. The fallback is called with the message, “Falling back because the video player has been restarted more than : 1 time(s) for a specific time.”

I am hoping someone can point out what I’m doing wrong. Here is my page:

<!doctype html>
<html>
<head>
<script src="milestone/mipsdkmobile-web/XPMobileSDK.js"></script>
<script src="milestone/mipsdkmobile-web/Lib/modules/VideoStream/main.js" type="module"></script>
<script src="milestone/mipsdkmobile-web/Lib/modules/VideoConnection/main.js" type="module"></script>
<script>
  const server = 'https://milestonedos.cdmx.hitech.com:8082';
  const user = 'safety';
  const password = '%EU3mAP!';
  const camera = '131ca53e-3791-4379-8b03-e78d4c2894fc';
 
  XPMobileSDK.onLoad = function() {
	  XPMobileSDKSettings.MobileServerURL = server;
	  XPMobileSDK.addObserver({
		  connectionDidConnect: () => {
			  console.log('Connected!', arguments);
			  request = XPMobileSDK.login(user, password, 'Basic', {});
			  console.log(request);
		  },
		  connectionDidLogIn: () => {
			  console.log('Logged in!', arguments);
 
			  let videoElement = document.createElement('videos-stream');
			  videoElement.cameraId = camera
			  videoElement.name = 'The camera'
			  document.body.appendChild(videoElement);
			  videoElement.dispatchEvent(new CustomEvent('start'));
			  videoElement.addEventListener('fallback', (event) => {
				  console.error('video failed', event);
			  })
		  }
	  })
	  let request = XPMobileSDK.connect(server);
	  console.log(request);
  }
</script>
<style>
  videos-stream::part(video-player) {
      max-width: 670px;
      max-height: 380px;
  }
</style>
</head>
<body>
 
</body>
</html>
2

Hi @Tony Abo​ ,

This issue is related to Chrome’s autoplay policies, which require media to be muted in order to autoplay without user interaction.

Problem

When your code runs, you see a frozen image from the camera briefly, which then disappears and reappears, eventually leading to the fallback clause with the message: “Falling back because the video player has been restarted more than : 1 time(s) for a specific time.” This behavior is specifically problematic in Chrome due to its autoplay restrictions.

Modified Code

let videoElement = document.createElement("videos-stream");
            videoElement.cameraId = camera;
            videoElement.name = "The camera";
            document.body.appendChild(videoElement);
            videoElement.dispatchEvent(new CustomEvent("start"));
            videoElement.shadowRoot.querySelector("video").muted = true;

Explanation

  • Muted Video: By muting the video (videoElement.shadowRoot.querySelector(“video”).muted = true;), you comply with Chrome’s autoplay policy, allowing the video to play automatically without user interaction.

For more detailed information, you can refer to Chrome’s autoplay policy documentation.

3

Well that worked!! Thank you so much.