<style>
.content-container {width: 100%;padding: 0;}
footer, footer .footer-wrapper, .second-footer {display: none}
</style>

<div class="video-con wow_go_live_cont">
	<div class="container">
		<div id="remote-media">
			<div class="liv_vid_cont" id="main_live_video"></div>
			<h3><i class="fa fa-spin fa-spinner"></i> <?php echo $wo['lang']['please_wait']?></h3>
			<div class="wow_liv_counter"><span id="live_word"><?php echo $wo['lang']['live']; ?></span> <span id="live_count"> 0</span></div>
			<div id="live_post_comments" class="wow_liv_comments_feed"></div>
		</div>
		<a class="btn btn-mat btn-default end_vdo_call wow_end_live_btn hidden" href="<?php echo($wo['config']['site_url']) ?>" onclick="DeleteLive()">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" /></svg> <?php echo $wo['lang']['end_live']; ?>
		</a>
		<button class="btn btn-mat btn-main start_vdo_call wow_go_live_btn" id="publishBtn">
			<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.35288 7.39477C2.00437 4.61734 4.17301 2.44871 6.95043 1.79721C8.95626 1.32671 11.0437 1.32671 13.0496 1.79721C15.827 2.44871 17.9956 4.61735 18.6471 7.39477C19.1176 9.40059 19.1176 11.4881 18.6471 13.4939C17.9956 16.2713 15.827 18.44 13.0496 19.0915C11.0437 19.562 8.95626 19.562 6.95044 19.0915C4.17301 18.44 2.00437 16.2713 1.35288 13.4939C0.882374 11.4881 0.882374 9.40059 1.35288 7.39477Z" stroke="currentColor" stroke-width="1.5"></path><path d="M12.1618 9.315C12.9461 9.81693 12.9461 11.0717 12.1618 11.5737L9.51471 13.2677C8.73039 13.7696 7.75 13.1422 7.75 12.1383L7.75 8.75033C7.75 7.74647 8.73039 7.11906 9.51471 7.62099L12.1618 9.315Z" stroke="currentColor" stroke-width="1.5"></path></svg> <?php echo $wo['lang']['go_live']; ?>
		</button>
		<?php if ($wo['config']['agora_live_video'] == 1 && !empty($wo['config']['agora_app_id'])) { ?>
			<div class="live_mic_cam_switch" style="display: none;">
				<div class="dropdown mic_drop">
					<button class="btn btn-mat dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="<?php echo $wo['lang']['mic_source']; ?>"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg></button>
					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" id="mic-list"></div>
				</div>
				<div class="dropdown cam_drop">
					<button class="btn btn-mat dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="<?php echo $wo['lang']['cam_source']; ?>"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" /></svg></button>
					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" id="camera-list"></div>
				</div>
			</div>
		<?php } ?>
	</div>
	<input type="hidden" id="live_post_id">
</div>
<?php if ($wo['config']['millicast_live_video'] == 1 && !empty($wo['config']['live_token']) && !empty($wo['config']['live_account_id'])) {
  echo Wo_LoadPage('live/millicast');
} elseif ($wo['config']['agora_live_video'] == 1 && !empty($wo['config']['agora_app_id'])) {
  echo Wo_LoadPage('live/agora');
} ?>


<script>
  <?php if ($wo['config']['agora_live_video'] == 1 && $wo['config']['amazone_s3_2'] == 1 && $wo['config']['live_video_save'] == 1) { ?>
    console.error("Creating a live stream that cloud recording is not enabled.");
  <?php } ?>
  window.onbeforeunload = function() {
  DeleteLive();
 }
var main_live = setInterval(function(){ 
  data = {};
  for (var i = 0; i < $('.live_comments').length; i++) {
    if ($($('.live_comments')[i]).attr('live_comment_id')) {
      data[i] = $($('.live_comments')[i]).attr('live_comment_id');
    }
  }
  post_id = $('#live_post_id').val();
  if ($('#live_post_id').length == 0) {
    clearInterval(main_live);
  }
  $.post(Wo_Ajax_Requests_File() + "?f=live&s=check_comments", {post_id: post_id,ids:data,page:'live'}, function(data, textStatus, xhr) {
    if (data.status == 200) {
      $('#live_post_comments').append(data.html);
      $('#live_count').html(data.count);
      $('#live_word').html(data.word);
      var comments = $('#live_post_comments .live_comments');
      if (comments.length > 4) {
        var i;
        for (i = 0; i < comments.length; i++) {
          if ($('#live_post_comments .live_comments').length > 4) {
            comments[i].remove();
          }
        }
      }
    }
    else if(data.removed == 'yes'){
        clearInterval(main_live);
        return false;
    }
  });
}, 3000);
function DeleteLive() {
  post_id = $('#live_post_id').val();
  $.post(Wo_Ajax_Requests_File() + "?f=live&s=delete", {post_id: post_id}, function(data, textStatus, xhr) {});
}



navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (!navigator.getUserMedia) {
  $('#remote-media h3').text('Sorry, WebRTC is not available in your browser.');
}




function getMedia() {
  return new Promise((resolve, reject) => {
    /*
    //getusermedia constraints
    let constraints = {
      audio:true,
      video: {
        width:  { min: 640, max: 1920, ideal: 1280 },
        height: { min: 480, max: 1080, ideal: 720 },
        frameRate: { min: 10, max: 60, ideal: 24 },
        advanced: [
          // additional constraints go here, tried in order until something succeeds
          // can attempt high level exact constraints, slowly falling back to lower ones
          { aspectRatio: 16/9 },
          { aspectRatio:  4/3 },
        ]
      }
    } */

    let constraints = {audio: true, video: true};
    navigator.mediaDevices.getUserMedia(constraints)
      .then(str => {
        resolve(str);
		$('#remote-media h3').addClass('hidden');
        $('#remote-media .liv_vid_cont').html('<video id="basic-stream" class="hidden videostream" autoplay="" style="width: 100%;height: 100%;vertical-align: middle;"></video>');
      }).catch(err => {
      $('#remote-media h3').text('Could not get Media: '+err);
      reject(err);
    })
  });
}

if (navigator.getUserMedia) {
  ready();
}
function base64_2_blob(dataURI) {
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], { type:mimeString });
}
function capture_video_frame(video, format) {
    if (typeof video === 'string') {
        video = document.getElementById(video);
    }

    format = format || 'jpeg';

    if (!video || (format !== 'png' && format !== 'jpeg')) {
        return false;
    }

    var canvas = document.createElement("canvas");

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    canvas.getContext('2d').drawImage(video, 0, 0);


    var dataUri = canvas.toDataURL('image/' + format);
    var data = dataUri.split(',')[1];
    var mimeType = dataUri.split(';')[0].slice(5)

    var bytes = window.atob(data);
    var buf = new ArrayBuffer(bytes.length);
    var arr = new Uint8Array(buf);

    for (var i = 0; i < bytes.length; i++) {
        arr[i] = bytes.charCodeAt(i);
    }

    var blob = new Blob([ arr ], { type: mimeType });
    return { blob: blob, dataUri: dataUri, format: format };
}
$.getScript("<?php echo $wo['config']['theme_url'];?>/javascript/excanvas.js?version=<?php echo $wo['config']['version']; ?>", function(data, textStatus) {});
</script>