html 5 摄像头控件_带有HTML5的摄像头和视频控件

html 5 摄像头控件

The method for getting access to camera was initially navigator.getUserMedianavigator.mediaDevices.getUserMedia.

用于访问摄像机的方法最初是navigator.getUserMedianavigator.mediaDevices.getUserMedia 。

Browser vendors have recently ruled that getUserMedia should only work on https: protocol. You'll need a SSL certificate for this API to work.

浏览器供应商最近裁定， getUserMedia仅应在https:协议上工作。 您需要SSL证书才能使用此API。

Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API, providing developers access to the user's camera.  Let me show you how to get simple camera access from within your browser!

移动和台式设备上的客户端API正在Swift提供相同的API。 当然，我们的移动设备首先可以访问其中一些API，但是这些API正在慢慢地进入台式机。 这些API之一是getUserMedia API，可为开发人员提供对用户相机的访问权限。 让我向您展示如何从浏览器中轻松访问相机！

View Demo 观看演示

HTML (The HTML)

Please read my note about the HTML structure below:

请阅读以下有关HTML结构的注释：

<!--
	Ideally these elements aren't created until it's confirmed that the 
	client supports video/camera, but for the sake of illustrating the 
	elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

Each of these elements should be created once confirmation of camera support is confirmed, but for the sake of this tutorial, I wanted to show you what the elements look like with basic HTML.  Do note that the dimensions we're working with are 640x480.

在确认对相机的支持得到确认后，应该创建这些元素中的每一个，但是为了本教程的缘故，我想向您展示基本HTML元素的外观。 请注意，我们正在使用的尺寸为640x480。

JavaScript (The JavaScript)

Since the HTML elements above are already created, the JavaScript portion will look smaller than you think:

由于上面HTML元素已经创建，因此JavaScript部分看起来比您想象的要小：

// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}

/* Legacy code below: getUserMedia 
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.srcObject = stream;
        video.play();
    }, errBack);
}
*/

Once it's been established that the browser supports navigator.mediaDevices.getUserMedia, a simple method sets the video element's src to the user's live camera/webcam.  Calling the play method of the video then starts the element's live streaming video connection.  That's all that's required to connect your camera to the browser!

一旦确定浏览器支持navigator.mediaDevices.getUserMedia ，一个简单的方法会将video元素的src设置为用户的实时摄像头/网络摄像头。 然后，调用视频的play方法即可启动该元素的实时流视频连接。 这就是将相机连接到浏览器所需的全部！

Taking a photo is only marginally more difficult.  Simply add a click listener to a generic button and and draw an image from video!

拍照仅稍微困难一点。 只需将单击侦听器添加到通用按钮，然后从视频绘制图像！

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});

Of course you could add some sexy image filters and make a billion dollars...but I'll save that for another post.  At minimum you could convert the canvas snapshot to an image though!  I'll talk about canvas image filters in the future...

当然，您可以添加一些性感的图像滤镜并获得10亿美元的收入……但我将其保存在另一篇文章中。 至少您可以将画布快照转换为图像 ！ 以后我会谈论画布图像滤镜...

View Demo 观看演示

Being able to access the camera within the browser without using third party software is an incredible advancement.  Paired with canvas and a bit of JavaScript, the camera has become quickly and easily accessible.  Not only it the camera accessible, but since canvas is ultra-flexible, we'll be able to add sexy Instagram-style image filters in the future.  For now, however, simply accessing the camera in our browser moves us miles ahead.  Have fun taking images within your browser!

无需使用第三方软件即可在浏览器中访问相机的功能令人难以置信。 与画布和一些JavaScript结合使用，即可轻松便捷地使用摄像机。 不仅可以使用相机，而且由于画布具有超柔韧性，我们将来将能够添加Instagram风格的性感图像滤镜。 但是，目前，仅在浏览器中访问摄像头就可以使我们前进数英里。 在浏览器中拍摄图像，玩得开心！

Post inspired by I see you getUserMedia; provided a great starting point for this post.

帖子灵感来自我，看到你getUserMedia ; 为这篇文章提供了一个很好的起点。

翻译自: https://davidwalsh.name/browser-camera

html 5 摄像头控件