Bluish Coder: tinyvid

A Short Introduction to Bitcoin - A Peer to Peer Cryptocurrency

2010-10-10T22:00:00+13:00

I recently added the ability to donate to TinyVid using bitcoins. The bitcoin website describes bitcoin as 'a peer-to-peer network based digital currency'.

Bitcoins are a 'virtual' currency. There are no physical coins involved. It's very similar to virtual currency in online games where people outside the game trade it for physical money.

The endpoints of a bitcoin transaction are known as an 'address'. When you want to send bitcoins to another person you ask them for an address and instruct your bitcoin client to send a number of coins there. When you want to receive bitcoins you generate an address using the client and pass the address on to the other party.

The process by which transactions are handled via the peer-to-peer network are described at the bitcoin website. There is also a good high level overview in this Bitcoin Electronic Currency article.

To get started with bitcoins, download the client or build from the source, available at the bitcoin website. Once running it will connect to the bitcoin network and proceed to download the existing blocks. This can take a few minutes as there's about 84,000 of them. Once that's done you can send and receive bitcoins.

You can receive some free bitcoins for testing from the bitcoin faucet. You'll need to create an address to receive the coins. From the bitcoin client choose 'New' to create an new receiving address. You can optionally give it a label so you can refer to it by name. Copy that new address to the clipboard and paste it into the facet website. When you click 'Get Some' you will receive a small number of coins.

The received coins will appear in the bitcoin client GUI almost immediately. The initial state will display as 'unconfirmed/0'. As more bitcoin nodes pick up the transaction the number will increase until eventually it says 'confirmed'. At this point you can use the coins with confidence. You can actually transfer and spend the coins while they are 'unconfirmed' but all transactions using them will also stay unconfirmed until the original one is confirmed.

If you want to send those coins elsewhere all you need to do is click 'Send Coins' in the client. Paste in a receiving address and an amount and click 'Send'.

How do you get coins in the first place? You need to find a merchant that's willing to trade you coins for something. Here are some merchants that will trade coins for cash or credit card payments:

bitcoinexchange.com (service no longer active). Buy and sell bitcoins using Euros via SMS/Phonepayment or bank transfer.
bitcoin4cash.com (service no longer active). This service offers bitcoins for cash sent through the mail. They also offer a service to pay for bitcoins via bank wire (iservice no longer active).
bitcoin2cash.com (service no longer active). Another service offering bitcoins for cash sent through the mail.

Online markets exist for trading bitcoins to and from various currencies. The most popular of these is probably mtgox.com (service no longer active). You deposit bitcoins or USD and can then buy and sell coins. You can withdraw USD or bitcoins. Currently bitcoins are trading at about 11 bitcoins per USD.

Bitcoin Watch has a list of the markets and the current exchange rates. It also has information on the state of the bitcoin network.

Bitcoins can be used in a number of places. Some I know about are listed below and the bitcoin trade (iservice no longer active) page lists more:

Cashcow Online Roulette (service no longer active). A roulette game written in Flash that uses bitcoins. Sign on with any credentials, deposit some coins, and once they're confirmed you can play roulette with them. This is a good example of how the sending and receiving of bitcoins can work.
Bidding Pond (service no longer active). An online auction site that uses bitcoins.
Minesweeper (service no longer active). A facebook app that uses bitcoins.
Bitcoin Sportsbook (service no longer active). Bet on sports events.
Qugelmatic Bookstore (service no longer active). Buy books through the 13th largest bookstore on eBay using bitcoins.
Auckland Bitcoin ATM - a bitcoin ATM available in Auckland, New Zealand.

Adding the ability to a website to send and receive payments using bitcoin is easy. The bitcoin client can run a JSON-RPC server that provides a full featured API. There are bindings for a number of different languages. I wrote and contributed a Factor bitcoin API recently. This is what I use on the tinyvid donation page to display the payment address and the current donation balance.

To receive via bitcoin you don't need to have the client running all the time. You can run the client, generate an address, publish that address to receive money and then close the client. At a later date you can run the client and it will catch up with the current state of the network and any money sent to your address will then be available.

You can even avoid running a bitcoin client completely. MyBitcoin (service no longer active) is a service that essentially runs one for you. You can create receiving addresses, send money, etc all from the website. They also provide a shopping cart interface to integrate payments into a website.

I'm interested in the approach of using bitcoin as a way to do micro-transactions and ease online payments and donations. I'll see how it works out on TinyVid and follow up at a future time with results.

Reading Ogg files with JavaScript

2009-06-05T15:09:00+12:00

On tinyvid.tv I do quite a bit of server side reading of Ogg files to get things like duration and bitrate information when serving information about the media. I wondered if it would be possible to do this sort of thing using JavaScript running in the browser.

