Mirror

by thelifeisyours

HTML

<div id="container">
<video autoplay="true" id="videoElement"></video>
</div>
<input class="inp1" type="text" placeholder="type something">
<input class="sub1" type="button" value="Talk" disabled="disabled">
<div id="outBox1">
    <span class="out1"></span>
</div>

CSS

body{
margin: 0px auto;
width:500px;
padding-top:7px;
font-family:helvetica, comic sans MS;
}

#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}

#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}


#outBox1 {
width: 493px;
height: 200px;
max-height: 200px;
border: solid 1px purple;
padding: 13px;
overflow-y: auto;
overflow-x: hidden;
top: -1.5em;
position: relative;
}
.out1{
overflow:hidden;
}
.sub1{
left: 35.9em;
position: relative;
top: -1.97em;
}
.inp1{
width:473px;
}
.text {
margin: 0;
float: left;
width: 23em;
word-break: break-word;
margin-right: 27px;
}
.time {
position: relative;
left: 27em;
}
li{
    margin-bottom:7px;
    display:block;
    border-bottom:solid silver 1px;
    padding-left:13px;
    color:gray;
}

JavaScript

$(document).ready(function(){
   $('.sub1').click(function(){
       var d = new Date();
       var h = d.getHours();
       var m = d.getMinutes();
	   var t = h+':'+m;
       $('.out1').prepend('<li><div><p class="text">'+ $(".inp1").val() +'</p><br><text class="time">'+ t +'</text></div></li>');
       $('.inp1').val('');
   });
   
    $('.inp1').keyup(function(){
     if ($(this).val() === ''){
         $('.sub1').prop('disabled', true);
     } else {
         $('.sub1').prop('disabled', false);
     }
    });
    
	$('.inp1').keypress(function(event){
    if(event.keyCode == 13){
        $('.sub1').click();
    }
});
	
});

 var video = document.querySelector("#videoElement");
 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
   video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}