How do i enable WebRTC video(and audio too) viewing in browsers like Chrome and Mozilla.
The code i am using is this
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> WebRTC</title>
</head>
<body>
<video id="peer2-to-peer1" autoplay controls style="width:40%;"></video>
<script src="script.js"></script>
</body>
</html>
javascript file :
navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({
audio: true
}, function(localMediaStream) {alert('in');
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
}, onError);
} else {
alert('getUserMedia is not supported in this browser.');
}
function onSuccess() {
alert('Successful!');
}
function onError() {
alert('There has been a problem retrieving the streams - did you allow access?');
}
BUT ,
i am getting an error because onSuccess function is'nt called.
LINK :
http://www.creativebloq.com/javascript/get-started-webrtc-1132857
First problem is that you are not requiring video on your getUserMedia. Your params suggest only audio is required no video: true parameter in your call. Yes, onSuccess is never called but that does not matter as you have the callback inside of the function call itself. To call onSucess your syntax is something like:
getUserMedia({"audio": true, "video": true}, onSuccess, onFailure);
Secondly, have onSuccess take a parameter, which will be the media stream. You would need to attach the stream src to the video src object in the onSuccess function if you want it to do anything with the media stream.
Instead of onSuccess() you call this:
function(localMediaStream) {alert('in');
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
}
onSuccess() is simply never been called.
It is furthermore necessary to load the files from a web server (e.g. have a server running on localhost). As the tutorial states, accessing the html file on your local hard drive won't work.
DEMO
HTML:
<html>
<head>
<title>Record and Play Simple Messages</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<p>Demo for GetUserMedia()</p>
<video id="localStream"></video>
<script type="text/javascript" type="javascript" src="./js/script.js" ></script>
</body>
</html>
JS:
var video = document.querySelector('video');
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
function errorCallback(error) {
console.log('An error occurred: ' + error.code);
}
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, function(stream){
if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
}
video.play();
}, errorCallback);
} else {
console.log('getUserMedia() not supported in this browser.');
}
Related
I want to convert a wav file to text using speech-to-text on IBM Cloud.
How do I send a request to get results for two channels?
Do I use websocketAPI?
If so, is there a channel specification in the parameters?
Can anyone tell me?
Thank you for your reply.
I am trying websocket connection with javascript.
In the following program, there is no response of "websocket.send (blob);".
Is the information corresponding to the blob incorrect?
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script>
var websocket = null;
function start() {
var IAM_access_token = "{my-token}";
var wsURI = 'wss://gateway-tok.watsonplatform.net/speech-to-text/api/v1/recognize'
+ '?access_token=' + IAM_access_token
+ '&model=ja-JP_BroadbandModel';
console.log(wsURI);
websocket = new WebSocket(wsURI);
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt) {
var message = {
'action': 'start',
'content-type': 'audio/wav'
};
console.log(JSON.stringify(message));
websocket.send(JSON.stringify(message));
}
function onClose(evt) {
websocket.close();
}
function onMessage(evt) {
console.log(evt);
}
function onError(evt) {
console.log(evt);
}
function sendfile() {
console.log("send click!");
console.log(document.getElementById( "data" ));
var blob = document.getElementById( "data" );
websocket.send(blob) ;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="wrap">
<button type="button" onclick="start();">start</button>
<input type="file" id="data" name="data">
<button type="button" id="send" onclick="sendfile();">send</button>
</div>
</form>
</body>
</html>
I'm using Behat with Zombie.js for end to end tests, using materializecss framework. I'm testing a case where a create action fails and the controller redirects back to the form page.
I get the following exception:
And I press "Crear" # WebContext::pressButton()
Error while processing event 'click': "TypeError: Cannot read property 'badInput' of undefined
at .<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:22076)
at Function.each (https://code.jquery.com/jquery-2.1.1.min.js:2:2880)
at n.each (https://code.jquery.com/jquery-2.1.1.min.js:2:847)
at Object.Materialize.updateTextFields (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:21969)
at HTMLDocument.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:22558)
at j (https://code.jquery.com/jquery-2.1.1.min.js:2:26860)
at Object.fireWith [as resolveWith] (https://code.jquery.com/jquery-2.1.1.min.js:2:27673)
at Function.ready (https://code.jquery.com/jquery-2.1.1.min.js:2:29467)
at HTMLDocument.I (https://code.jquery.com/jquery-2.1.1.min.js:2:29658)
at callListeners (/usr/lib/node_modules/zombie/node_modules/jsdom/lib/jsdom/events/EventTarget.js:170:34)
in http://localhost/myresource/create" (Behat\Mink\Exception\DriverException)
The worst part is that this doesn't happen on the actual browser (maybe it's cause of a redirection?) so I have no idea how to reproduce it.
Any ideas?
I am facing with the same issue with Zombie.js testing
describe('User visits test page', function() {
const browser = new Browser();
it('should open page ', function(done) {
browser.visit('/test', function() {
done();
});
})
});
of simple html page with one input:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="/vendor/materialize/css/materialize.min.css" />
<script type="text/javascript" src="/vendor/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/materialize/js/materialize.js"></script>
</head>
<body>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</body>
</html>
input.validity is undefined in this case. The root cause is not clear for me. But it can be avoided with materialize.js changing
$(input_selector).each(function(index, element) {
if ($(element).val().length > 0
|| element.autofocus
||$(this).attr('placeholder') !== undefined
|| $(element)[0].validity.badInput === true) {
$(this).siblings('label').addClass('active');
}
else {
$(this).siblings('label').removeClass('active');
}
});
to
if ($(element).val().length > 0
|| element.autofocus
|| $(this).attr('placeholder') !== undefined) {
$(this).siblings('label').addClass('active');
} else if ($(element)[0].validity) {
if ($(element)[0].validity.badInput === true) {
$(this).siblings('label').addClass('active');
}
else {
$(this).siblings('label').removeClass('active');
}
}
else {
$(this).siblings('label').removeClass('active');
}
I've created pull request to materialize. Here's a link to it.
I'm developing sns login page.
I use custom login-button and FB.login().
Suddenly, I encounted unsuspected problem that FB.login() resulted in auto-login popup before I click login button..
I do Not want pop-up login window before click the login-button...!!
How can I fix this problem?? Help me..plz....ㅜㅜ
this is my url!
http://sangji.dothome.co.kr/index2.html
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
appId: 'myAppKey',
status: true,
cookie: true,
xfbml: true,
oauth: true,
version : 'v2.5'
});
fbLoginStatus();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ko_KR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function fbLoginStatus(){
FB.getLoginStatus(function(response) {
console.log(response);
if (response.status === 'connected') {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(access_token);
} else {
fblogin();
}
});
}
function fblogin(){
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(access_token);
} else {
console.log('Authorization failed.');
}
},{ //permissions
scope: 'email'
});
}
</script>
<img src="fb_bt.png">
</body>
</html>
You are calling 'fblogin' in the callback to getLoginStatus - this in turn is calling FB.login which is based on opening a popup.
I'm trying to get a login via Javascript SDK from Facebook.
I just have never done something like that.
So this is my source code:
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.fbAsyncInit=function(){
FB.init({
appId : '1234567890',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
console.log('Logging in...');
FB.login();
}
});
</script>
<input type="button" onClick="FB.getLoginStatus();" value="Login" />
</body>
</html>
But sadly this is doing... nothing :(
There is nothing I can see in the console and nothing displayed (even if I push the Login-Button)
Maybe someone could help me?!
Best regards,
Kartilia
Hi I am new to facebook development, and would like to post a feed using this code below, but the message nor the user_message_prompt do not appear in the text box. Do I need to set something in my application to allow this. All I get is default messages.
I tried the 2 methods below, and both of them do not show the message nor user_message_prompt message.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: "174009502722096", status: true, cookie: true, xfbml: true });
function postToFeed() {
var publish = {
method: 'feed',
message: 'Martin Okello presents share',
caption: 'Visit MartinLayooinc',
description: (
'Martin Okello, aka the medallion presents his application'
),
link: 'http://www.martinlayooinc.co.uk',
picture: 'http://www.martinlayooinc.co.uk/topImages/bigMedallion.jpg',
user_message_prompt: 'Share MartinLayooinc Software with friends!'
};
FB.ui(publish,
function(response)
{
alert('MartinLayooInc has been posted!!')
});
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
<!--from here-->
<div id="fb-root">
<p>
<a onclick='postToFeed(); return false;'><img src="topImages/facebook_button.png" style="height:20px; width:80px;" />
</a>
</p>
<p id='msg'>
</p>
</div>
</body>
</html>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '174009502722096', status: true, cookie: true, xfbml: true });
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
logout();
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
I believe they are both deprecated. The message parameter is now ignored and I didn't see the other parameter in the documentation. Apparently, Facebook wants users to put their own message into the text field rather than be forced or prompted. Check out the main info page for it here:
https://developers.facebook.com/docs/reference/javascript/FB.ui/
and the detailed page here:
https://developers.facebook.com/docs/reference/dialogs/feed/
Scroll to the bottom and you'll see the supported parameters. Hopefully it's not a game changer for you.
You should do something like this
window.fbAsyncInit = function() {FB.init({
appId: '{YOUR APP ID}',
xfbml: true,
version: 'v2.1'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function share_prompt() {
FB.ui({
method: 'feed',
name: 'Your App Name',
link: 'https://example.com',
picture: 'http://example.com/img/fbicon.jpg',
caption: 'Your Caption here',
description: 'some sort of your own description',
message: 'Your Message goes here mate'
});
}
Then call the function like below;
<div>Click to open your dialog </div>