I am trying to build video conferencing using html5 and javascript till now i am able to stream my camera capture and display it on canvas
here is the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<style>
nav .search {
display: none;
}
.demoFrame header,
.demoFrame .footer,
.demoFrame h1,
.demoFrame .p {
display: none !important;
}
h1 {
font-size: 2.6em;
}
h2, h3 {
font-size: 1.7em;
}
.left {
width: 920px !important;
padding-bottom: 40px;
min-height: auto !important;
padding-right: 0;
float: left;
}
div.p {
font-size: .8em;
font-family: arial;
margin-top: -20px;
font-style: italic;
padding: 10px 0;
}
.footer {
padding: 20px;
margin: 20px 0 0 0;
background: #f8f8f8;
font-weight: bold;
font-family: arial;
border-top: 1px solid #ccc;
}
.left > p:first-of-type {
background: #ffd987;
font-style: italic;
padding: 5px 10px;
margin-bottom: 40px;
}
.demoAds {
position: absolute;
top: 0;
right: 0;
width: 270px;
padding: 10px 0 0 10px;
background: #f8f8f8;
}
.demoAds a {
margin: 0 10px 10px 0 !important;
display: inline-block !important;
}
#promoNode {
margin: 20px 0;
}
#media only screen and (max-width : 1024px) {
.left {
float: none;
}
body .one .bsa_it_ad {
position: relative !important;
}
}
</style> <style>
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
</style>
</head>
<body>
<!-- Add the HTML header -->
<div id="page">
<!-- holds content, will be frequently changed -->
<div id="contentHolder">
<!-- start the left section if not the homepage -->
<section class="left">
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true, "audio" : true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</section>
<style>
body .one .bsa_it_ad { background: #f8f8f8; border: none; font-family: inherit; width: 200px; position: absolute; top: 0; right: 0; text-align: center; border-radius: 8px; }
body .one .bsa_it_ad .bsa_it_i { display: block; padding: 0; float: none; margin: 0 0 5px; }
body .one .bsa_it_ad .bsa_it_i img { padding: 10px; border: none; margin: 0 auto; }
body .one .bsa_it_ad .bsa_it_t { padding: 6px 0; }
body .one .bsa_it_ad .bsa_it_d { padding: 0; font-size: 12px; color: #333; }
body .one .bsa_it_p { display: none; }
body #bsap_aplink, body #bsap_aplink:hover { display: block; font-size: 10px; margin: 12px 15px 0; text-align: right; }
</style>
</div>
</body>
</html>
now i just want to stream video to make a conference between two people, i know i have to use webRTC or websocket but i don't know how to start writing code for that.
any help or suggestion would be very helpfull.
HTML5rocks has excellent tutorial on this.
WebRTC tutorial
To summarize below are the steps involved:-
Get streaming audio, video or other data.
Get network information such as IP address and port, and exchange this with other WebRTC clients (known as peers) to enable connection, even through NATs and firewalls.
Coordinate 'signaling' communication to report errors and initiate or close sessions.
Exchange information about media and client capability, such as resolution and codecs.
Communicate streaming audio, video or data. To acquire and communicate streaming data,
WebRTC implements the following APIs.
MediaStream: get access to data streams, such as from the user's camera and microphone. RTCPeerConnection: audio or video calling, with facilities for encryption and bandwidth management. RTCDataChannel: peer-to-peer communication of generic data.
You are obviously only asking for JavaScript here, but if you are a .NET or Mono dev you can install the nuget package XSockets.Sample.WebRTC, that will provide a JavaScript video conference for you... and also read this guide about it http://xsockets.net/blog/tutorial-building-a-multivideo-chat-with-webrtc
Related
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
i am using kendo sortable data source is kendo observable array,
when we sorting the divs we are updating the array object in change event,
but array is updating properly but ui is not updating.
can u please help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="playlist">
<ul id="sortable-basic" data-bind="source:items" data-template="template">
</ul>
</div>
<script type="text/x-kendo-tmpl" id="template">
<li class="sortable">#:value#<span>#:time#</span></li>
</script>
<script>
var data;
$(document).ready(function () {
data = kendo.observable({
items: new kendo.data.ObservableArray([
{ value: 'Papercut', time: '3:12' },
{ value: 'One Step Closer ', time: '4:10' },
{ value: 'With You ', time: '5:00' },
{ value: 'Points of Authority ', time: '2:59' }]
)
});
kendo.bind($('#playlist'), data);
$("#sortable-basic").kendoSortable({
change: function (e) {
var daa = data.items.splice(e.oldIndex, 1);
data.items.splice(e.newIndex, 0, daa[0]);
}
});
});
</script>
<style>
#example
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playlist
{
margin: 30px auto;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
#playlist-title
{
height: 80px;
border-radius: 4px 4px 0 0;
border-bottom: 1px solid rgba(0,0,0,.1);
}
#playlist-title span
{
display: none;
}
#sortable-basic
{
padding: 0;
margin: 0;
}
li.sortable
{
list-style-type: none;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
}
li.sortable:last-child
{
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
li.sortable span
{
display: block;
float: right;
color: #666;
}
li.sortable:hover
{
background-color: #dceffd;
}
li.hint
{
display: block;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:after
{
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #52aef7;
position: absolute;
left: 216px;
top: 8px;
}
li.hint:last-child
{
border-radius: 4px;
}
li.hint span
{
color: #fff;
}
li.placeholder
{
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
</div>
</body>
</html>
I think I found your problem. It seems to be the change function, just remove it and you can sort your list.
I've not used kendoSortable but I would assume that it is already maintaining the array sort because you have bound the array to the kendoSortable. That's the purpose of binding, it keeps the data and elements in sync for you. What you're doing in the change event is simply undoing the work that the binding just did, that is, sort the elements AND the bound array.
As per telerik,
https://www.telerik.com/forums/sortable-and-moving-items-in-observable-arrays
You have to do this manually and attaching sortable to an array doesn't do anything automatically. So what you are doing is correct, however even though your changes reflect correctly in observable array it doesn't on screen.
So we have to trigger clear and change event, to sync UI with the array. There may be a better way invoke sync without having to clear out array but this was a hack that worked for me.
Here is a sample code where we clear the array and then re-insert which fixes the issue.
$("#sortable-basic").kendoSortable({
change: function (e) {
var daa = data.items.splice(e.oldIndex, 1);
data.items.splice(e.newIndex, 0, daa[0]);
var copiedArray = data.items.splice(0, data.items.length);
$.each(copiedArray,
function (index, item) {
data.items.push(item);
});
}
});
I'm using bootstrap-wysihtml5 editor on my form which creates iframe element.
<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" name="for_nod" src="#" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px 0px 10px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; -moz-box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px 4px 4px 4px; width: 750px; height: 300px;">
<html>
<head>
<meta charset="UTF-8">
<link href="/js/plug-ins/bootstrap-wysihtml5/rtl/rtl-editor.css" rel="stylesheet">
<style type="text/css">
</head>
<body class="wysihtml5-editor" contenteditable="true" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: text; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: optimizelegibility; word-break: normal; word-wrap: break-word; word-spacing: 0px;">
simple text
<br>
</body>
</html>
</iframe>
I need to validate that body element inside the iframe isn't empty using Nod validation plugin.
the problem is that Nod validation plugin accepts jquery selectors TEXT for setting validation rules for elements , NOT objects - I can get the iframe object using $("iframe").content().find("body") but the validation logic will not work.
I have tried to set submit button onclick event handler to handle the validation of the iframe manually , the problem was that if the rules used by Nod passes ,then the custom validation function will have no effect if it returned true or false values.
anyway to get around this issue?
I have been solved my issue by creating non-displayed textarea element and then using custom events feature in order to listen to change event of iframe body , and minplulated the hidden textarea content to be the same.
nod rules has been applied to the hidden textarea.
I am not sure if this is the perfect solution but I had no choice :) for the moment.
the custom contentchange event code
/*
* custom-change-event
*
* This custom event is used for those elements
* that has no support for default change event
* like : body , div ,span, ....
*
*
*/
var interval;
jQuery.fn.contentchange = function (fn) {
return this.on('contentchange', fn);
};
jQuery.event.special.contentchange = {
setup: function (data, namespaces, eventHandle) {
var self = this,
$this = $(this),
$originalContent = $this.text();
interval = setInterval(function () {
if ($originalContent != $this.text()) {
$originalContent = $this.text();
jQuery.event.special.contentchange.handler.call(self);
}
}, 500);
},
teardown: function (namespaces) {
clearInterval(interval);
},
handler: function (event) {
$(this).trigger('contentchange');
}
};
I am trying to use the background-size property in IE8 with this promising solution: https://github.com/louisremi/background-size-polyfill
But I am getting this error: SCRIPT65535: Unexpected call to method or property access.
Any ideas or alternatives to set the image size of a background-image in IE8?
It might be worth noting that the polyfill isn't designed to work with specific pixel sizes, i.e. background-size: 32px 64px
I know this doesn't answer your question, but for IE 8, I've just been removing non-important backgrounds with this CSS hack (instead of trying to figure out how to size them)
background: none\9;
try this css code, ie8 working dropshadow
body {
margin: 0;
background: url(images/algeria.jpg) center no-repeat;
-ms-behavior: url(backgroundsize.min.htc);
}
.bgsCover {
background-size: cover;
}
.bgsContain {
background-size: contain;
}
/* this allows to use a second background in all browsers and IE8 */
body:after {
content: "";
background: url(images/pattern.png) repeat;
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* responsive carousel FTW */
#carousel {
height: 45%;
width: 50%;
margin: 0 auto;
background: #0F0808;
border-radius: 3px;
}
#carousel ul {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}
#carousel li {
display: none;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
-ms-behavior: url(backgroundsize.min.htc);
}
#carousel .active {
display: block;
}
/* less interesting stuff below */
html, body {
height: 100%;
font-family: "Arial", "Liberation Sans", sans-serif;
color: #FEE;
}
h1 {
font-family: 'Great Vibes', sans-serif;
text-align: center;
margin: 0 0 40px;
text-shadow: 0 0 2px #222;
font-size: 1.7em;
font-weight: normal;
position: relative;
top: 20px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90);
}
h1 i {
font-size: 1.3em;
display: block;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90);
}
p {
text-align: center;
font-size: 1.5em;
text-shadow: 0 0 2px #222;
/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90);
/* For IE 5.5 - 7 */
zoom: 1;
color: #CCC
}
.button {
color: #0F0808;
text-decoration: none;
background: #FEE;
border-radius: 3px;
text-shadow: none;
padding: 4px 8px;
}
Your HTML Source code
<body class="bgsCover">
<h1><i>background-size</i> polyfill</h1>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub">
<div id="carousel">
<ul>
<li id="img1" class="active" style="background-image: url(images/algerian1.jpg);">
<li id="img2" style="background-image: url(images/jar1.jpg);">
<li id="img3" style="background-image: url(images/algerian2.jpg);">
<li id="img4" style="background-image: url(images/jar2.jpg);">
</ul>
</div>
<p>Stretch background image using CSS3 <code>background-size: cover;</code> and <code>background-size: contain;</code>, in IE8 too.<br/>
Reacts to resize events for responsive backgrounds and galeries!</p>
<p><a class="button" href="https://github.com/louisremi/background-size-polyfill#readme">Instructions</a> - <a class="button" href="https://github.com/louisremi/background-size-polyfill/downloads">Downloads</a></p>
<script>
/*var images = [
'algeria.jpg',
'parthenon.jpg',
'propylaea.jpg'
],
curImg = 0;
document.getElementById("switchImage").onclick = function() {
curImg = ( curImg + 1 ) % images.length;
document.body.style.backgroundImage = "url(images/" + images[ curImg ] + ")";
};
var sizes = [
"Cover",
"Contain",
"Auto"
],
curSize = 0;
document.getElementById("switchSize").onclick = function() {
curSize = ( curSize + 1 ) % sizes.length;
document.body.className = "bgs" + sizes[ curSize ];
};*/
var items = document.querySelectorAll("#carousel li"),
curItem = 0;
setInterval(function() {
items[ curItem ].className = "";
curItem = ( curItem + 1 ) % items.length;
items[ curItem ].className = "active";
}, 3000);
</script>
</body>
i got the same issue on IE8. When i copied ".htaccess" in root folder. It works perfectly.
The Polyfill did not work for me either. My solution was to use the original "deprecated" version.
<!--[if lt IE 9]>
<script
src="//louisremi.github.io/jquery.backgroundSize.js/jquery.backgroundSize.js">
</script>
<script>
$('.logo').css( "background-size", "cover" );
</script>
<![endif]-->
Actually the deprecated version is not necesary.
For me it worked when I used behavior instead of -ms-behavior
Are there any examples out there that can create/recreate the common Metro UI controls using CSS/javascript/HTML5 for Windows Phone 7?
Shameless plug: https://github.com/ace-subido/css3-microsoft-metro-buttons try using this CSS/JS library for metro-buttons :)
Yes, there are some simple examples here:
Developing Windows Phone 7 HTML5 apps with PhoneGap
Try the following to get you started:
body, input, div, span
{
font-size: 20px;
color: white;
font-family: Segoe WP, Sans-Serif;
}
body
{
background:black;
margin:0;
padding:0;
}
h2
{
font-weight: normal;
font-size: 32px; /* PhoneFontSizeLarge */
}
h1
{
font-weight: normal;
font-size: 42.667px; /* PhoneFontSizeExtraLarge */
}
button
{
background: black;
color: white;
border: 3px solid white; /* PhoneBorderThickness */
padding: 6px 10px;
font-size: 25.333px; /* PhoneFontSizeMediumLarge */
position: relative;
top: -4px;
}
button:active
{
background: white;
color: black;
}
button:disabled
{
opacity: 0.7;
}
input[type="text"]
{
font-size: 25.333px; /* PhoneFontSizeMediumLarge */
width: 200px;
padding: 6px;
height: 31px;
border: 3px solid white;
color: black;
}
input[type="checkbox"]
{
width: 32px;
height: 32px;
vertical-align: middle;
}