We Keep Coding

Does not download a file by magnet links

This is an example from the documentation.
var client = new WebTorrent()
var torrentId = 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent'
client.add(torrentId, function (torrent) {
// Torrents can contain many files. Let's use the .mp4 file
//var file = torrent.files.find(function (file) {
//return file.name.endsWith('.mp4')
//})
// no console.log !!
console.log(torrent)
// Display the file by adding it to the DOM. Supports video, audio, image, etc. files
torrent.files[0].appendTo('body')
})
An example works well.
But if I change the magnet link to another but nothing happens.
The link to which I am changing is valid.
magnet:?xt=urn:btih:C45CE38E4508E775E49EB2A6841C814D1A8AD375&tr=http%3A%2F%2Fbt3.t-ru.org%2Fann%3Fmagnet
but does not work with this link. Not a single mistake or nothing at all

I have had similar issues recently trying to work this out. Only instant.io (using a turn server) consistently works. Very little webRTC stuff works for me.
I think the reason the template provided by WebTorrent works and no others is because the model contains a magnet which has a link to the torrent file on their website.
I suspect they are seeding it or even just providing it via some other means.
xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent
Whoever created instant.io took the web torrent template and made it work. WebRTC is an absolute nightmare, and the web torrent template/site doesn't even get the WebSocket connections right (for me, at least).
If you are looking to pass on relatively small amounts of data, then relaying via your WebSockets is far more manageable.
If you want to create something like WebTorrent, that works look at instant.io's Github. You'll need to set up a server and configure a turn server. WebRTC is like trying to configure a graphics card in 1992. Good luck.

How to extract title, image from others' blog posts and publish on own site

I'm planning to build a site where I can share my handpicked curated contents and I couldn't wrap my head around the basic idea of getting those data fed into my site without going through API.
I first thought maybe I should inspect the source HTML of the page I want to embed on my site and access it with something like $('div.post').find('img').attr('src').
But I can't imagine myself doing that every time so I guess there must be a better way.
It's what Google+ does with their post. Once you add a url link, after a second it pulls featured image and some text snippet from the linked page.

Many sites use the Open graph protocol to get the meta-title, meta-description, image etc. for any url.
For example open: view-source:https://blog.kissmetrics.com/open-graph-meta-tags/ and search for "Open Graph Protocol Meta".
They are contained in the page source. You will have to send a request to the URL you want to crawl from, and read the appropriate meta tags through Regular Expr / HTML Parsers.

You can't make this with javascript. You need a server-side script that downloads the page you need and then parse it with a DOM parser.
With PHP you can get the content of one URL with cURL.
See more:
http://php.net/manual/es/book.curl.php

how to secure img src path when user clicks on view source using javascript?

How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.

You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}

This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.

dynamic link URL contains location of wav file to be played by soundmanager2

On my page: http://s3.amazonaws.com/gccweb/h1/test1.html we see soundmanger2 being used to create a simple play and download page.
My conferencing server that creates and hosts the recordings - also sends out an email with a reference to the file. My email template on the server allows me to create a link that references the location URL of the audio file.
Q: How can I have the reference in the address bar?
Do I need a new js file?
Can I add some code to the soundmanager2.js ?
Can I add code to the player page only?

Alright, if I understand correctly you can use:
var params = window.location.href.split('?');
to fetch the address bar information via javascript.
You still need to split this up into some sort of key-value array and run some if statements if there actually is a valid parameter etc..
Once you have the name of the file, you can simply use:
soundManager.setup({
url: 'swf/'
});
var mySound = soundManager.createSound({
id: '1',
url: urlToTheSoundFile,
volume: 80,
autoPlay: false,
});
to load the file into soundmanager. You can of course set autoPlay to true, or apply any other kind of visual graphics to it.
With soundmanager the soundfile does not have to be hosted on the server you are hosting the website on, you do however need to have access to the file. If you have a server with the file (www.iAmASoundServer.com/getSound.php?id=mySound.wav) you just need to parse this url into soundmanager. If you want people to be able to download this sound, again, all you have to do is put the url in an "a" tag (href="www.iAmASoundServer.com/getSound.php?id=mySound.wav").
As for your 3 questions:
Do I need a new js file?
You can use the standard soundmanager2.js file, this has hooks you can use on every imaginable event.
Can I add some code to the soundmanager2.js ?
Yes of course you can, though you probably wont need to. If you look at the documentation you will understand..
Can I add code to the player page only?
You can add code wherever you want, though it is advised to put all javascript related things at the bottom of your website.
Let me know if this answers your questions. I've got a feeling that this still doesn't quite answer your question.

HTML / Javascript setting image source dynamically and getting extra data?

I'd like to be able to set an image source from a server but also have it return extra data relating to another server-side action.
I'll try to explain.
In my index.htm file I have the following in the <body> ...
<div id="BasicDemo" >
<img id="nscreen" />
</div>
<script type="text/javascript">setImageSource()</script>
The setImageSource() simply does this...
$("#nscreen").attr("src", "/control?size=800x480");
I'm not an experienced HTML coder but I'm experienced enough at coding in general to understand that the above is an implicit HTTP GET request against server-side code in order to request an image which is used to set the <img> source.
What I'd like to do in psuedo-code is...
var someResponse = getImageAndExtra("/control?size=800x480");
$("#nscreen").attr("src", someResponse.imagePath);
var extraData = someResponse.extra;
I'm not directly in control of the server-side code but I know the developer and will be working on this.
What sort of call can I use to request both an image source as well as extra data and still be able to set the "src" attribute? Also at the other end, how would the server-side code construct the response?
I can't help feeling I'm missing something really simple here.

Your server code would have to return a web page independent of the image.
This web page would contain the path to the actual image, and then (independently), your additional data.
One very common format for this type of communication is JSON. The server constructs a page which looks like this:
{extra: "some-data", image: "/path/to/real/image"}
Just that, no HTML, and it sets the Content-Type of the response to application/x-json instead of text/html.
Then the JS does an XMLHTTPRequest to fetch the above JSON, parses the response, and then sets the src attribute.
There is no location to which you could set the image source which would let you extract additional info (barring image steganography or header tricks or other dirty dealings).