I've recently gotten my hands on the WebRTC sdk by PubNub. Everything's been going great but I've been having trouble displaying video from a client to my screen.
As mentioned in their documentations and tutorial I've written the following code:
function login(form) {
var pub = <publish_key>;
var sub = <subscribe_key>;
var phone = window.phone = PHONE({
number : form.username.value,
publish_key : pub,
origin :'pubsub.pubnub.com',
subscribe_key : sub,
//media : { audio : true, video : true }
ssl :true
});
var ctrl = window.ctrl = CONTROLLER(phone);
ctrl.ready(function(){
form.username.style.background="#55ff5b";
form.login_submit.hidden="true"; // Hide login button
ctrl.addLocalStream(vid_thumb);
});
ctrl.receive(function(session){
session.connected(function(session){
video_out.appendChild(session.video);
});
session.ended(function(session) { ctrl.getVideoElement(session.number).remove(); });
});
}
function makeCall(){
if (!window.phone) alert("Login First!");
var num = form.number.value;
if (phone.number()==num) return false; // No calling yourself!
ctrl.dial(num);
return false;
}
Evrything seems to be working, but the actual video is not being shown on my screen.
(I'm using chrome browsers on both machines)
Can anybody please help out?
Thanks
i got the solution..
Its a very weird solution though and i cant really say how it solved my problem..
I was previously putting my javascript codes in another script file and then linking that file to my HTML page. But as soon i transferred those code to my HTML page everything seemed to work just fine.
Thanks everyone.
WebRTC Video Streaming in PubNub P2P
Answer: WebRTC running on localhost with HTTPS
We answered a similar question yesterday. You can find the answer here in the following Stackoverflow answer link. Essentially you need to make sure you are running HTTPS locally and also using the correct variable scoping as mentioned by Craig Conover.
And you can find the source code on github gist.
Related
Look at this,
I have used the following package
https://www.npmjs.com/package/ng-audio-recorder
And the following code is also following the example in the documentation
stopRecording() {
this.recorderState = RecorderState.STOPPING;
this.cdRef.detectChanges();
this.audioRecorderService
.stopRecording(OutputFormat.WEBM_BLOB)
.then((outputBlob: Blob) => {
if (outputBlob) {
this.currentBlob = outputBlob;
this.currentBlobUrl = URL.createObjectURL(outputBlob);
this.recorderState = this.audioRecorderService.getRecorderState();
this.cdRef.detectChanges();
}
})
.catch(errrorCase => {
console.log(errrorCase);
});
}
What am I doing wrong?
When you record audio using js, it is recorded as a stream of data. In my experience, all the streams behave like this in most of the audio/video players and only some of them were able to figure out the actual length. I suppose it is because the streams lack the metadata that gives the right information about these. Some players that managed to get the right information were professional editing tools, and I assume they somehow estimated the length with some other way. I really don't have any documentation that supports this reasoning but this is my best guess.
Edit:
Turns out my assumptions were right and you can fix this by using this library I found on Github. Credits to daniel
I'm trying to embed some 360 images on my site using Google VR View, but I'm having no luck getting anything to work. I'm following the Google provided documentation as a guide...
https://developers.google.com/vr/concepts/vrview-web
`window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'img/jtree.jpg',
is_stereo: false
});
}`
I copied the example code, and am getting errors in the console (see attached screen shots)
Console Errors
Does anyone know of a tutorial that would better outline how to use this? Or possibly can someone shed some light on what I may be doing incorrectly?
You have to open your HTML file in a server.
Enable CORS https://enable-cors.org/server.html.
I find an easy way to enable CORS with the Chrome web server just for your experiment purpose.
I had absolutely no luck getting this to work with the instructions provided by Google - guess I'm not versed enough in coding. For me it only worked when I used the iframe, see https://www.museum-joanneum.at/spielwiese/360.
However, the view is still not exactly the same, the info-Tag is not layered over the image in the left lower corner like the demo on Google, but on top of the image and reduces the image height by about 30 pixels. Maybe that's related to the iframe since the instructions state, that the functionality isn't exactly the same as with the JavaScript API.
Also, for my images I had to select "false" for stereo in order to display correctly.
I hope this helps!
Looks like you are not setting up the directories properly. Is your web server set up so the root is the root of the repo? Are you also getting a 404 error? (looks like vrview.js is not being loaded)
As for places to get help with this, I recommend the vrview-web google group.
you need add this html id on web page.
<div id="vrview"></div>
Below JavaScript will call out the image on HTML.
var vrView;
var scenes = {
petra: {
image: 'images/petra.jpg',
preview: 'images/petra-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'images/blank.png',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);
You can run those scripts only on the server and then only it will render the texture so you can add your all files in the wamp server path and access through or you can create a web project in asp.net, add your files and build the project. everything will be taken care of by the Visual Studio.
For example
download this sample Code
Add this in your wamp server path or create a project in visual
studio and add these files
Open your index.html file the in browser
I know there are many solutions can be found in the web regarding my problem, but none of them are working for me. That's why I'm asking this question.
First let me explain what I'm looking to achieve -
-> I'm developing a multi-user Web application [ASP.Net]
-> I'm using SignalR to get real-time database change notifications and SignalR instantly transmit the change notifications to all the users logged in the application.
-> Now in addition what I want to do is to play a notification sound for all the logged in users so that they can understand a new notification need attention.
This is what I've done so far -
JavaScript
<script>
function playSound(mysound) {
//thisSound = document.getElementById(mysound);
//thisSound.Play();
var audio = new Audio(mysound);
audio.play();
}
</script>
Code Behind -
ScriptManager.RegisterClientScriptBlock(Me, [GetType](), "OpenWindow", "javascript: playSound('./audio/notification.wav')", True)
The problem with this solution is that the user need to reload the page to hear the notification sound, which I think is pointless if the user can't hear them instantly like the SignalR processing notifications.
Is it possible to push the sound to all the clients so that they don't need to reload the page?
Any help would be highly appreciated. If you need any further clarification please let me know.
Finally I got it worked. I had to change the jquery a little bit -
<script type="text/javascript">
function playSound(mysound) {
//thisSound = document.getElementById(mysound);
//thisSound.Play();
var audio = new Audio(mysound);
audio.play();
}
$(function () {
var notify = $.connection.notificationsHub;
var audio;
notify.client.displayNotification = function (s_Not, s_Path) {
$("#newNot").html(s_Not);
audio = new Audio(s_Path);
var iLevel = "<%=System.Web.HttpContext.Current.Session("USER_LEVEL")%>";
var i_OldNot = "<%=System.Web.HttpContext.Current.Session("NOT_COUNT")%>";
if (iLevel == 2) {
//alert(i_OldNot + " " + s_Not);
if (i_OldNot < i_Not) {
playSound("/audio/notification.wav");
//i_OldNot == Number(s_not);
}
}
};
$.connection.hub.start();
});
</script>
In the code behind I had to set a Session Variable to store the number of last notification before update. If the previous and present number of notification is higher than the session value then notification sound play -
System.Web.HttpContext.Current.Session("NOT_COUNT")= i_LastNotCount
Now the sound is playing without reloading the page. Special thanks to rdans, because of his below comments I got this idea -
Then in a comment you say:
I already have implemented SignalR. So it's not the problem at all.
This suggests to me that you probably don't understand what signalR is doing because the whole point of signalR is to push to the browser without having to post back or use an ajax call.
The time you are executing the user logged in notification using signalR, after that you can Call javascript function from server .
Hope this is what you are looking for.
I am building a NW.js (Node-Webkit) dashboard app which I want to be able to control with a game controller (for example: XBox 360 controller or Logitech controller).
I'm calling the following onready but when I debug its not recognizing any gamepads.
angular.element(document).ready(function() {
if(canGame()) {
var prompt = "To begin using your gamepad, connect it and press any button!";
$("#gamepadPrompt").text(prompt);
$(window).on("gamepadconnected", function() {
$("#gamepadPrompt").html("Gamepad connected!");
console.log("connection event");
});
$(window).on("gamepaddisconnected", function() {
console.log("disconnection event");
$("#gamepadPrompt").text(prompt);
});
}
});
function canGame() {
return "getGamepads" in navigator;
}
When I debug the code, it doesn't appear to be detecting any gamepads. I also try:
navigator.webkitGetGamepads()
but it doesn't show any gamepads being detected either.
Has anyone successfully used gamepads with a NW.js app?
I would greatly appreciate some help getting this to work.
I found the answer to my issue. Gamepads are indeed compatible with NW.js. I however, was using an old version (~v0.08).
The code I posted earlier when running with NW.js v0.12.2.
I recently made a YouTube JukeBox. I have everything I want done, except I am trying to get Notifications to work/show on the play event only if the previous video has ended.
I have tried setting a variable then updating it when the video when a video ends to true, however it keeps returning "undefined" when I check it in the play event.
function onPlayerStateChange(event)
{
var videoData = player.getVideoData();
if (event.data == 0)
{
var videend = 1;
player.loadVideoById($("input[name=video]:radio:checked").closest('tr').next().find('input').prop("checked", true).val());
$('.playlist').scrollTo($("input[name=video]:radio:checked").closest('tr'));
}
if (event.data == 1)
{
$("#info").css("display","none");
if(videend == 1)
{
var videend = 0;
new Notification(videoData['author'], {
dir: "auto",
lang: "",
body: videoData['title'],
icon: "http://vman315.com/base/images/Pinkie-Pie-mustache.png",
});
}
document.title = '\u25B6 ' + videoData['title'];
}
}
Example
If anyone could possibly provide some insight into what I am doing wrong I would be very grateful.
I got this to work for me in Google Chrome Version 29.0.1547.66 m
It appears as though notifications in Chrome are restricted from running automatically and you have to go into your web browser and have them set to either, allow notifications from all websites without asking, or ask each time for a notification.
My browser was set to ask each time for allowing a notification. You do not however have any code in your document to ask for permission to run a notification. When i set my browser to run notifications without asking then it worked properly.
The only other issue being your
"var videend = 1;"
was not being accessed inside of the local function. I moved that inside of the function and then your if statement for notifications started working.
http://jsfiddle.net/83tju/3/
Helpful resources
https://developer.mozilla.org/en-US/docs/Web/API/notification
http://www.w3.org/TR/notifications/#permission
After reading those resources it appears as though the syntax you are using to create notifications does not work on the version of chrome i am using, this might explain why i had to stop my browser from asking for notifications? Not sure. I will have to look at this later on an updated browser.