The format of the Ogg container is defined in RFC 3533. The difficulty comes in reading binary data from JavaScript. The XMLHttpRequest object can be used to retrieve data via a URL from JavaScript in a page but processing the binary data in the Ogg file is problematic. The response returned by XMLHttpRequest assumes text or XML (in Firefox at least).

One way of handling binary data is described in this Mozilla Developer article. Trying this method out works in Firefox and I can download and read the data in the Ogg file.

Ideally I don't want to download the entire file. It might be a large video. I thought by handling the 'progress' event or ready state 3 (data received) I'd be able to look at the data currently retrieved. This does work but on each call to the 'responseText' attribute in these events Firefox copies its internal copy of the downloaded data into a JavaScript array. Doing this every time a portion of the file is downloaded results in major memory use and slow downs proving impractical for even small files.

I think the only reliable way to process the file in chunks is to use byte range requests and do multiple requests. Is there a more reliable way to do binary file reading via JavaScript using XMLHttpRequest? I'd like to be able to process the file in chunks using an Iteratee style approach.

I put up a rough quick demo of loading the first 100Kb of a video and displaying information from each Ogg packet. This probably works in Firefox only due to the workaround needed to read binary data. Click on the 'Go' button in the demo page. This will load transformers320.ogg and display the contents of the first Ogg physical page.

I decode the header packets for Theora and Vorbis. So the first page shown will show it is for a Theora stream with a given size and framerate. Clicking 'Next' will move on to the Next page. This is a Vorbis header with the rate and channel information. Clicking 'Next' again gets the comment header for the Theora stream. The demo reads the comments and displays them. The same for the Vorbis comment records. As you 'Next' through the file it displays the meaning of the granulepos for each page. It shows whether the Theora data is for a keyframe, what time position it is, etc.

Something like this could be used to read metadata from Ogg files, read subtitle information, show duration, etc. More interesting would be to implement a Theora and/or Vorbis decoder in JavaScript and see how it performs.

The main issues with doing this from JavaScript seem to be:

Handling binary data using XMLHttpRequest in a cross browser manner
Processing the file in chunks so the entire file does not need to be kept in memory
Files need to be hosted on the same domain as the page. tinyvid.tv adds the W3C Access Control headers so they can be accessed cross domain but it also hosts some files on Amazon S3 where these headers can't be added. As a result even tinyvid itself can't use XMLHttpRequest to read these files.

Third Party Comment Engines

2009-05-16T19:24:00+12:00

I've been playing around with different commenting engines on tinyvid.

Currently I use Intense Debate. An example of a video using this comment system is here. I like this service a lot. You can sign on with OpenId, the moderation tools are good and it seems to be generally reliable.

Intense Debate has support for plugins that anyone can write. Potentially I could write a video plugin that allowed embedding <video> into comments for example.

But it does have some issues. Sometimes comments don't seem to appear in the right order. I'll get an email that a comment was left, visit the page, and it's nowhere. Somehow it gets buried amongst other older comments. This started happening when I switched the ordering of the comments to have the most recent comment at the top.

Sometimes, depending on the content of your comment, the engine gets confused and the comment is scrambled. This seems to happen if I edit a comment that has a URL in it. It converts the URL to an HTML <a href/> and when editing and saving seems to reconvert, or do some weirdness with it. I've lost comments through this. Long comments can get silently truncated or trashed.

I set up tinyvid so I can easily add different comment engines and switch them on and off for individual videos for testing. I recently tried js-kit. An example of video with js-kit comments for testing is here.

I like js-kit too. I'm using their 'rating' widget and that seems to work nicely. The comments are ok too. You can sign in with OpenId. But there is some weirdness there. If I sign in using OpenId, leave a comment, then revisit the page later, then the comments don't appear. I have to delete the js-kit cookie to have them appear again.

There is a limit to the size of the comments, similar in size to Intense Debate's, of 3,000 characters. I suspect this limit isn't a problem in practice however.

There's a lot to like about js-kit, apart from the OpenId issue, but I need to try it out a bit more to see what other issues it has.

The last one I tried was Disqus. Example here. The Disqus site lets you register using OpenId. However you can't login to leave a comment using OpenId. You must login using a Disqus Id that gets assigned to you when you've registered.

When I registered using OpenId, then tried to login to leave a comment it requested a password. I had to go back to the Disqus site, change my profile to add a password. This seems sub-optimal since the point of me using OpenId is to avoid multiple passwords and accounts.

Disqus requires anonymous posters to leave a valid email address. I couldn't find a way to turn this option off. I'm sure this will just result in people leaving bogus email addresses.

One step of the Disqus setup requires adding a script block to the page that does document.write. This won't work on XHTML sites. And I dislike document.write usage in general. Thankfully this step appears optional. It's for converting marked up items in the page to a comment count.

After leaving a comment Disqus does a full page refresh. This unfortunately results in the video on the page restarting and reloading.

