getUserMedia: stream video to your BB10 WebWorks App

If you ever wanted to stream into your BlackBerry 10 WebWorks app, it's pretty simple to do. This tutorial will include a brief example showing how to do it (and include all the necessary code).

1. Prepare all the basic elements for your app; the config.xml, any custom scripts and styling, and get everything set up.

2. Add the needed features and elements to your config.xml:

<rim:permissions>
<rim:permit>use_camera</rim:permit>
</rim:permissions>

I also recommend you use the following to lock the orientation: 

<feature id="blackberry.app">
<param name="orientation" value="portrait" />
</feature>

3. Create the following video and canvas elements on the page you want to stream video to:

<canvas id="canvas"></canvas>
<video id="video" style="display: none;" autoplay></video>

You'll probably want to include the height/width of your canvas in that element.

4. Add the code!If you're using bbUI, you can add it to the onDomReady event. If you're not, the easiest way to use it is to use a DOMContentLoaded event listener: document.addEventListener('DOMContentLoaded', function() {})

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d')
navigator.webkitGetUserMedia({video: true}, function(stream) {
     video.src = window.URL.createObjectURL(stream);
     setInterval(function () {ctx.drawImage(video, 0, 0, 300, 500);}, 20);
});

That's it! 

And if you're on your BlackBerry 10 device, or using Google Chrome, here's the above code in action:

Click here to see the code in action

Shane Cridlebaugh

Co-founder and legal nay-sayer of OSBB. Owner of SCrApps Application Development, WebWorks aficionado, Open Source contributor. SCrid2000 on most blogs. I build awesome BlackBerry apps when I'm not doing legal work or spending time with my wife and two boys.


Follow me on Twitter - @GShaneC

Check out my apps in BlackBerry World

Website: SCrApps.org

Leave your comments

Post comment as a guest

0

People in this conversation

  • Guest (Duc Dau)

    Write stream video to your BB10 Cascades

    Like 0 Short URL:
  • Guest (mike)

    An excellent type of posting style you have used to create this great post. I appreciate you for the sharing of this great post. highly trained plumber baltimore

    Like 0 Short URL:
  • Guest (henry)

    Amazing stuff! After reading this information I want to say that you have shared best quality stuff in this post. Keep it up. pay per call companies

    Like 0 Short URL:
  • Guest (Jeannette G. Espinoza)

    Don't worry about your old property Hasan Ali Zaidi help you to sell your former estate. And if you have to buy a property then Hasan Ali Zaidi show you the best option.

    Like 0 Short URL:
  • Guest (Tony L. Hall)

    BlackBerry 10 device is now getting great responses with the new features update, thank you so much for sharing this post. Top essay writing service is the one which I prefer for my academic writings.

    Like 0 Short URL:
  • Guest (jhon)

    I just would like to say you have shared very quality stuff in your content. This was quite new information for me. Thanks for sharing this with me.. small packaging boxes

    Like 0 Short URL:
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top