I want to create a site with a 360 video thats streamed from my computers 360 cam (ricoh theta s) and uses the possibilites of a-frame. I did not have any luck with embedding youtube livestreaming within a-frame though. I would have a webserver and the stream would not be really public so maybe there is some solution that involves selfhosting? Does anybody have any experience with achieving sth like this? i cant find anything related so far and this plays a crucial role in my robotproject...
EDIT 1:
I might specify even more after some research:
it would be perfect if a-videosphere and a-video would support sth like hls or mpeg-dash - streams. since that would need some kind of player for chrome and android stuff i think the easiest route would be to support a motionjpg-support because they are very easy to create. flashstreams can be good too but i dont think there is a future for that.
is there anything like that in the planning by someone because i am quite sure that nothing like that exists yet... i took 2-3 days of researching and find nothing about that topic... just a getUserMedia for webcam example showed up but its not good for my purpose.
another approach i could live with would be a routine that just autoreloads pictures in a-sky (if possible without flickering). i tried to integrate javascripts that are supposed to do that within normal divs and so but nothing worked...
or did somewhere someone get a stream of any kind running in a-videosphere and if so how?
EDIT 2:
i got it working... somehow... not really but looks promising...
the stream is provided by "yawcam" which uploads a new picture every second to my ftp. if i now click on the red sphere the script starts via addEventListener 'click' and the content of a-sky gets updated... is there any way to make a loop out of that script so one doesnt have to click anymore and it just update itself every second?
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video — A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute( 'src', this.data + "?" + Math.random());
});
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="8" position="-8 2 -8" set-sky="image1.jpg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
so here is the solution for the proposed "kind-of" solution...
the picture "out" is updated via "yawcam" on my server every second and updated in the a-sky tag - even without flickering... so no sound but at least kind of a live-video-feed in a-sky.
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video � A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init: function() {
this.timeout = setInterval(this.updateSky.bind(this), 100);
this.sky = this.el;
},
remove: function() {
clearInterval(this.timeout);
this.el.removeObject3D(this.object3D);
},
updateSky: function() {
this.sky.setAttribute( 'src', this.data + "?" + Math.random());
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9 " fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336 " radius="2" position="-8 2 -8"></a-sphere>
<a-sky set-sky="out"></a-sky>
</a-scene>
</body>
Related
I have a question and I don't have a server with cloudflare in order to test this, hope someone could help me.
I have an html page with a jQuery logic for example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</head>
<body>
<p id="demo"></p>
<script src="timer.js"></script>
</body>
</html>
timer.js
// A $( document ).ready() block.
$( document ).ready(function() {
myFunction();
});
function myFunction() {
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
$('#demo').html(time);
}
as we know Cloudflare caches JS and HTML content but my jQuery is a timer that will show the time each time I send a response.
What would happen with CloudFlare if I had Cache-Control: public, max-age=31536000 and Cloudflare caches everything.
is my jQuery logic going to work? or is the timer going to stop working ?
I am using a timer in this example but my real jQuery logic what it does is to hide some DIV content randomly, I have a website where I have like 5 rows this rows are always there but with jQuery I remove ($target.remove()) some of them randomly and the others I just shuffle them.
but I'd like to know if my logic will still working ? or my jQuery will continue as normal?
CloudFlare doesn't execute your JavaScript, it just caches it. If your script modifies the DOM in a user's browser, CloudFlare won't cache that.
I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.
I am trying to offer a playlist of videos and only play a video once its link was clicked. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WW Video Player</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="video_player" class="video-js vjs-default/skin" width="800" height="600" data-setup='{ "controls": true }'></video>
<script type="text/javascript">
videojs("video_player", {}, function() {});
function SelectVideo(path)
{
var mplayer = videojs("video_player", { "controls": true, "autoplay": false });
mplayer.src({ type:"video/mp4", src: path});
mplayer.play();
mplayer.requestFullScreen();
}
</script>
Play Video
</body>
</html>
In the <video> tag, I have tried adding plain controls and removing data-setup, but I can't get the controls to show up.
Furthermore, mplayer.requestFullScreen(); isn't working, either - here's Firebug's error message:
TypeError: mplayer.requestFullScreen is not a function
I'm running Firefox 22.0 on Windows 7 64bit.
Any ideas? Thanks!
Video.js is good and bad at the same time. I appreciate the work that's gone into it, but I've spent days getting it to work correctly. I wish I'd found your answer earlier, codoplayer looks good.
Videojs goes wrong whenever a javascript error occurs, and subsequently fails to set the correct classes on the control bar etc.
The bad javascript could be in your own code, and there is one in video.js that affects Firefox.
First, make sure your own scripts aren't failing...
The function that must be changed in video.js is: vjs.Player.prototype.techGet()
When an exception occurs, it handles it, then re-throws at the end. Replace the line 'throw e;' with 'return null;'
Why? There are methods within video.js that do not seem to realise that techGet could throw.. here is an example:
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
It throws an exception on techGet whenever the tech is flash, which is common in Firefox, IE8 etc. It will never reach this.cache_.src || ''. It looks like that wasn't the intention, so it's probably a bug.
If interested in IE8, you will have to do something with all the calls to innerHTML, they may fail and will need replacing with a method that works on the DOM instead.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
hi guys am new to java script..
I am trying to stream a sound track in soundcloud using their java script SDK but my code is not working please let me know how to make this work. Below is my code
<!DOCTYPE html>
<html><head>
<script src=”http://connect.soundcloud.com/sdk.js”></script>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script>
SC.initialize({
client_id: “15c5a12b5d640af73b16bd240753ffbb?,
redirect_uri: “http://connect.soundcloud.com/examples/callback.html”
});
$("#stream").live("click", function(){
SC.stream("http://api.soundcloud.com/tracks/293", {autoPlay: true});
});
</script>
</head>
<body>
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</body>
</html>
A couple of things I can spot, that may just be a result of copy & pasting your code, but good to check anyways:
You've got a combination of smart quotes (i.e. ”) and dumb quotes (i.e. ") in your code. Change all of the smart quotes to dumb quotes.
Your client_id has a ? appended to it. Replace the ? with a ".
Make those changes, reload and you should be off to the races.
Btw, for your example here you can also omit the redirect_url. Having it there won't do any harm though:
SC.initialize({
client_id: "15c5a12b5d640af73b16bd240753ffbb"
});
In addition to the changes mentioned above, changing the JQuery version to 1.4 worked for me.