Apart from those issues Disqus seemed quite nice. Simple to set up and configurable.

So the end result is I'm not sure which is best. I'll play around with them for a bit more and get feedback. Are there any other's worth trying?

Another tinyvid.tv update

2009-04-10T04:05:00+12:00

I've made some more changes and fixes to tinyvid.tv since my last update.

I've updated to the latest Factor version, picking up some bug fixes and improvements to the libraries that I use.

The look and feel of the site has a new logo and banner thanks to Hans Schmucker. There have been some great contributions and bug reports in the feedback part of the site from Hans and others.

Support for converting Daily Motion videos is now in place. This gives three sites that can be converted from now. The other two being YouTube and Vimeo. In all cases it tries to convert the highest quality video available from the site.

A number of bugs in the file uploads have been fixed. There still are a few annoyances in this area, mainly to do with not very good error reporting when an upload fails. I'm still playing around with this area.

Previously logging in was done with Facebook Connect. Now I've added support for Open ID as well as Facebook and others.

This support was easily added using the great service from RPX Now. I implemented server support in Factor very easily and it gives a nice authentication login interface. If you don't want to associate an existing account with your tinyvid.tv videos you can use a service like myopenid.com to get an Open ID login and use that to authenticate with tinyvid.

I'm trialing the bookmarklet written by Hans Schmucker as the main player on the site. It provides visibility of the controls outside the video area so you can always see them without obscuring the video, has a volume control, and allows resizing the video. If you want to try the browser's standard controls you can click on the 'download' link on the video page to do that. I may switch between this player and the native controls based on feedback or if problems are found.

I added an 'embed snippet' on the video page so you can copy/paste it into your own pages to have the video embedded.

If you have any ideas for things to add or improve let me know.

Replacing video controls using a bookmarklet

2009-03-17T11:31:00+13:00

Update: Chris Blizzard has a neat screencast showing the bookmarklet and player replacement in action.

There's been some interesting demo's of <video> usage and manipulation discussed in the TinyVid Feedback comments section.

One user, hansschmucker, has done some nice demonstrations of what <video> can offer.

For example, this bookmarklet can take a TinyVid video and replace the player using the built in controls with one written in JavaScript provided by the bookmarklet. The new interface includes seeking, play, pause and volume control. It looks very nice.

To use the bookmarket, visit the bookmarklet page, click on the button that appears there and bookmark the resulting page. Next visit a TinyVid video and visit the bookmarklet. The built in player will be replaced by the new one. This will also work on many pages that use video using the built in controls, for example this transparency camp video.

This example show's it's possible for users to create and customize their own video players and use it on sites of their choice which is pretty nice.

hansschmucker also provided some demo's of using <video> with <canvas> that allow you to view a video in 3D using red/cyan glasses. I've copied his comment from the feedback page below:

Using VIDEO as data source for 3D

I just wrote a little demo to demonstrate how powerful VIDEO elements can be as data source: This little script (it's 20 lines for god's sake) uses a video (which was also produced via JS by the way, thanks to Radiohead's choice of using simple CSV for the data, the power of Canvas and a bit of base64 decoding) to offset pixels in a randomly generated noise map, saving the original map as red and the altered image as red/blue.

You just have to get out your red/cyan glasses and you'll be able to enjoy the video in 3D. Lots more could be done with proper optimization (in fact, the whole thing may be done as a set of SVG filters) and just a little more attention to detail (random noise is possibly the worst thing you can use for a map), but it's still amazing how easily you can create something amazong with VIDEO. ... Two more variants: uses a prerendered noise (looks much better) and warps the source image itself which probably makes most sense here.

tinyvid.tv updates

2009-03-07T15:35:00+13:00

I did some minor tweaks to tinyvid.tv recently. I added the ability to add comments to video pages, and add feedback on the site. This uses Intense Debate, a third party commenting engine.

On the video front I added a page to return a random video from those available. The video pages themselves show the duration, download progress and current playback position if the browser supports the relevant events. These should work in the latest Firefox nightlies, maybe with the exception of 'download progress'. The latter works well with the patch from bug 464376 applied. That bug should be resolved soon - it just needs tests written and handle the case of local files (those not served over HTTP).

File uploads are not yet supported. For uploads I imagine I will need to work out a way of moderating/screening the uploaded videos. Even without this functionality the site still has almost 200 videos available for testing the HTML 5 <video> element.

User Authentication - OpenID and Facebook

2009-02-27T13:30:00+13:00

I'm still looking at the different options for tinyid to handle registration and authentication of users. My recent change added logging in using your Facebook account using Facebook Connect. Another option I'm considering is OpenID.

There's a good blog post comparing the Facebook vs the OpenID stack. The same weblog has a post on using OpenID in a popup without leaving the page, similar to how Facebook Connect does its magic. You can see a demo of this concept in action.