Code Monkey home page Code Monkey logo

streamium's Introduction

Streamium

Decentralized trustless video streaming using bitcoin payment channels

Concept

Streamium is a fully decentralized paid video streaming application. It leverages various prior technologies like bitcoin and WebRTC to achieve trustless pay-as-you-go video streaming with no intermediaries.

Content creators offer their streaming services in exchange for bitcoins using a payment channel with the client, streaming a series of cost-free transactions with no counterparty risk.

Installation

To run Streamium, just serve the root directory using any web server. For example:

cd streamium/
bower install
npm install
node server.js &
node ssl_peerjs.js &

and then access it from any WebRTC-supporting browser:

https://localhost:8443/

How does it work

1. Channel creation

The user broadcasting creates a channel by specifying a name to use (this will be a unique identifier for the video stream). She needs to provide a payment address where the funds will eventually be sent to and the rate at which she expects the stream consumers to pay. She will receive a link to share with potential consumers of the stream.

2. Joining a channel

For consumer users, the web application will join the channel by opening a peer to peer connection to the provider. The screen will show the rate the provider is charging, the provider's public key, and a funding address.

3. Funding process

The consumer web application will generate a private key and show an address on screen so the user can fund the channel. After a transaction that adds funds to this address is detected, the payment channel is established by asking the server to sign the refund transaction and broadcasting the commitment transaction.

4. Video streaming

When the server receives the commitment transaction and is ready to start broadcasting, the transmission of video to that user will start. The user will periodically transmit transactions signed by him to the server (like signing checks that will not be cashed) where each transaction gradually increments the amount paid to the server. When the user stops paying, or the connection is lost, the server will stop the transmission and broadcast the last payment received.

Technology stack

Static web application

Streamium is a static HTML web application and thus requires no servers to run.

AngularJS

