<div id="themediadiv">...when done the video will appear here...</div>

<h1>Uploader component</h1>
<div id="container1"></div>

<h1>Recorder component</h1>
<div id="container2"></div>


<script src="//wwwcdn.cincopa.com/_cms/ugc/uploaderUI.js"></script>
<script src="//wwwcdn.cincopa.com/_cms/ugc/recorderUI.js"></script>
<script type="text/javascript" src="https://rtcdn.cincopa.com/libasync.js"></script>
<script>
	var elem = document.getElementById("container1");
	var instance = new cpUploadUI(elem, {
		width: "400px",
		height: "300px",
		upload_url: "https://mediacdn.cincopa.com/post.jpg?uid=1391922&d=AAAAcAgM9UBAAAAAAkDFMwG&hash=i0uwmhf5ky5jjtxt4mrdezqwkyk4e4x1&addtofid=0",
		onUploadProgress: function (e) {
			//console.log(e);
		},
		onUploadError: function (e) {
			console.log(e);
		},
		onUploadComplete: function (e) {
		  onComplete(e);
		}
	});
	instance.start();

	var elem2 = document.getElementById('container2');
	var instance2 = new cpRecorderUI(elem2, {
		width: "400px",
		height: "300px",
    resolution: "480",
    frameRate: 25,
		theme_color: '#ccc',
    uploadWhileRecording: true,
		upload_url: "https://mediacdn.cincopa.com/post.jpg?uid=1391922&d=AAAAcAgM9UBAAAAAAkDFMwG&hash=i0uwmhf5ky5jjtxt4mrdezqwkyk4e4x1&addtofid=0",
		onUploadProgress: function (e) {
			//console.log(e);
		},
		onUploadError: function (e) {
			console.log(e);
		},
		onUploadComplete: function (e) {
			onComplete(e);
		}
	})
	instance2.start();
  
  function onComplete(e)
  {
		console.log(e);
		console.log(e.rid); // this is the new asset ID
    if (e.type.startsWith("video"))
      cincopa.boot_gallery({"_object": "themediadiv", "_fid": "A4HAcLOLOO68!"+e.rid})
    else if (e.type.startsWith("audio"))
      cincopa.boot_gallery({"_object": "themediadiv", "_fid": "AEFALSr3trK4!"+e.rid})
  }
</script>