I've been using ziggeo for a week now and have found it to be perfect for my live stream recording application. The javascript api works perfectly. I was able to create a recorder which starts and stops recording by using the callable methods embedding.record() and embedding.stop() based on time elapsed. So far it works perfectly. However I am not able to find any embedding parameter which hides the control panel(with settings and record buttons and more) displayed on the V2 recorder. Here is my code
{% extends 'TraceBundle::layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('bundles/trace/css/loader.css') }}" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-stable/ziggeo.css" />
<style>
.navbar-default .navbar-nav > li > a {
color:#337ab7;
}
</style>
{% endblock %}
{% block content %}
<nav id="topnav" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#"><img id="brand-logo" src="{{ asset('bundles/trace/img/logo-epita.png') }}" width="50" height="50" alt="easyRECrue" title="easyRECrue" /></a>
</div>
<div id="navbar-links-collapse" class="collapse navbar-collapse text-center">
<ul class="nav navbar-nav navbar-center">
<li>
<a>Step 2/4: Practice</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a>{{campaign.campaigntitle}}</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="practice-question" data-applicant-id="{{applicant.id}}" data-random-string="{{randomstring}}">
<div class="row text-center">
<h3>To Practice, tell us if this is your first video interview and what you think about it.</h3>
</div>
<div class="row text-center">
<div class="video-div">
<video id="myVideo" width="640" height="480" controls>
<source src="{{asset('bundles/trace/vid/mov_bbb.mp4')}}" type="video/mp4">
</video>
</div>
<p id="info"><b>!</b>This answer will not be sent to the recruiter</p>
<p id="save-warning" class="hidden" style="color:red">Your recording is getting saved, Please do not hit back or refresh..</p>
<div class="row text-center" id="hdfvr-content"></div>
<div id="thinktime" style="margin-top:-310px;"> </div>
<br>
<br>
<br>
<br>
<br>
<br>
<button class="btn btn-primary answer-now" type="button" value="answernow" data-timeleft="">Answer now</button>
<div id="input-widget">
{# <br>#}
<form method="post" id="response" action="{{ path('practicequestionpage',{'uniquecode': uniquecode}) }}">
<progress value="0" max="30" id="progressBar"></progress>
<br>
<br>
<button class="btn btn-primary finished-answering hidden" type="button" value="finished">I've finished answering</button>
<button class="btn btn-primary submit hidden" type="submit" name="submit" value="submit" onClick="removePipeRecorder();">Question answered, continue the process</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//assets-cdn.ziggeo.com/v1-stable/ziggeo.js"></script>
<script>ZiggeoApi.token = "r1a6fc911cd4e27b99d4c992e1e1d3b3";</script>
<script>
$(document).ready(function () {
ZiggeoApi.Events.on("system_ready", function() {
var embedding = new ZiggeoApi.V2.Recorder({
element: document.getElementById("hdfvr-content"),
attrs: {
width: 320,
height: 240,
theme: "modern",
themecolor: "red",
skipinitial: "true",
limit: 30,
countdown: 0,
localplayback: "false",
//max take
recordings: 1,
picksnapshots: "false"
}
});
$('#input-widget').hide();
$('#hdfvr-content').hide();
$('#info').hide();
var timeLeft = 30;
var elem = document.getElementById('thinktime');
var lefttime = 30;
var maxduration = 30;
var minduration = 10;
// loader(circle) variables
var time = 30;
var initialOffset = '440';
var i = 1;
// remove video pause button
var video = document.getElementById("myVideo");
if(video){
$('video').one('play', function () {
video.removeAttribute("controls");
});
$('#thinktime').hide();
$('.answer-now').hide();
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
}else{
timerId = setInterval(countdown, 1000);
$('.answer-now').show();
loader(time,initialOffset,i);
}
function myHandler() {
embedding.activate();
$("#myVideo").remove();
$('#thinktime').show();
$('#hdfvr-content').show();
$('#info').show();
$('.answer-now').show();
timerId = setInterval(countdown, 1000);
loader(time,initialOffset,i);
}
// loader
function loader(time,initialOffset,i){
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/timeLeft)));
var interval = setInterval(function() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
elem.innerHTML = '<div class="item html"><h2>0</h2><svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"><g>\n\
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none">'
'</circle></g></svg></div>';
}
function countdown() {
$('.answer-now').click(function(){
$(this).data('clicked', true);
});
if (timeLeft == 0 || $('.answer-now').data('clicked')) {
clearTimeout(timerId);
embedding.record();
$('#input-widget').show();
$('#thinktime').hide();
$('.answer-now').hide();
var downloadTimer = setInterval(function(){
document.getElementById("progressBar").value = lefttime;
lefttime--;
if(lefttime == (maxduration-minduration)){
$('.finished-answering').removeClass('hidden');
$('.finished-answering').click(function () {
clearInterval(downloadTimer);
embedding.stop();
$('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
$('.record-icon').remove();
$('#save-warning').removeClass('hidden');
$('.finished-answering').addClass('hidden');
$('#progressBar').hide();
});
}
if(lefttime == 0){
clearInterval(downloadTimer);
embedding.stop();
$('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
$('.record-icon').remove();
$('#save-warning').removeClass('hidden');
$('#progressBar').hide();
$('.finished-answering').addClass('hidden');
}
},1000);
} else {
// elem.innerHTML = '<h1>'+timeLeft+'</h1>';
timeLeft--;
$('.answer-now').data('timeleft', timeLeft);
}
}
//hide/show input widget ends here
embedding.on("recording", function () {
$("#hdfvr-content").append('<span style="color:red; margin:175px 0px 0px -25px; position:absolute;" class="record-icon glyphicon glyphicon-record"></span>');
});
embedding.on("uploaded", function () {
$('#save-warning').addClass('hidden');
$('.submit').removeClass('hidden');
});
});
});
</script>
{% endblock %}
I understand that for HTML based recorder, there may be a way to hide the control panel using css, but what about the flash based? How do you hide it from flash based recorder? Awaiting response...
Regards, Utkarsh
You can achieve that easily by adding CSS style on the page. To hide the buttons (setting, camera, and the action button) you can use this code
div[data-selector="controlbar"] {
display: none;
}
And if you want to hide further the semi-transparent bar (and it's child element) you can use this
.ba-videorecorder-theme-modern-dashboard {
display: none;
}
I hope this help with your question. Please note that this will hide all of the control bar in the page if you have more than one recording.