HTML5 控制摄像头和录制视频 - 文章教程

HTML5 控制摄像头和录制视频

发布于 2018-06-11 字数 2752 浏览 1991 评论 0

在移动和桌面设备的客户端 API 正迅速提供相同的 API。 当然我们的移动设备已取得了一些这些 API 的第一次,但这些 API 正在慢慢地使他们的方式到桌面。 其中之一的 API 是 getUserMedia 的 API,为开发者提供访问用户的摄像头的方法,让我告诉你如何在你的浏览器中简单的调用摄像头。

HTML

请阅读我的备注下面的HTML结构:

<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 元素,JavaScript 的部分看起来比你想象的更小:

// 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,一个简单的方法将视频元素的 SRC 属性设置为用户的摄像头/网络摄像头对象。 调用视频的播放方法,然后颁布元素的实时视频连接。 这就是这一切需要将相机连接到浏览器的所有, 拍摄照片要麻烦一点。 只需添加一个点击侦听器添加到一个通用的按钮,并从视频中绘制图像。

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

当然你也可以添加一些好看的图像滤镜,如果能够在浏览器中访问摄像机,而无需使用第三方软件是一个令人难以置信的进步。 搭配 Canvas 和一点 JavaScript,相机已经成为快速,轻松地访问。

不仅是基于摄像头访问,但由于 Canvas 是超灵活,我们就可以在将来添加的 Instagram 风格的图像过滤器。 但就目前而言,只需访问摄像机在我们的浏览器中感动着我们英里之遥。有乐趣你的浏览器中拍摄图像。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0