<style>body {background: #000 !important;}footer {display: none !important;}</style>
<div class="video-con wow_go_live_cont">
<div class="containerr">
<div id="remote-media">
<div class="liv_vid_cont" id="main_live_video"></div>
<h3><i class="fa fa-spin fa-spinner"></i> {{LANG please_wait}}</h3>
<div class="wow_liv_counter"><span id="live_word">{{LANG live}}</span> <span id="live_count"> 0</span></div>
<div id="live_post_comments" class="wow_liv_comments_feed user-comments"></div>
</div>
<a class="btn btn-danger end_vdo_call wow_end_live_btn hidden" href="{{LINK }}" 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> {{LANG End live}}
</a>
<button class="btn btn-success start_vdo_call wow_go_live_btn hidden" id="publishBtn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17,14.5V11A1,1 0 0,0 16,10H4A1,1 0 0,0 3,11V21A1,1 0 0,0 4,22H16A1,1 0 0,0 17,21V17.5L21,21.5V10.5M3,3.86L4.4,5.24C7.5,2.19 12.5,2.19 15.6,5.24L17,3.86C13.14,0.05 6.87,0.05 3,3.86M5.8,6.62L7.2,8C8.75,6.5 11.25,6.5 12.8,8L14.2,6.62C11.88,4.34 8.12,4.34 5.8,6.62Z" /></svg> {{LANG Go live}}</button>
<?php if ($config['agora_live_video'] == 1 && !empty($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="{{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="{{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 ($config['agora_live_video'] == 1 && !empty($config['agora_app_id'])) {
echo $pixelphoto->PX_LoadPage('live/templates/agora');
} ?>
<script type="text/javascript">
window.onbeforeunload = function() {
if (!window.running) {
window.running = true;
DeleteLive();
window.running = false;
}
}
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(link('live/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() {
window.running = true;
post_id = $('#live_post_id').val();
$.post(link('live/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 $site_url.'/apps/'.$config['theme'];?>/main/static/js/excanvas.js", function(data, textStatus) {});
</script>