Sample NET Code

session.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="session.aspx.cs" Inherits="VedioCalling._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <%--<p>
  <a href="javascript:void(0)" id="call-btn">Call</a>
  <a href="javascript:void(0)" id="end-btn">End</a>
</p>--%>
    <style>
        li {
    font-size: 14px;
    margin-left: 25px;
    list-style-type: disc;
    margin-top:10px
 }
        .guidlines p {color:#000000; margin-bottom:5px;}
.guidlines {font-family:'Josefin Sans light';}
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager> 
    <div style="float:left;">
       
        <% if(!linkactive){ %>
<div style="background-color: #808080;color: #ffffff;float: left;font-size: 20px;font-weight: bold;height: 465px;padding-top: 200px;text-align: center;width: 680px;">Your session is complete. The therapy room is no longer available.</div>
        <%} else {%>
         <div id="myembed"></div>
        <%} %>
        </div>
<div class="guidlines"style="float:left;background-color:#ffffff;width:630px;margin-left:30px;font-size:14px;color:#000000;">
    
       <p style="font-size:18px;width:100%;text-align:center"><b>Guidelines for using the therapy room</b><br/></p> 
        <p>Thank you for booking your therapy session with InnerHour. You have the option of video as well as audio calling.</p>
    <p>Please note the following features regarding your online therapy session with InnerHour</p>
        <ul>
            <li>Click on' Video Call' to start the video session. If your therapist isn't already on the other side of the therapy room, please wait for him/ her to connect. It is normal to not hear any dialing tone at this stage. Your session will start once both you and your therapist connect to the therapy room and start the call.
            </li>
            <li>Only two participants can be live on the session at any instance and only you and your therapist have the passkey for the particular session.</li>
            <li>In case of trouble with the bandwidth or if you face difficulties with video calling, you can switch to the voice only mode in the therapy room.</li>
            <li>The chats  in the therapy room instant messenger are not saved. These chats will be automatically deleted at the end of a session (or if the call drops) to ensure confidentiality and privacy.</li>
            <li>Your therapy room will be active only for this particular session. In case you take subsequent therapy sessions, a new link with the passkey will be sent to you via another fresh email.
            </li>
            
        </ul>
    
    </div>
    
     <% if(linkactive){ %>
<script>
    var startTime;
    var endTime;
  var tag = document.createElement("script");
  tag.src = "https://www.gruveo.com/embed-api/";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var embed;
  function onGruveoEmbedAPIReady() {
   
    embed = new Gruveo.Embed("myembed", {
      width: 680,
      height: 465,
      embedParams: {
        generated: <%= generated%>,
        signature: "<%= signature%>",
          color: "63b2de",
          code : "<%= whometocall%>"
      }
    });

    embed
      .on("ready", onEmbedReady)
      .on("stateChange", onEmbedStateChange);
  }

  function onEmbedReady(e) {
   <%-- document.getElementById("call-btn").addEventListener("click", function() {
      // Generate a random code and start a video call on that code.
        var code = "<%= whometocall%>";//Math.random().toString(36).substr(2, 5);
      embed.call(code, true);
    });
    document.getElementById("end-btn").addEventListener("click", function() {
      embed.end();
    });--%>
  }

  var endTimeout;
  function onEmbedStateChange(e) {     
    if (e.state == "call") {
      // Set the call to end after 10 seconds.
        // endTimeout = setTimeout(function() { embed.end(); }, 10000);
        startTime = new Date();
    }
    else if (e.state == "ready") {
        clearTimeout(endTimeout);
        endTime = new Date();
        var duration = e.callDuration;
        //alert("Call duration: " + duration + " ,StartTime: "+startTime+" ,EndTime:"+ endTime+" ,Passcode:<%= whometocall%>");

        var data = "{'PassCode': '<%= whometocall%>', 'StartTime': '" + startTime + "', 'EndTime': '" + endTime + "', 'Duration': '"+duration+"'}";
        $.ajax({
            type: "POST",
            url: "session.aspx/SendMessage",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json"
         });
    }
  }
       
</script>
   <%} %>


</asp:Content>