AngularJS was used for client-side application code (and there's no server-side code!)

WebRTC

WebRTC is a browser to browser communications protocol used to share video streams between clients and service providers. It allows sharing of data and media without central servers. We use PeerJS to manage WebRTC connections.

Bitcoin payment channels

Bitcoin is a p2p currency used for trustless payments. Bitcoin payment channels are used to establish a secure pay-as-you-go mechanism with no need for a third party.

License

Code released under the MIT license.

Copyright 2015 Streamium developers

streamium's People

Contributors

adlai avatar alcuadrado avatar batalles avatar bitstein avatar dawsbot avatar demibrener avatar eordano avatar esneider avatar fortefranco avatar kvnn avatar maraoz avatar rodrigouroz avatar yemel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

streamium's Issues

Attempted connection to http://192.168.0.7:9000/ from the web app fails

When I run Paystream like so:

sudo docker run -ti --expose=8000 dockerfile/nodejs-bower-gulp /bin/bash -c "git clone https://github.com/streamium/paystream.git; cd paystream/; yes | bower --force --silent --allow-root install; python -m SimpleHTTPServer"

and access the web app from http://$CONTAINER_IP:8000/app/ using Chrome 41.0.2267.0 dev (64-bit) on Ubuntu 14.04, I see the following errors in the Chrome web dev console:

GET http://172.17.0.11:8000/assets/images/background-images/1.jpg 404 (File not found)          jquery.js:5241
POST http://192.168.0.7:9000/lwjd5qra8257b9/testnameonetwothreee/kab4iumak1x4unmi/id?i=0 net::ERR_CONNECTION_TIMED_OUT          peer.min.js:1
we have an error                   provider.js:62
WebSocket connection to 'ws://192.168.0.7:9000/peerjs?key=lwjd5qra8257b9&id=testnameonetwothreee&token=kab4iumak1x4unmi' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT            peer.min.js:1

After the above messages appear in the console, the web page shows an error message, saying:

Channel name is taken, please pick a different one

Exception when initially loading site in Chrome:

Seen when loading streamium.io in Chrome 42:

Error: [$interpolate:interr] Can't interpolate: 
                              {{ usdHourToBtcSec(stream.rate) }} BTC/sec

bitcore.ErrorUnitInvalidRate: Invalid exchange rate: 0
http://errors.angularjs.org/1.2.28/$interpolate/interr?p0=%0A%20%20%20%20%2…0%20&p1=bitcore.ErrorUnitInvalidRate%3A%20Invalid%20exchange%20rate%3A%200
    at VALIDITY_STATE_PROPERTY (angular.js:78)
    at Object.$get.fn (angular.js:8921)
    at Scope.$get.Scope.$digest (angular.js:12642)
    at Scope.$get.Scope.$apply (angular.js:12915)
    at done (angular.js:8450)
    at completeRequest (angular.js:8664)
    at XMLHttpRequest.xhr.onreadystatechange (angular.js:8603)

Join links sometimes don't work

When trying to join a stream through a shared url, the screen gets frozen with a "connecting to [stream]" message. You need to open it on a private tab in order to work.

Status

Cool project. What is the current status? Does it work? What does the feature pipeline look like?

Thanks

'$0 Service Fees' accordion does not open again once is closed

In the web site's home page, when looking at the 'For Free. No Risks' section, if you close the '$0 Service Fees' accordion by opening another one, you are not able to open it again.

Note: the chrome's console shows a js error when clicking these accordions:
TypeError: undefined is not a function

After starting publishing, the link in "Share this link with your viewers:" is truncated

At the default zoom level, there are only 7 characters beyond the boiler plate URL for the share link. Given the ample amount of screen real-estate, you should probably show the whole thing.

You also may consider using the same widget that github does for copying the URL for repos to the clipboard. https://github.com/zeroclipboard/zeroclipboard. It is flash and it sucks but it allows you to automatically copy paste to the clipboard.

Consider passing constraints to getUserMedia

The getUserMedia constraints for chrome aren't that well documented and don't apply to firefox. That said, they can provide benefit and most people use Chrome anyway.

If you do use constraints, be sure to make them optional so that the call to getUserMedia doesn't fail in Firefox.

Here is an analysis of some of the constraints used in Hangouts:
https://webrtchacks.com/hangout-analysis-philipp-hancke/

Since you aren't doing a two way call, most of the constraints do not apply. Here are some you may want to consider. Again, try playing with these to see what you think.

Video related:
googLeakyBucket: true. This will pace the sending of data for sending large video frames. Important for not over utilizing the send bandwidth.
googNoiseReduction: true. This will denoise the captured video frames so that the vp8 encoder (the video encoder) can produce smaller frames. This will make for better looking video using fewer bits on the subscriber side.

Audio related:
googAutoGainControl: true, googAutoGainControl2: true: Normalizes the volume.
googNoiseSuppression: true, googgNoiseSuppression2: true: Reduces "noise"
googHighpassFilter: true: Tries to remove the muddiness from the audio

Unable to connect to stream in testnet

I set up a local stream and in a different window (it also happens in a different machine) I set up a client trying to connect. I pay the fee and I'm redirected to the client screen.

Then an error is thrown (as seen in the picture).

My config file:

var config = {
  network: 'testnet',
  appPrefix: '/testnet', // For testnet, set to '/testnet'
  otherNetwork: 'testnet',
  linkToOther: '/testnet',
  BLOCKCYPHERTX: 'https://api.blockcypher.com/v1/btc/'
    + 'test3' // For testnet, use: 'test3'
    + '/txs/',
... // the rest of the config as in MASTER

I'm using the same wallet for the streamer and the client, could that be a problem?

captura de pantalla 2015-05-26 a las 17 47 41

Implement 1-click "Start Streaming" feature

On main page, one click starts a $0/hr stream. Once in stream, allow streamer to choose price (if they don't want it to be free), name, preview icon, free preview period, etc.

UX: Confidence is too low; but accept user anyways?

When a transaction is built from a chain of unconfirmed transactions, confidence is really low. We should add an option to accept users even though it may be easily double-spendable or transaction won't be included in the next block.

screen shot 2015-05-25 at 2 19 51 pm

Serve up streamium.io via https instead of http

Not only does this make the user feel more secure since a financial transaction is involved, but it also will cause the browser to remember that the user allowed streamium.io access to the camera. This way the user doesn't have to click on the "Allow access to camera and microphone" every time they use the site.

Testnet "Your funds will run out in (NaN seconds)" and "{{ refund Tx }}" error on Android

broadcasting from Chrome on android and trying to view with Chrome on a PC:

  1. Open https://streamium.io/testnet/app/#/provider in chrome on android
  2. Enter stream name and a cashout address taken from a testnet mycelium wallet.
  3. Click on "Start Broadcasting".
  4. On PC go to https://streamium.io/testnet/#/join/
  5. Pay address listed on page.
  6. Enter a change address taken from the same testnet mycelium wallet used in step 2.
  7. Click on "Start". Get message: "Your funds will run out in (NaN seconds)"
  8. Click on "End stream".
  9. Resulting page: https://i.imgur.com/xjtRav9.png

[UX] Can't copy & paste the stream url to share.

It's pretty effing hard to copy the link.
I'm on a Mac.
I try to copy, and it won't work, even right clicking with a drop down menu on chrome.
I ended up copying the URL of my stream and changing a portion of the url to have the "join" part in it.

Home Page console error: bitcore.ErrorUnitInvalidRate: Invalid exchange rate: 0

Not sure if this is transient or not, but this error is hitting my console:

Resource interpreted as Script but transferred with MIME type text/html: "about:blank".(anonymous function) @ (index):62(anonymous function) @ (index):63
2angular.js:10126 Error: [$interpolate:interr] Can't interpolate:
{{ usdHourToBtcSec(stream.rate) }} BTC/sec

bitcore.ErrorUnitInvalidRate: Invalid exchange rate: 0
http://errors.angularjs.org/1.2.28/$interpolate/interr?p0=%0A%20%20%20%20%2…0%20&p1=bitcore.ErrorUnitInvalidRate%3A%20Invalid%20exchange%20rate%3A%200
at VALIDITY_STATE_PROPERTY (angular.js:78)
at Object.$get.fn (angular.js:8921)
at Scope.$get.Scope.$digest (angular.js:12642)
at Scope.$get.Scope.$apply (angular.js:12915)
at done (angular.js:8450)
at completeRequest (angular.js:8664)
at XMLHttpRequest.xhr.onreadystatechange (angular.js:8603)(anonymous function) @ angular.js:10126$get @ angular.js:7398$get.fn @ angular.js:8923$get.Scope.$digest @ angular.js:12642$get.Scope.$apply @ angular.js:12915done @ angular.js:8450completeRequest @ angular.js:8664xhr.onreadystatechange @ angular.js:8603
jquery.js:5221 Resource interpreted as Stylesheet but transferred with MIME type text/html: "about:blank".(anonymous function) @ jquery.js:5221n.fn.extend.domManip @ jquery.js:5414n.fn.extend.append @ jquery.js:5218(anonymous function) @ jquery.js:5333n.access @ jquery.js:3491n.fn.extend.html @ jquery.js:5300removePatch @ angular.js:2292link @ angular-route.js:901nodeLinkFn @ angular.js:6752compositeLinkFn @ angular.js:6146publicLinkFn @ angular.js:6042$get.boundTranscludeFn @ angular.js:6166controllersBoundTransclude @ angular.js:6773update @ angular-route.js:865$get.Scope.$broadcast @ angular.js:13093(anonymous function) @ angular-route.js:547deferred.promise.then.wrappedCallback @ angular.js:11682deferred.promise.then.wrappedCallback @ angular.js:11682(anonymous function) @ angular.js:11768$get.Scope.$eval @ angular.js:12811$get.Scope.$digest @ angular.js:12623$get.Scope.$apply @ angular.js:12915done @ angular.js:8450completeRequest @ angular.js:8664xhr.onreadystatechange @ angular.js:8603
mc-validate.js?_=1432237218610:3 Resource interpreted as Script but transferred with MIME type text/html: "about:blank".

Idea: Names for consumers

After we add a list of consumers, each client could optionally add a name so the provider can identify them as they join or leave the channel. Maybe this could be a handler for an eventual chat. Maybe add a photo. Maybe even a video feed back to the provider? That would allow better 1:1 use cases for learning (teacher-student relation).

This is in a wishlist, and not going to be addressed for the beta release. Maybe also we'd need some feedback from users and check if it's a requirement.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.