{% extends 'student_dashboard.html' %}
{% block body %}
{% from "includes/_formhelpers.html" import render_field %}
<div class="row align-items-center d-flex  justify-content-center">
  <div class="col-12 mb-4">
      <div class="card border-light shadow-sm components-section align-items-center d-flex  justify-content-center">
          <div class="card-body align-items-center d-flex justify-content-center">     
              <div class="row mb-4">
                    <div class="col-lg-12 col-sm-16">
                      <h3 class="h3 text-center">EXAM LOGIN</h3>  
                    </div>
                    <div class="card-body">
							        <form action="" method="POST" class="mt-4">
                                    <div class="form-group">
                                      {{render_field(form.test_id, class="form-control")}}
                                    </div>
                                    <div class="form-group">
                                      {{render_field(form.password, class="form-control")}}
                                    </div>

                                    <div class="form-group">
                                      <video id="stream" width="370" height="320">
                                          <canvas id="capture" width="370" height="320">
                                          </canvas>
                                        </video>
                                        <br>
                                        <button id="btn-capture" type="button" class="btn btn-primary justify-content-center">Capture Image</button>
                                        <br><br>
                                          <div id="snapshot"></div>
                                          {{render_field(form.img_hidden_form, id="img_hidden")}}
                                      </div>

                                    <input type="submit" class="btn btn-block btn-primary" value="Login For Exam"/>
                                  </div>
                                  </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
<script>
var btnCapture = document.getElementById( "btn-capture" );

var stream = document.getElementById( "stream" );
var capture = document.getElementById( "capture" );
var snapshot = document.getElementById( "snapshot" );

var cameraStream = null;

btnCapture.addEventListener( "click", captureSnapshot );

function startStreaming() {

  var mediaSupport = 'mediaDevices' in navigator;

  if( mediaSupport && null == cameraStream ) {

    navigator.mediaDevices.getUserMedia( { video: true } )
    .then( function( mediaStream ) {

      cameraStream = mediaStream;

      stream.srcObject = mediaStream;

      stream.play();
    })
    .catch( function( err ) {

      console.log( "Unable to access camera: " + err );
    });
  }
  else {

    alert( 'Your browser does not support media devices.' );

    return;
  }
}

function captureSnapshot() {

  if( null != cameraStream ) {

    var ctx = capture.getContext( '2d' );
    var img = new Image();

    ctx.drawImage( stream, 0, 0, capture.width, capture.height );
  
    img.src		= capture.toDataURL( "image/png" );
    img.width	= 370;
    img.height	= 320;
    //console.log(capture.toDataURL( "image/png" ));
    snapshot.innerHTML = '';

    snapshot.appendChild( img );
    var d1 = capture.toDataURL("image/png");
    var res = d1.replace("data:image/png;base64,", "");
    // console.log(res);
    snapshot.innerHTML = '';
    snapshot.appendChild( img );
    $("#img_hidden").val(res)    

  }
}
window.onload = function() {
   startStreaming();
   captureSnapshot();
}

        </script>
{% endblock %}