The first implementation of the device and orientation events
The other day, we showed a prototype opera mobile for the andriod system with support for two elements of html, device and orientation events proposed by W3C.
In our first internal build, web developers could access the display and interaction with the user camera using native html tools.
Element device
')
Developers can request a live stream from a custom camera. As a result, this video stream can be displayed on any web page using the data attribute of the device element in the HTML video element.
The following simple example demonstrates our implementation of an HTML device element that can be used to display a webcam video stream on a web page:
this code will display the following
Our implementation.
At the moment, the element's change event is triggered when the page is loaded or when the dynamic HTML element device is created in the script and is used on the page. In the future, we want to consider various options for interacting with the user, this is necessary so that the user in the settings can allow or deny access to his webcam web page. Due to the lack of this functionality, we decided to disable access to any streams of pixel data through the html canvas element .
In addition to the limitations described above, it should be noted that we have simplified the interface offered by Stream by not implementing all the methods and attributes it offers. By doing this, we were still able to provide the basic functionality of the device element without having to open a URI. As shown above, the Stream object must be directly specified in the src attribute of the video element. When the src attribute of the video element is assigned, the Stream object and its attributes will request a reserve, despite the unavailability of the UI about: streamurl.
While we were experimenting with the device, we identified several problems with the use of this HTML element. Although in our first implementation in this assembly, the device element does not have its own interface, the element design still requires the presence of user interface components that will be inserted into a web page in order for the user to allow or deny access to his devices. From the experience of working with form elements, we know that this will not be the best option for designers, since they will be limited in the design of controls. We believe that the best option would be to allow the users themselves to create user interfaces and provide the necessary APIs with similar functionality. Therefore, we welcome and will continue to experiment with the latest changes presented in the WHATWG's HTML project.
Orientation events
This is a simple example of using orientation events to create a compass.
This code will display the following
Plans
We are still at the very beginning of a long journey associated with the universal support of web standards for browser access to the user's camera and microphone. In the near future, we plan to continue to develop and implement updates related to these technologies.
We are planning :
Our current prototype demonstrates one excellent method of accessing a webcam, although of course the methods used to access device functions (at least orientation events) will still change before they become approved web standards.
In the near future, the assembly should be released.
Please do not forget to express your opinions and leave comments!
In our first internal build, web developers could access the display and interaction with the user camera using native html tools.
Element device
')
Developers can request a live stream from a custom camera. As a result, this video stream can be displayed on any web page using the data attribute of the device element in the HTML video element.
The following simple example demonstrates our implementation of an HTML device element that can be used to display a webcam video stream on a web page:
<!DOCTYPE html> <h1>Simple web camera display demo</h1> <device type="media"/> <video autoplay></video> <script type="text/javascript"> var device = document.getElementsByTagName('device')[0], video = document.getElementsByTagName('video')[0]; device.addEventListener('change', function() { video.src = device.data; }, true); </script> this code will display the following
Our implementation.
At the moment, the element's change event is triggered when the page is loaded or when the dynamic HTML element device is created in the script and is used on the page. In the future, we want to consider various options for interacting with the user, this is necessary so that the user in the settings can allow or deny access to his webcam web page. Due to the lack of this functionality, we decided to disable access to any streams of pixel data through the html canvas element .
In addition to the limitations described above, it should be noted that we have simplified the interface offered by Stream by not implementing all the methods and attributes it offers. By doing this, we were still able to provide the basic functionality of the device element without having to open a URI. As shown above, the Stream object must be directly specified in the src attribute of the video element. When the src attribute of the video element is assigned, the Stream object and its attributes will request a reserve, despite the unavailability of the UI about: streamurl.
While we were experimenting with the device, we identified several problems with the use of this HTML element. Although in our first implementation in this assembly, the device element does not have its own interface, the element design still requires the presence of user interface components that will be inserted into a web page in order for the user to allow or deny access to his devices. From the experience of working with form elements, we know that this will not be the best option for designers, since they will be limited in the design of controls. We believe that the best option would be to allow the users themselves to create user interfaces and provide the necessary APIs with similar functionality. Therefore, we welcome and will continue to experiment with the latest changes presented in the WHATWG's HTML project.
Orientation events
This is a simple example of using orientation events to create a compass.
<!DOCTYPE html> <h1>Simple compass demo</h1> <canvas id="arrow" width="480" height="480"></canvas> <p id='orient'></p> <script type="text/javascript"> window.addEventListener('deviceorientation', function(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 + ")"; }, true); </script> This code will display the following
Plans
We are still at the very beginning of a long journey associated with the universal support of web standards for browser access to the user's camera and microphone. In the near future, we plan to continue to develop and implement updates related to these technologies.
We are planning :
- Release a public Android build for developers.
- Add support for other large mobile and desktop systems.
- Continue to actively participate in everything related to standards, so that you can provide this functionality throughout the web and in all browsers.
- Make microphone support and allow audio streaming in the audio element.
- Create a user interface for both mobile and desktop systems, which will allow you to optionally enable or disable access to your webcam web page.
- Experiment with authorized access to a custom webcam using open JavaScript APIs or as an element of an HTML device .
- Actively participate in the W3C RTC-Web Activity to provide webcam and microphone streaming data over the web.
- Experiment to open other types of local device access in a secure way (for example, file system mounting) for end users.
Our current prototype demonstrates one excellent method of accessing a webcam, although of course the methods used to access device functions (at least orientation events) will still change before they become approved web standards.
In the near future, the assembly should be released.
Please do not forget to express your opinions and leave comments!
Source: https://habr.com/ru/post/115573/
All Articles