I've looked at many posts on this subject, but I just can't seem to find a fix for a Google map embedded on my website. It's an iframe that refers back to a separately hosted html file created with the maptiler program. The embed produces the dreaded "Oops! Something went wrong" grey box ... although the desired map does show for about half a second. The java console complains about "no api keys" ... I've created all kinds of Google Maps Javascript API keys, sometimes using the http rule, sometimes not. Nothing works.
The html file appears below. (I've left the key out on purpose.)
<!DOCTYPE html>
<html>
<head>
<title>3rd</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0;
width: 100%; height: 100%; font-family: Trebuchet MS, Trebuchet, Arial, sans-serif; }
#map { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 15px; overflow: auto; }
#footer { position: absolute; bottom: 0px; left: 0px; width:100%; height: 12px; overflow: hidden; }
#media screen and (max-width: 600px) {
#map { top:0px; left:0px; width:100%; height:100%;}
}
body { background: #f4f4f4;}
#header { background: #fff; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; }
#header h1 { padding:7px 10px; margin:0; font-size: 28px; }
#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; background-color: #DEDCD7;}
#footer { text-align:center; font-size:9px; color:#606060; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
#map {
height:expression(document.body.clientHeight-35); /* 10+10+15=35 */
width:expression(document.body.clientWidth-20); /* 10+10=20 */
}
</style>
<![endif]-->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?MY_KEY_HERE&sensor=true"></script>
<!-- Get your Google Maps API Key: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#introduction-->
<!--<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=MY_Key_HERE"></script>-->
<script type="text/javascript">
var map;
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.890044, -75.192903),
new google.maps.LatLng(44.909499, -75.165437));
var mapMinZoom = 13;
var mapMaxZoom = 17;
var maptiler = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var proj = map.getProjection();
var z2 = Math.pow(2, zoom);
var tileXSize = 256 / z2;
var tileYSize = 256 / z2;
var tileBounds = new google.maps.LatLngBounds(
proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
);
var y = coord.y;
var x = coord.x >= 0 ? coord.x : z2 + coord.x
if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
return zoom + "/" + x + "/" + y + ".png";
else
return "https://www.maptiler.com/img/none.png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 1.0
});
function init() {
var opts = {
tilt:0,
streetViewControl: false,
center: new google.maps.LatLng(44.899771, -75.179170),
zoom: 13
};
map = new google.maps.Map(document.getElementById("map"), opts);
map.setMapTypeId('satellite');
map.overlayMapTypes.insertAt(0, maptiler);
}
</script>
</head>
<body onload="init()">
<div id="footer">Generated with MapTiler</div>
<div id="map"></div>
</body>
</html>
Latest Google Maps API requires personal API key for each published website - this is a decision made by Google Maps team.
You have to generate your own API key and use it in the template to get your maps working. More information is available on Google Maps API pages:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#step_3_get_an_api_key
To get your key from the Google Developers Console follow this link:
https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend&keyType=CLIENT_SIDE&reusekey=true
The key is used when pasting Google Maps Javascript Library into a page header of the HTML as a parameter to query (replace YOUR_API_KEY with your own generated key):
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>
</script>
From MapTiler 7.0 on, we added a field for this key to the MapTiler’s Settings. MapTiler will automatically add this key to pre-generated templates with Google Maps API to save your time and effort.
This answer is a repost from MapTiler HowTo:
http://www.maptiler.com/how-to/google-maps-api/
So, the solution was to create yet another project in Google Cloud Console and another API key, which I was careful to verify against my website. I specified the https:// version of the site, among others, and it worked. I had verified the site before but possibly not the https:// version. It may be a coincidence.
Related
I'm documenting my API created using Spring Boot 2.4.3 using springfox-swagger 3.0.0. So I have the below page now.
My client wants to change the Swagger UI logo to their own. I'm not able to do so. I have searched and found few solutions and it is not working.
Added the below custom code under /resource/static/swaggercustm.css. But no changes.
.swagger-ui img {
content: url('/static/css/mylogo.png');
width: 140px;
height: 40px;
}
Imported swagger-ui.css to local and triede modifying image path. But this also didn't help.
Can somebody please help me here to just modify the logo? How to override the logo properties?
Unfortunately, There is no Configuration available in Springfox library to Customise UI elements CSS and Icons.
If you want your own customised Swagger Page then create a static HTML page and disable usage of auto-generated swagger page from Springfox.
Since its HTML, you can change ICONS and the look of it however you want.
resources/static/new_swagger.html
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui.css" >
<link rel="icon" type="image/png" href="./swagger-favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./swagger-favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
.top-nav-bar{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
overflow: hidden;
background: #333;
padding: 15px;
}
.nav-bar-icon{
margin-top: 1px;
float: left;
display: block;
text-decoration: none;
}
.nav-bar-title{
float: left;
display: block;
text-decoration: none;
margin-top: 7px;
margin-left: 10px;
font-size: 18px;
color: #ffffff;
font-family: sans-serif;
}
.nav-bar-select{
width: 30%;
float: right;
font-family: sans-serif;
display: inline-block;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border-radius: 2px;
border: none;
background: #fafafa;
color: #3b4151;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select.classic {
background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
background-size: 5px 5px, 5px 5px, 3.5em 3.5em;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="top-nav-bar">
<a class="nav-bar-icon"><img src="swagger-favicon-32x32.png"></a>
<a class="nav-bar-title"><b>X name</b></a>
<select class="classic nav-bar-select" id="service-selector" onchange="changeSwaggerUI()">
<option value="./swagger.json">X service</option>
</select>
</div>
<div style="margin-top: 100px" id="swagger-ui"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-bundle.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-standalone-preset.js"> </script>
<script>
function changeSwaggerUI(){
let selected_service_swaggerURL = document.getElementById("service-selector").value;
loadUI(selected_service_swaggerURL);
}
function loadUI(swaggerJsonURL){
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: swaggerJsonURL,
validatorUrl: "",
dom_id: '#swagger-ui',
deepLinking: true,
docExpansion: 'none',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
CustomTopbarPlugin
],
layout: "StandaloneLayout"
});
// End Swagger UI call region
window.ui = ui
}
function CustomTopbarPlugin() {
// this plugin overrides the Topbar component to return nothing
return {
components: {
Topbar: () => null
}
}
}
window.onload = function() {
loadUI("./swagger.json");
}
</script>
</body>
</html>
I have had to put all of the code here so you can see my question in context with this code for a basic website. The part of this code I'm referring to is the media query coded below as:
# media (max-width: 700px)
body { background-color: #fff; }
I've done some research on media queries as required and know that in this code that when the page is at width 700px or less it will become the color of #fff which I think is a white color. But what would be the purpose of putting the code here besides a teaching exercise? Is it so that it will fit a mobile phone if the web page where to be opened on such a device? I thought that instead of using a media query that the width of the webpage to fit a device like a mobile phone was established in the meta tags viewport description. Please bear in mind I'm a newbie and just starting to learn about coding about a month ago.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px)
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in
documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information... </p>
</div>
It looks like your code is missing a bracket for the media query. I believe it should look like this. When the window is less than 700px the background is white. When greater than 700px it's a gray. Try re-sizing the window to see what I mean.
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
Snippet
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
<p>More information...
</p>
</div>
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/ (Btw. there was a missing { after the Media Query that I inserted here)
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
If you increase the width of the box, you will see a grey background and in the middle will be a Box with rounded edges. If you decrease the width of the box, you will see that the grey background disappers and the box disappears too, but the white Background stays. The real need is because the box has a height, so only the box part would be white and the rest (top and bottom area) would still be grey.
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/1/ (I removed the background-color: #fff)
You will see that the bottom part is still grey. If you put in the background-color part it will be white.
To your other question: The media query looks for device width, so mostly devices have a smaller width than your PC would have. The meta-tag part says something like if the zoom should kick in or if it's even allowed.
So if you saying that your page should be 1024px wide, the phone would fit the page into a 1024px viewport and you don't have to zoom in/out as an user.
At this point I am not sure if it's smart to go so deep into it, maybe first learn the basics more and then go deeper. But I like the effort you putting in, also google and read read read read as much blogs and stackoverflow threads as you can, this is a must do and will improve you alot!
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 experimenting with Wordpress and (the recent version of) dompdf at the moment and ran into an annoying problem regarding the formating.
My Problem: The top-margin of the main content seems not to be considered on the second page generated, resulting in an overlapping with my logo. You can view the generated PDF under this link.
The relevant code from which the PDF is generated reads as follows (it is not perfect yet as i want to resolve the issue first):
function ppt_pdf_output() {
// post-ID of referring page needed
$post=get_post($_POST['postid']);
$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
body {
margin: 30px 0 0 0;
font-family:sans-serif;
text-align:left;
}
img {
margin: 15px 0;
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
color: #aaa;
font-size: 0.9em;
line-height:1.2em;
}
#header {
top: -30px;
/*border-bottom: 0.1pt solid #aaa;*/
}
#footer {
bottom: 0;
border-top: 0.1pt solid #aaa;
}
#header table,
#footer table {
width: 100%;
border-collapse: collapse;
border: none;
text-align: center;
color: #000;
font-size: 24px;
}
.entry-content {
margin: 100px auto 35px auto;
top: 0; left: 0; bottom: 0; right: 0;
background-color: #d1d977;
width:90%; height:auto;
}
.entry-title {
font-size: 18px;
text-align: center;
}
#header td,
#footer td {
padding: 0;
width: 50%;
}
#footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
.gallery-item {
display:inline-block;
}
br[style] {
display:none;
}
.gallery + p {
clear:left;
}
</style>
</head>
<body><div id="header">
<table>
<tr>
<td>ANTRAG</td>
<td style="text-align: right;"><img src="path/to/logo.png" /></td>
</tr>
</table>
</div>
<div id="footer">
<div class="page-number"></div>
</div>';
$output .='
<!--<h1 class="entry-title">'. $post->post_title .'</h1>-->
<div class="entry-content">' .
apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';
return $output;
}
As you can see, the formatting on the first page is as it should be (or at least as I intended it to be), but after the page break the content area (for visualization reasons provided with a green background) just starts at the beginning of the page, regardless of which number I give the margin.
Has anybody an idea how to resolve this issue? I've been working on this for countless hours and just don't know what to do at this point.
Any help would be greatly appreciated.
Kind regards
Olli
UPDATE: Of course I found this solution only just. I will try this and see if I can get the issue resolved with this.
UPDATE2: Still no luck. I'm now stuck with the following code (the output can be found under the link provided earlier):
function ppt_pdf_output() {
// post-ID of referring page needed
$post=get_post($_POST['postid']);
$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
#page {
margin: 120px 50px 80px 50px;}
#header {
position: fixed;
top: -82px;
width: 100%;
height: 109px;
background: #aaa url("path/to/logo.png") no-repeat right;
}
#content {
width: 100%;
height: 85%;
background-color: #d1d977;
}
footer {
position: fixed;
bottom: -65px;
height: 30px;
background-color: #333399;
}
footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
br[style] {
display:none;
}
</style>
</head>
<body><div id="header">
<h2>ANTRAG</h2>
</div>
<footer>
<div class="page-number"></div>
</footer>';
$output .='<h1>'. $post->post_title .'</h1>
<div id="content">' .
apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';
return $output;
}
It seems just so fragile. For example, as soon as I change the font-size of the h1 element, it gets overlapped by the logo. After the page break, it looks okay, but that just seems an coincidence - as soon as I change the font-size or the text, the text again gets overlapped. Will absolute positioning change anything or do you have any other tipps as how to resolve this anoying issue? Margins of any kind don't seem to work either.
You're on the right track. As you've seen, when an element is split across pages (as your content area is) some of the formatting information does not follow. This is by design.
The correct tact is to define the page margins so that they are large enough to hold your header/footer content and place the header/footer into that space. The content will then just fill the "body" of the document (i.e. the space inside the page margins). This is what you've attempted, but you haven't given enough space for the header. The header is positioned 82px inside the page margin but the height of the header is 109px. Because of this any content that has a small margin will still fall under the header.
Try this instead:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</title>
<style>
#page {
margin: 120px 50px 80px 50px;
}
#header {
position: fixed;
top: -115px;
width: 100%;
height: 109px;
background: #aaa url("path/to/logo.png") no-repeat right;
}
#content {
background-color: #d1d977;
}
footer {
position: fixed;
bottom: -65px;
height: 30px;
background-color: #333399;
}
footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
br[style] {
display:none;
}
</style>
</head>
<body>
<div id="header">
<h2>ANTRAG</h2>
</div>
<footer>
<div class="page-number"></div>
</footer>
<h1>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</h1>
<div id="content">
...
</div>
</body>
</html>
Note that you also don't have to specify any height/width for the content element (unless you want to further constrict the space it uses).
With CSS3 you could go with your original styling and re-use the margins by applying the box-decoration-break property. However as of writing dompdf does not yet support this property.
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