My OperaNative webcam support and orientation events - technology preview
By Rich Tibbettrichtr. Wednesday, March 23, 2011 10:01:32 AM
---
Last week we wrote a blog post discussing our internal prototyping of web camera streaming in the browser. On the very same day, the proposed standard interface on which that was built changed considerably.
This week we are pleased to announce the release an updated preview build of Opera Mobile for Android enabling web developers to access and interact natively with a device's webcam via JavaScript. This build has been entirely re-based on the new standards proposal introduced last week so it's goodbye to the <device> element and a big warm hello to the getUserMedia JavaScript API.
In addition to web camera streaming, Opera is also previewing support for the draft W3C Orientation Events specification. These capabilities open up some exciting possibilities for the future of the web itself.
To get started, grab the Android build and follow the installation instructions below:
- Go to the Android settings and ensure that "Unknown sources" (Allow install of non-Market application) is allowed.
- Download the build (.apk) from the provided location. Alternatively, you can download the build with a desktop browser, save it on a device, and install it using any available file manager.
- To launch this technology preview, find the installed Android application called "Opera Mobile - Device/Orientation demo".
To navigate back to this blog post, we added a camera icon on the Opera Speed Dial that will direct you back to this URL as a jumping off point for exploring more demos.
This build will not replace the standard version of Opera Mobile installed on your Android device. Furthermore, this build supports remote debugging via Opera Dragonfly; please refer to Dev.Opera for more instructions.
Interacting with the cameraDevelopers are able to request a real-time video stream of the device's back-facing camera. The resulting camera stream may be displayed in any web page by assigning the success callback's return parameter to a HTML <video> element.
The simple example below demonstrates how this technology can be used to display the web camera in a web page:
<!DOCTYPE html>
<h1>Simple web camera display demo</h1>
<video autoplay></video>
<script type="text/javascript">
var video = document.getElementsByTagName('video')[0],
heading = document.getElementsByTagName('h1')[0];
if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback( stream ) {
video.src = stream;
}
function errorCallback( error ) {
heading.textContent =
"An error occurred: [CODE " + error.code + "]";
}
} else {
heading.textContent =
"Native web camera streaming is not supported in this browser!";
}
</script>
(live demo)
The code above will render as follows:
More simple live web camera demos are available here.
Opera's implementationWe have simplified the proposed GeneratedStream interface by not implementing its proposed methods and attributes. The Stream object returned in the success callback should be assigned directly to a video element's src attribute. When a video element's src parameter has been assigned a Stream object and that attribute is subsequently queried the attribute returns the reserved, though unresolvable, URI of about:streamurl.
We are currently in the process of considering different user experiences to ensure that the user can opt-in and authorize the sharing of their web camera with a web page. In the absence of this user opt-in functionality, we have currently chosen to disable access to any Stream pixel data via a HTML <canvas> element in this preview build. Developers can, however, override this restriction for prototyping purposes by entering opera:config in the URL bar, selecting 'Security Prefs' and then checking the option to 'Allow Camera to Canvas Copy' followed by 'Save'.
Interacting with device orientationHere's an example of using orientation events to create a simple compass:
<!DOCTYPE html>
<h1>Simple compass demo</h1>
<canvas id="arrow" width="480" height="480"></canvas>
<p id='orient'></p>
<script type="text/javascript">
function update(evt){
var arrow = document.getElementById('arrow');
var ctx = arrow.getContext('2d');
ctx.clearRect(0,0,480,480);
alpha = Math.PI *(evt.alpha/180.0);
var x1 = 240 + Math.round(240.0 * Math.sin(alpha));
var y1 = 240 - Math.round(240.0 * Math.cos(alpha));
var x2 = 240 + Math.round(10.0 * Math.sin(alpha - Math.PI/2));
var y2 = 240 - Math.round(10.0 * Math.cos(alpha - Math.PI/2));
var x3 = 240 + Math.round(10.0 * Math.sin(alpha + Math.PI/2));
var y3 = 240 - Math.round(10.0 * Math.cos(alpha + Math.PI/2));
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.fill();
var orient = document.getElementById('orient');
orient.innerHTML = "(" + evt.alpha + ", " + evt.beta + ", " + evt.gamma + ")";
}
window.addEventListener('deviceorientation', update, true);
</script>
(live demo)
The code above will render as follows:
We have also created a few other live orientation demos that you should check out.
Next stepsIt is likely that the standards around web camera access and streaming (and to a lesser extent, orientation events) will continue to evolve before this technology can become ubiquitous on the web. That's what happens when you're on the bleeding edge of technology. It's where we like to be.
We plan to:
- Add support for other major mobile and desktop platforms.
- Continue to actively participate in the related standards process to ensure this functionality becomes ubiquitous across the whole web and available in all browsers and web runtimes.
- Support microphone streams and allow assignment of those streams to
- Build user interfaces, both on desktop and mobile, that enable the user to explicitly opt-in to web camera sharing and opt-out or modify their web camera sharing once initial authorization has been provided to a web page.
- Continue prototyping towards enabling peer-to-peer audio and video communications in open web technologies.
- Prototype on how we can expose other aspects of the local device (e.g. mounted file systems) to end users in a privacy-secure way.
Our current prototyping demonstrates one well-known method for web camera access although the methods used to access device functionality (and to a lesser extent, orientation events) *will* change significantly before they are adopted as ubiquitous web standards.
Disclaimer: This build is of pre-production quality and, therefore, might contain defects including, but not limited to, instabilities and crashes. In fact, it may not work at all. The features included in this build might be different from any final standards implementation.
Give us your feedback in the comments below. We look forward to hearing about the great demos and services you come up with!
artyname # Wednesday, March 23, 2011 2:48:29 PM
Martin KadlecBS-Harou # Wednesday, March 23, 2011 3:16:37 PM
Originally posted by artyname:
Because this code is not about optimization
Martin KadlecBS-Harou # Wednesday, March 23, 2011 3:30:03 PM
Cutting Spoonhellspork # Wednesday, March 23, 2011 8:09:42 PM
SKYnv # Thursday, March 24, 2011 10:16:03 AM
artyname # Thursday, March 24, 2011 12:05:03 PM
I know, but with querySelector that code could be educational to thousands of people who don't know any good yet. Some are even using getElementsByTagName('body')[0] instead of document.body : )
Drag0ndrag0n # Tuesday, March 29, 2011 8:54:12 AM
Chirpie # Tuesday, March 29, 2011 1:22:40 PM
Originally posted by anjanesh:
Because it's an experiment, and because mobile phones usually have cameras and device orientation, while laptops and desktops don't?Nothing is restricted to mobile devices alone. It's just that it is being tried out there first. Just like all the things desktop got before it was added to the mobile versions.
Lewis Motenlewismoten # Saturday, April 30, 2011 1:29:23 PM
Danlitius # Friday, June 10, 2011 11:49:43 PM
Nilesh Nayaknileshsapna # Monday, July 4, 2011 2:12:23 PM
We managed to get this to save still photos of the video via websockets or posting the form via Ajax. The question is that can we stream this webcam video via websockets to a server.
Any answer will be helpful.
Nilesh Nayaknileshsapna # Monday, July 4, 2011 2:13:48 PM
Kyriakos Brastianoskyriakosbrastianos # Monday, July 4, 2011 11:13:41 PM
Nilesh Nayaknileshsapna # Monday, August 1, 2011 6:20:52 AM
We managed to get image capture and successful transfer to a web image gallery on Opera on Android. We haven't used websockets here as we couldn't find a good enterprise socket server. The images are stored in SQLite till the point that there is internet access available. Have a look at the details on html5.sapnagroup.com
Constantine Vesnac69 # Friday, August 26, 2011 6:28:30 AM
With first draft of WebRTC spec published - is Opera proving its own feedback on the subject ? Because, neither in editors' list, nor in the mail discussion - there are no visible opera reps ..
Rich Tibbettrichtr # Friday, September 9, 2011 9:25:45 AM
@Nilesh, @Kyriakos Opera does not discuss upcoming releases but I'd recommend that you stay tuned.
James Mortensenjmort253 # Wednesday, September 21, 2011 9:20:30 PM
I tried running the basic demo on my Motorola Droid. The web page loads, but instead of seeing video my camera just makes a clicking sound.
Is there any more information that I can get you that can help you move forward on this? Perhaps logs from the Android DDMS Eclipse plugin?
Is there a specific place where I should report issues such as this?
Thank you,
James
Shwetank Dixitshwetankdixit # Wednesday, October 5, 2011 8:45:16 AM
nadavkav # Friday, October 14, 2011 3:02:05 PM
Looking foreword to see this on other browsers too.
chooseIslandsmen # Tuesday, November 29, 2011 9:04:01 AM
I got a question : Can we save the video stream as a video file using javascript and html5 technique? Please advise. Thanks.
Cutting Spoonhellspork # Tuesday, November 29, 2011 9:42:27 AM
The biggest problem is that Opera does not give FileAPI "Write" permissions to anything in the browser session, you'd probably need an Opera Unite application to take the data and store it on disk. I'm not sure if there is any audio capture for the camera at this time. So you would need to confirm the following:
1) Browser able to access local camera and microphone
2) Scripts permitted to act upon these objects
3) A method to COPY, COMPRESS, and SAVE the video/audio data
I am quite certain that not everything is available at this time.
chooseIslandsmen # Wednesday, November 30, 2011 12:27:20 AM
Originally posted by hellspork:
It seems like there is really not many things we can do at the moment, this new feature makes me jump in joy first but then pull me back to the ground once again. I am looking for the API that can : 1) Connect among browsers so we can really talk to each other. 2) Save the video stream into our local PC so we can share the video online after that. Also the quality of the image is not that good this one needs further improvement as well!Cutting Spoonhellspork # Monday, December 5, 2011 5:36:28 AM
gisendi # Wednesday, December 21, 2011 10:10:59 AM