HTML5 控制摄像头和录制视频

发布于 2018-06-11 21:50:28 字数 2247 浏览 2202 评论 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 风格的图像过滤器。 但就目前而言,只需访问摄像机在我们的浏览器中感动着我们英里之遥。有乐趣你的浏览器中拍摄图像。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。