Web Monetization Community

loading...
Cover image for DJ, put a record on
Web Monetized Multimedia

DJ, put a record on

Jussi Rytkönen
・2 min read

Web Monetized Multimedia project is at a stage where we have a public Github repository and documentation.

The library supports three types of media: video, audio and text. For each media there is a corresponding Web Component, which allow monetization with - or without - backend verification.

After importing the component in your Javascript code, simply add a HTML tag, with attributes defining media source and payment URL, e.g.:

<wmm-video src="/media/video.mp4" paymentUrl="$ilp.uphold.com/4m2d2Xn4EUyk"></wmm-video>
Enter fullscreen mode Exit fullscreen mode

By default, the media hosting backend will verify the payments and stream the media only when certain conditions are met. This is done by sending receipt verifications from the UI component to the /verifyReceipt path. The backend records account balances for each user and calculates the amount of payments made by the user, deducting the "amount" of media sent to the frontend.

The cost of media can be calculated in minutes or megabytes - or in words, in the case of text media. When the user account balance reaches zero, the user is notified about the error state with component. This includes instructions, like installing a wallet, or simply waiting for more payments to be made (in case of network latency issues).

Optionally there is a simpler component mode, that skips payment verification (and thus also accounting). In this mode, media can be downloaded from any URL even when the host doesn't support Web Monetization. The payments are still made if the user has a Web Monetization enabled wallet installed. E.g.:

<wmm-video skipVerification="true" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" paymentUrl="..."></wmm-video>
Enter fullscreen mode Exit fullscreen mode

The <wmm-audio> and <wmm-text> components use the same src and paymentUrl attributes. The only difference in the media component attributes, is that in the <wmm-text> the "simple mode" is implemented by passing the full text directly to the media attribute, instead of loading it from the backend.

See the documents for more detailed instructions. Time to press the play button!

Discussion (1)

Collapse
chrislarry profile image
Chris Lawrence

This is fantastic, ty! We will be highlighting libraries/codebases soon. Any ideas on how we could be better cross-pollinating work from grantees we are keen to hear.