Difference between revisions of "Test LiveFeed"

 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
=LiveFeed Test=
 
=LiveFeed Test=
 +
<html>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
<html>
+
<html lang="en">
 
<head>
 
<head>
<meta charset="utf-8">
+
    <meta charset="UTF-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="What this page is about." name="description">
+
    <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
<meta content="Display Webcam Stream" name="title">
+
    <link rel="stylesheet" href="../../dependencies/bootstrap/font-awesome/css/font-awesome.min.css">
<title>Display Webcam Stream</title>
+
    <link rel="stylesheet" href="jquery-ui.css">
 
+
    <link rel="stylesheet" href="player.css">
<style>
+
 
#container {
+
    <title>Player</title>
     margin: 0px auto;
+
    <script type="text/javascript" src="../../../../flashphoner.js"></script>
     width: 500px;
+
     <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
     height: 375px;
+
     <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>
    border: 10px #333 solid;
+
     <script type="text/javascript" src="../../dependencies/js/utils.js"></script>
}
+
 
#videoElement {
+
     <script type="text/javascript" src="player.js"></script>
     width: 500px;
+
     <!-- Bootstrap JS -->
     height: 375px;
+
     <script src="../../dependencies/bootstrap/js/bootstrap.js"></script>
     background-color: #666;
 
}
 
</style>
 
 
</head>
 
</head>
 
+
<body onload="init_page()">
<body>
+
<div class="container">
<div id="container">
+
     <div class="row">
     <video autoplay="true" id="videoElement">
+
 
   
+
        <h2 class="text-center col-sm-10">Player</h2>
     </video>
+
 
 +
        <h2 id="notifyFlash" class="text-danger"></h2>
 +
 
 +
        <div class="col-sm-10 text-center">
 +
            <div class="fp-remoteVideo">
 +
                <div class="display" id="remoteVideo">
 +
                    <i id="preloader" class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true" style="position: absolute; top: 43%; left: 47.5%;"></i>
 +
                </div>
 +
            </div>
 +
 
 +
        </div>
 +
        <div class="col-sm-8 text-center col-sm-offset-2" style="margin-top: 20px">
 +
            <form id="form" class="form-horizontal" role="form" style="margin-top: 10px">
 +
                <div id="connForm" class="form-group">
 +
                    <label class="col-sm-2 control-label">WCS URL</label>
 +
                    <div class="col-sm-4">
 +
                        <input type="text" class="form-control" id="url">
 +
                    </div>
 +
                </div>
 +
                <div id="playForm" class="form-group">
 +
                    <label class="col-sm-2 control-label">Stream</label>
 +
                    <div class="col-sm-4">
 +
                        <input type="text" class="form-control" id="streamName">
 +
                    </div>
 +
                </div>
 +
                <div id="volume" class="form-group">
 +
                    <label class="col-sm-2 control-label">Volume</label>
 +
                    <div class="col-sm-4" style="height: 34px !important;">
 +
                        <div id="volumeControl" style="margin-top: 12px"></div>
 +
                    </div>
 +
                </div>
 +
                <div id="fullScreen" class="form-group">
 +
                    <label class="col-sm-2 control-label">Full Screen</label>
 +
                    <div class="col-sm-1" >
 +
                        <button type="button" class="btn btn-default btn-sm" id="fullScreenBtn">
 +
                            <span class="glyphicon glyphicon-fullscreen"></span>
 +
                        </button>
 +
                    </div>
 +
                </div>
 +
                <div class="form-group">
 +
                    <div class="col-sm-4 control-label">
 +
                        <div id="status"></div>
 +
                        <div id="info"></div>
 +
                    </div>
 +
                    <div class="col-sm-2 text-right">
 +
                        <button id="playBtn" type="button" class="btn btn-default">Start</button>
 +
                    </div>
 +
                </div>
 +
            </form>
 +
        </div>
 +
     </div>
 +
    <div class="row" style="margin-top: 70px;">
 +
        <div class="col-sm-4">
 +
            <a href="https://play.google.com/store/apps/details?id=com.flashphoner.wcsexample.player"><img src="../../dependencies/img/google_play.jpg" title="Google Play" alt="Google Play"></a>
 +
        </div>
 +
    </div>
 
</div>
 
</div>
<script>
 
var video = document.querySelector("#videoElement");
 
 
if (navigator.mediaDevices.getUserMedia) {     
 
    navigator.mediaDevices.getUserMedia({video: true})
 
  .then(function(stream) {
 
    video.srcObject = stream;
 
  })
 
  .catch(function(err0r) {
 
    console.log("Something went wrong!");
 
  });
 
}
 
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 18:41, 4 September 2018

LiveFeed Test

Player

Player

Google Play