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

Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top