Difference between revisions of "Live Demo Test"

(Testbed)
(Testbed)
Line 7: Line 7:
  
 
<html>
 
<html>
<!DOCTYPE html>
+
 
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head><title>
 
<head><title>
HTML5 WebRTC Player
+
HTML5 MSE Player
</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+
</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link rel="stylesheet" href="HTML5Player/unreal_html5_player_styles_v1.css" />
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+
     <script type="text/javascript" src="HTML5Player/unreal_html5_player_script_v2.js"></script>  
     <script type="text/javascript" src="HTML5Player/unrealwebrtcplayer.js"></script>
 
  
 
     <script type="text/javascript">
 
     <script type="text/javascript">
         var webrtcPlayer = null;
+
 
 +
         var bigbuttons = false;
  
 
         function OnMetadata()  
 
         function OnMetadata()  
 
         {
 
         {
             var remoteVideo = document.getElementById("remoteVideo");
+
             var remoteVideo = document.getElementById("UnrealPlayer1_Video");
             remoteVideo.width = Math.max(remoteVideo.videoWidth, 500);
+
             var newWidth = Math.max(remoteVideo.videoWidth, 500);
             remoteVideo.height = Math.max(remoteVideo.videoHeight, 300);
+
             var newHeight = Math.max(remoteVideo.videoHeight, 300);
 +
 
 +
            changePlayerSize(newWidth, newHeight);
 +
 
 +
            window.resizeTo(newWidth + 50, newHeight + 200);
 +
        }
 +
 
 +
        function changePlayerSize(newWidth, newHeight)
 +
        {
 +
            var videoelement = document.getElementById("UnrealPlayer1_Video");
 +
            videoelement.width = newWidth;
 +
            videoelement.height = newHeight;
 +
 
 +
            var videoControls = document.getElementById("UnrealPlayer1_videoControls");
 +
            var progress = document.getElementById("UnrealPlayer1_progress");
 +
 
 +
            videoControls.style.width = videoelement.width + "px";
  
             window.resizeTo(remoteVideo.width + 50, remoteVideo.height + 200);
+
             if (!bigbuttons)
 +
                progress.style.width = videoelement.width - 280 + "px";
 +
            else
 +
                progress.style.width = videoelement.width - 410 + "px";
 
         }
 
         }
 +
 
     </script>
 
     </script>
 
</head>
 
</head>
  
 
<body>
 
<body>
 
+
   
 
   <div align="center"><span id="LabelCam">Dahua-HDBW4231F-E2-M</span></div><br>
 
   <div align="center"><span id="LabelCam">Dahua-HDBW4231F-E2-M</span></div><br>
 +
 
 +
  <div>
  
   <div id="container">
+
   <UnrealHTML5VideoPlayer id="UnrealPlayer1"></UnrealHTML5VideoPlayer>
 
 
    <video style="background-color:black" id="remoteVideo" width="800" height="600" autoplay playsinline controls onloadedmetadata="OnMetadata()"></video>
 
 
 
    <script type="text/javascript">
 
 
 
        webrtcPlayer = new UnrealWebRTCPlayer("remoteVideo", "uVMS_79ae8666665aa4c3af58", "", "65.23.154.147", "80", 0, true, "tcp");
 
        webrtcPlayer.Play();
 
  
    </script>
+
  <script type="text/javascript">
 +
      if ("MediaSource" in window && "WebSocket" in window)
 +
      {
 +
          RunPlayer("UnrealPlayer1", 800, 600, "65.23.154.147", 80, 0, "uVMS_79ae8666665aa4c3af58", "", true, true, 1, "", false);
 +
          document.getElementById("UnrealPlayer1_Video").addEventListener("loadedmetadata", OnMetadata);
 +
      }
 +
      else
 +
      {
 +
          document.getElementById("UnrealPlayer1").innerHTML = "Media Source Extensions or Websockets are not supported in your browser.";
 +
      }
 +
  </script>
  
 
   </div>
 
   </div>
 
+
   
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 17:05, 27 September 2018

Live Demo Test

URL

http://70.168.153.130/cgi-bin/mjpg/video.cgi?[channel=1]&subtype=1

Testbed

http://65.23.154.147:8080/uVMS/ViewHTML5WebRTC.aspx?IP=65.23.154.147&Alias=uVMS_79ae8666665aa4c3af58&Name=Dahua-HDBW4231F-E2-M

HTML5 MSE Player

Dahua-HDBW4231F-E2-M