I am working on a project about speech recognition, but my html file cannot find microphone.I mean that when I click the button "start recognition " it should pop a bar for allow or deny access to the microphone, but it doesn't.I figure out that I should enable web audio input from chrome://flags, but in chrome://flags there is no option for web audio input.
what should I do?
please help me.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Web Speech API</title>
<style type="text/css">
#controls {
text-align: center;
}
#start_button {
font-size: 16pt;
}
#transcript {
color: darkred;
font-size: 16pt;
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
#instructions {
color: darkblue;
font-size: 14pt;
text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="transcript"> </div>
<br>
<div id="instructions"> </div>
<div id="controls">
<button id="start_button">Click to Start</button>
</div>
<script type="text/javascript">
var finalTranscript = '';
var recognizing = false;
$(document).ready(function() {
// check that your browser supports the API
if (!('webkitSpeechRecognition' in window)) {
alert("Sorry, your Browser does not support the Speech API");
} else {
// Create the recognition object and define the event handlers
var recognition = new webkitSpeechRecognition();
recognition.continuous = true; // keep processing input until stopped
recognition.interimResults = true; // show interim results
recognition.lang = 'en-GB'; // specify the language
recognition.onstart = function() {
recognizing = true;
$('#instructions').html('Speak slowly and clearly');
$('#start_button').html('Click to Stop');
};
recognition.onerror = function(event) {
console.log("There was a recognition error...");
};
recognition.onend = function() {
recognizing = false;
$('#instructions').html(' ');
};
recognition.onresult = function(event) {
var interimTranscript = '';
// Assemble the transcript from the array of results
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
finalTranscript += event.results[i][0].transcript;
//me sunarthsh js na to kopseis kai na pareis tis lekseis kai na allazeis auta pou thes
} else {
//console.log("event.results[i][0].transcript: " + event.results[i][0].transcript);
//if (event.results[i][0].transcript == "equals") {
//... = "=";
//}
//else if (... == "by") {
//... = "*";
//}
//else if (... == "divide") {
//... = "/";
//}
//else if (... == "square") {
//... = "^2";
//}
interimTranscript += event.results[i][0].transcript;
}
}
console.log("interim: " + interimTranscript);
console.log("final: " + finalTranscript);
// update the page
if(finalTranscript.length > 0) {
$('#transcript').html(finalTranscript);
recognition.stop();
$('#start_button').html('Click to Start Again');
recognizing = false;
}
};
$("#start_button").click(function(e) {
e.preventDefault();
if (recognizing) {
recognition.stop();
$('#start_button').html('Click to Start Again');
recognizing = false;
} else {
finalTranscript = '';
// Request access to the User's microphone and Start recognizing voice input
recognition.start();
$('#instructions').html('Allow the browser to use your Microphone');
$('#start_button').html('waiting');
$('#transcript').html(' ');
}
});
}
});
</script>
</body>
</html>
You need that page to be served by a webserver, but it sounds like you're just trying to open the HTML file with your browser. Chrome will block access to the camera/microphone unless the page was served from a webserver. You can create a local server on your machine to serve the page using the command python -m SimpleHTTPServer in the folder with your html file. (assuming you're on a MacOS/linux system).
See this answer for more information
WebRTC - Browser doesn't ask for mic access permission for local html file
Related
I have wrong output of peerjs webrtc call. can anyone help me on how to show the remote and local video chat in the same screen? currently it is showing only one video chat user. Also, I want the design view like this.
https://drive.google.com/file/d/1KPnoEBanIUuThrPuavL1bnqIlG5yjC0o/view?usp=sharing
Can anyone help me by share the total code of this picture UX design view?
My project server is on peerjs cloud server, so no need to put hard coded ip address of 2 peer hosts.
The project has 3 files. main.js, index.html and style.css. Here is the code for main.js .
const peer = new Peer();
var currentCall;
peer.on("open", function (id) {
document.getElementById("uuid").textContent = id;
});
async function callUser() {
// get the id entered by the user
const peerId = document.querySelector("input").value;
// grab the camera and mic
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
// switch to the video call and play the camera preview
document.getElementById("menu").style.display = "none";
document.getElementById("live").style.display = "block";
document.getElementById("local-video").srcObject = stream;
document.getElementById("local-video").play();
// make the call
const call = peer.call(peerId, stream);
call.on("stream", (stream) => {
document.getElementById("remote-video").srcObject = stream;
document.getElementById("remote-video").play();
});
call.on("data", (stream) => {
document.querySelector("#remote-video").srcObject = stream;
});
call.on("error", (err) => {
console.log(err);
});
call.on('close', () => {
endCall()
})
// save the close function
currentCall = call;
}
peer.on("call", (call) => {
if (confirm(`Accept call from ${call.peer}?`)) {
// grab the camera and mic
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((stream) => {
// play the local preview
document.querySelector("#local-video").srcObject = stream;
document.querySelector("#local-video").play();
// answer the call
call.answer(stream);
// save the close function
currentCall = call;
// change to the video view
document.querySelector("#menu").style.display = "none";
document.querySelector("#live").style.display = "block";
call.on("stream", (remoteStream) => {
// when we receive the remote stream, play it
document.getElementById("remote-video").srcObject = remoteStream;
document.getElementById("remote-video").play();
});
})
.catch((err) => {
console.log("Failed to get local stream:", err);
});
} else {
// user rejected the call, close it
call.close();
}
});
function endCall() {
// Go back to the menu
document.querySelector("#menu").style.display = "block";
document.querySelector("#live").style.display = "none";
// If there is no current call, return
if (!currentCall) return;
// Close the call, and reset the function
try {
currentCall.close();
} catch {}
currentCall = undefined;
}
Here is code for style.css.
#live {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
}
#local-video {
position: absolute;
bottom: 0;
left: 0;
width: 250px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
margin: 16px;
border: 2px solid #fff;
}
#remote-video {
position: absolute;
max-width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#end-call {
position: absolute;
bottom: 0;
right: 0;
padding: 8px;
background-color: red;
color: white;
border: none;
margin: 16px;
}
Here is code for index.html .
<!DOCTYPE html>
<html lang="en">
<head>
<title>P2P Video Chat</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- App code -->
<div id="menu">
<p>Your ID:</p>
<p id="uuid"></p>
<input type="text" placeholder="Peer id" />
<button onclick="callUser()">Connect</button>
</div>
<div id="live">
<video id="remote-video"></video>
<video id="local-video" muted="true"></video>
<button id="end-call" onclick="endCall()">End Call</button>
</div>
<div id="menu">
<p>Your ID:</p>
<p id="uuid"></p>
<input type="text" placeholder="Peer id" />
<button onclick="callUser()">Connect</button>
</div>
<script src="main.js"></script>
</body>
</html>
Any one come with
complete solution and help by working code links
that is >>compatible on All modern browsers>> is much appreciated. what do you think, which one active/compatible on all browsers >> opensip or peerjs ?
i have a website that shows my Instagram feed. previously i was using
Instagram following API.
users/self/media/recent
This API was using access token that i generated once and kept in as a variable in my code without changing it for long time (for 2-3 years).
Now when this API is deprecated Instagram is recommending to use 'Basic Display API' for which we need to create a access token which will expire in 1 hour or 60 days. It also says that it can be used only once. And i am interested in showing my Instagram feed I'm not interested in showing feed of the user who is logged-in in my website.
Is there a API which will not have to constantly authenticated for token and can be used to retrieve Instagram feed
Unfortunately, Instagram has make it harder to get user media. All public method are not working every time anymore.
My suggestion is when someone visited your website, you can use the old token to generate a new token and store it somewhere for next visit.
source: https://developers.facebook.com/docs/instagram-basic-display-api/reference/refresh_access_token
you can parse your Instagram page through regular expression and get photos. Using this library, you can take up to 12 photos; Unfortunately, you won't be able to load more.
// Initialize library
var lib = new Nanogram();
function buildPorfolio() {
// Get content from https://www.instagram.com/instagram/
return lib.getMediaByUsername('instagram').then(function(response) {
if (console.table) {
console.table(response.profile);
}
// Get photos
var photos = response.profile.edge_owner_to_timeline_media.edges;
var items = [];
// Create new elements
// <div class="portfolio__item">
// <a href="..." target="_blank" class="portfolio__link">
// <img src="..." alt="..." width="..." height="..." class="portfolio__img">
// </a>
// </div>
for (var i = 0; i <= photos.length - 1; i++) {
var current = photos[i].node;
var div = document.createElement('div');
var link = document.createElement('a');
var img = document.createElement('img');
var thumbnail = current.thumbnail_resources[4];
var imgSrc = thumbnail.src;
var imgWidth = thumbnail.config_width;
var imgHeight = thumbnail.config_height;
var imgAlt = current.accessibility_caption;
var shortcode = current.shortcode;
var linkHref = 'https://www.instagram.com/p/' + shortcode;
div.classList.add('portfolio__item');
img.classList.add('portfolio__img');
img.src = imgSrc;
img.width = imgWidth;
img.height = imgHeight;
img.alt = imgAlt;
link.classList.add('portfolio__link');
link.href = linkHref;
link.target = '_blank';
link.appendChild(img);
div.appendChild(link);
items.push(div);
}
// Create container for our portfolio
var container = document.createElement('div');
container.id = 'portfolio';
container.classList.add('portfolio');
// Append all photos to our container
for (var j = 0; j <= items.length - 1; j++) {
container.appendChild(items[j]);
}
// Append our container to body
document.body.appendChild(container);
}).catch(function(error) {
console.log(error);
})
}
buildPorfolio()
body {
margin: 0;
padding: 20px;
background-color: rgb(212, 201, 201);
}
.portfolio {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3,200px);
}
.portfolio__link {
display: block;
width: 100%;
height: 100%;
}
.portfolio__img {
display: block;
width: inherit;
height: inherit;
object-fit: cover;
}
.portfolio__item {
width: 200px;
height: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/nanogram.js#2.0.2/dist/nanogram.iife.js"></script>
I'm working through a tutorial about using esp8266 connected to an Arduino Uno to serve a webpage with Ajax that retrieves a json file (also served by the Arduino). The tutorial (won't link to it here) looks like it's a work of fiction because the author builds the webpage using Strings like this:
String webpage = "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1\" />";
webpage += "<style>body { background-color: #cccccc; text-align: center; max-width: 400px; margin: 10px auto; } #datavalues { max-width: 400px; display: block; margin-top: 30px; }</style>";
webpage += "</head><body>";
webpage += "<div id=\"datavalues\">";
webpage += "<h1>Light: </h1><div id=\"light\">";
webpage += lightval;
webpage += "</div>";
webpage += "<h1>Count: </h1><div id=\"count\">";
webpage += count;
webpage += "</div>";
webpage += "</div>";
webpage += "<script>function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var obj = JSON.parse(this.responseText); document.getElementById(\"light\").innerHTML = obj.data[0].datavalue; document.getElementById(\"count\").innerHTML = obj.data[1].datavalue; } }; xhttp.open(\"GET\", \"data.json\", true); xhttp.send(); } var timedEvent = setInterval(function(){ loadDoc(); }, 2000);</script>";
webpage += "</body></html>";
and when you test it it looks like the webpage is either too long for a String or the uno runs out of memory. I've been trying with c type strings (reading that they are more efficent) like so:
char webpage[1024] = "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1\" />";
strcat(webpage, "<style>body { background-color: #cccccc; text-align: center; max-width: 400px; margin: 10px auto; } #datavalues { max-width: 400px; display: block; margin-top: 30px; }</style>");
but it doesn't seem to make much difference. Is there a way to serve a webpage this size from the arduino? / what is the most efficient way to build it and serve it?
Depending on the free memory on the Arduino (UNO) you could move the HTML to progmem
Example Code
//HTML Code Start-----------------------------------
static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<!doctype html>
<html>
.... your page code here
<script>
...even with javascript
</script>
</body>
</html>
)rawliteral";
//HTML Code END-----------------------------------
You would use it then in your response (with a lib like simple webserver or similar for Uno) like
server.on("/index.html", HTTP_GET, []() {
server.send(200, "text/html", (const char *)INDEX_HTML);
});
For just sending over wifi you would do a
client.print(...);
Start with a minimal page (watch your memory after compiling) - The next step should be to host the web function in the esp (SPIFFS/LittleFS) and connect via serial with the arduino and exchange data from/to the pins.
As a final tip: Never use Arduino String class and communication tasks - It will fragment the heap and crash the Arduino/ESP. Instead work with pre-defined char arrays and pointers.
I am trying to render an html+js page in nodejs using jade. I used the online available html to jade converters to convert my html to jade and then render it from my nodejs app. However, I am not able to render the jade properly.
The example that I used is the one provided by google in their documentation for google maps API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with google</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left: -52px">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map-canvas"></div>
</body>
</html>
I tried many converters to convert but each of them gave me one or the other error. The http://html2jade.vida.io/ was able to convert it into jade.
I saved the file as maps_marker.jade in my views directory and from one of my APIs in web.js I made a call "res.render('maps_marker',{})" to render this page.
However the page rendered the following html as text
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Marker animations with google</title><style><html>, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</html><div id="panel">{position: absolute;top: 5px;left: 50%;margin-left: -180px;z-index: 5;background-color: #fff;padding: 5px;border: 1px solid #999;}</div></style><script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script><var>berlin = new google.maps.LatLng(52.520816, 13.410186);</var><var>neighborhoods = [</var><new>google.maps.LatLng(52.511467, 13.447179),</new><new>google.maps.LatLng(52.549061, 13.422975),</new><new>google.maps.LatLng(52.497622, 13.396110),</new><new>google.maps.LatLng(52.517683, 13.394393)</new>];<var>markers = [];</var><var>iterator = 0;</var><var>map;</var><function>initialize() {</function><var>mapOptions = {zoom: 12,center: berlin};</var><map>= new google.maps.Map(document.getElementById('map-canvas'),mapOptions);}</map><function>drop() {for (var i = 0; i < neighborhoods.length; i++) {setTimeout(function() {addMarker();}, i * 200);}}</function><function>addMarker() {markers.push(new google.maps.Marker({position: neighborhoods[iterator],map: map,draggable: false,animation: google.maps.Animation.DROP}));iterator++;}</function><google window load initialize class="maps event addDomListener"></google></script></head><body><div id="panel" style="margin-left: -52px"><button id="drop" onclick="drop()">Drop Markers</button></div><div id="map-canvas"></div></body></html>
Can someone help me understand how to render such html+js in node.js.
I am currently try to use the jade template engine, but am open to using any other template engine as well.
UPdated to add snippet from my web.js and input from
I have an index.html(in public folder) with the following form within it
<form id="searchForm" action="/submit_search" method="POST" enctype="multipart/form-data">
<input name="latitude" type="text" id="latitude"/>
<input name="longitude" type="text" id="longitude"/>
<input type="submit" value="Submit" onclick="submitForm()">
</form>
In my javascript - I submit the form.
IN my web.js I have the following snippet for submit_search API
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.post('/submit_search', function(req,res){
console.log(JSON.stringify(req.body));
pg.connect(database_url, function(err, pgclient, done){
if(err)
{
console.log("Error in fetching pgclient from pool");
res.send(500, "Load the error connection page");
}
else if(pgclient != null)
{
console.log("Got an instance of pgclient");
generateDataForMap(req, res, pgclient, done);
}
});
});
And then I have defined my generateDataForMap method
var generateDataForMap = function(req, res, pgclient, done){
... some processing.....
..... create the required json.....
res.render('maps_marker',json);
}
I have put the maps_marker.jade file in the views folder..
The jade file produced by http://html2jade.vida.io/ is not valid. To fix it, you need to add a . (dot char) after the style and script tags to turn them in to style. and script. respectively.
doctype html
html
head
meta(charset="utf-8")
title Marker animations with google
style.
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
script(src="https://maps.googleapis.com/maps/api/js?v=3.exp")
script.
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
body
#panel(style="margin-left: -52px")
button#drop(onclick="drop()") Drop Markers
#map-canvas
i am working for a face detection mechanism in winJs starting from the basic. What is the mechanism to open a Camera in winJs and in which tag to show the video.
This is the code i know till now
var Capture = Windows.Media.Capture;
var mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync();
How to show in a Div the same.
here's the html for the same.
function init() {
livePreview = document.getElementById("live-preview");
startCamera();
}
function startCamera() {
try {
mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync().then(function () {
livePreview.src = URL.createObjectURL(mediaCapture);
livePreview.play();
});
} catch(exception) {
Windows.UI.Popups.MessageDialog(exception.message, "Error").showAsync();
}
}
HTML
<div id="application" style="width:100%; height: 180px; overflow: hidden; background: #222;">
<video id="live-preview" style="display : none; width:100%; height: 180px; overflow: hidden;"></video>
</div>
these were some of the variables Select appropriate ones
var Capture = Windows.Media.Capture;
// Globals
var mediaCapture;
var recording = false;
var livePreview;
var activation = Windows.ApplicationModel.Activation;