计算机教程

当前位置:澳门娱乐场网址 > 计算机教程 > HTML5提供了一些非常强大的JavaScript和HTML澳门娱乐

HTML5提供了一些非常强大的JavaScript和HTML澳门娱乐

来源:http://www.ablakeforum.com 作者:澳门娱乐场网址 时间:2019-11-23 23:40

HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API,希望对你的开发工作有所帮助。

澳门娱乐场网址,点评:移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机

 

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。

  1.  全屏API(Fullscreen API)

HTML代码

 

下面的代码里我写了一部分注释,请阅读:

  该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。

代码如下:

 

<!--
理想情况下我们应该先判断你的设备上是否
有摄像头或相机,但简单起见,我们在这里直接
写出了HTML标记,而不是用JavaScript先判断
然后动态生成这些标记
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

 

在写出上面这些标记前应该判断用户的客户端是否有摄像头支持,但这里为了不那么麻烦,这里直接写出了这些HTML标记,需要注意的是我们这里使用的长宽是640×480。

//

JavaScript代码

 找到适合浏览器的全屏方法

因为我们是手工写出的HTML,所以下面的js代码会比你想象的要简单了很多。

 

代码如下:

function

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

 

一旦判断出用户浏览器支持getUserMedia ,下面就非常简单了,只需要将那个video元素的src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情!

launchFullScreen(element) {

拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器,将视频画面画到画布上。

 

代码如下:

  if(element.requestFullScreen)

// 触发拍照动作
document.getElementById("snap")
.addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});

 {

当然,你还可以在图片上加一些滤镜效果….

 

以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头,这不免有些复杂。现在只需要HTML5的画布技术和javaScript,我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头,而且是因为HTML5的画布技术及其强大,我们可以给图片上加入各种迷人的滤镜效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!

    element.requestFullScreen();

 

  }

else

 

if(element.mozRequestFullScreen)

 {

 

    element.mozRequestFullScreen();

 

  }

else

 

if(element.webkitRequestFullScreen)

 {

 

    element.webkitRequestFullScreen();

 

  }

 

}

 

  

 

//

 启动全屏模式

 

launchFullScreen(document.documentElement);

//

 the whole page

 

launchFullScreen(document.getElementById("videoElement"));

//

 any individual element

  教程 / 演示

 

  2.  页面可见性API(Page Visibility API)

 

  该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签的状态变化。

 

 

//

 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀

 

//

 since some browsers only offer vendor-prefixed support

 

var

 

hidden, state, visibilityChange; 

 

if

 

(typeof

 

document.hidden !== "undefined")

 {

 

  hidden

 = "hidden";

 

  visibilityChange

 = "visibilitychange";

 

  state

 = "visibilityState";

 

}

else

 

if 

(typeof

 

document.mozHidden !== "undefined")

 {

 

  hidden

 = "mozHidden";

 

  visibilityChange

 = "mozvisibilitychange";

 

  state

 = "mozVisibilityState";

 

}

else

 

if 

(typeof

 

document.msHidden !== "undefined")

 {

 

  hidden

 = "msHidden";

 

  visibilityChange

 = "msvisibilitychange";

 

  state

 = "msVisibilityState";

 

}

else

 

if 

(typeof

 

document.webkitHidden !== "undefined")

 {

 

  hidden

 = "webkitHidden";

 

  visibilityChange

 = "webkitvisibilitychange";

 

  state

 = "webkitVisibilityState";

 

}

 

  

 

//

 添加一个标题改变的监听器

 

document.addEventListener(visibilityChange,

function(e)

 {

 

  //

 开始或停止状态处理

 

},

false);

  教程 / 演示

 

  3.  getUserMedia API

 

  该API允许Web应用程序访问摄像头和麦克风,而无需使用插件。

本文由澳门娱乐场网址发布于计算机教程,转载请注明出处:HTML5提供了一些非常强大的JavaScript和HTML澳门娱乐

关键词: