bluemix u steam

© 2014 IBM Corporation

creating embedded video in web with Bluemix Ustream Service

Joseph Chang

Senior IT Specialist

IBM Software Group

Document number

https://ibm.biz/BdEzTZ


Go to Bluemix with this url:

Source: If applicable, describe source origin



Registration

3

Login to bluemix after finishing sign up.

If you haven’t get an id, click Sign up to create one.



Create an Node.js server

4

Move to catalog. Click SDK for Node.js to create a web server.



Give your web a name

5



View the default web site.

6

Now the web server is running. Click the routes url to lauch the default sample page.



View the sample web page

7

The sample page looks like this.

Back to bluemix dashboard.



Add UStream service

8

Click “Add A Service”.

Scroll down to find Ustream.Click it.



Create Ustream Sevice

9

Click CREATE



Load video to Ustream

10

Click Ustream service to lauch the management console of Ustream.

Click it to go ahead.



Manage Videos

11

Here is ustream for bluemix management console. Click Manage videos.



Manage Videos

12

You can view the description of your videos.Click Upload to add a new one.



Upload Videos

13

To load video is simple. Just select it from your windows file explore and drop it here !!



Upload Videos

14

Drop videos. Fill in description. Click Start Upload.

The progression is shown here.



Get the Embed HTML Script

15

The video is loaded. We want to embed this video in the we page. Click the Embed button.



Get the Embed HTML Script

16

Click Copy to clipboard button. Save it somewhere.

<iframe src="//www.ustream.tv/embed/recorded/54778005?wmode=direct" style="border: 0 none transparent;" frameborder="no" width="480" height="302"></iframe><br /><a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Live streaming video by Ustream</a>

Back to Bluemix dashboard to modify web page in Node.js



Edit the web page

17

Click the ADD GIT button. Follow the instruction to create the source code repository and launch the editor.



Edit the web page

18

Open the views/body.jade. The source code is show like this:



Insert the tag for embedded video

19

Copy and paste the code to here.<iframe src="//www.ustream.tv/embed/recorded/54778005?wmode=direct" style="border: 0 none transparent;" frameborder="no" width="480" height="302"></iframe><br /><a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Live streaming video by Ustream</a>



Check-in the code

20

Click Git Repository botton.



Check-in the code

21

1 Click Select All .

2 Enter comment. 3 Commit



Deploy the code

22

4 Click Push All


5 Click Build &Deploy


Deploy the code

23

Check the status of the build & deploy.

6 Click the link to view the web page



Deploy the code

24

The video is embedded in the web page now !!View the video at: https://myustream.mybluemix.net


bluemix u steam

Internet

ibm corporationdeploy

ibm corporationview

ibm corporationget

ibm corporationcheck

ibm corporationedit

ibm corporationinsert

ibm corporationgive

ibm corporationgo