使用Media Capture API

最新推荐文章于 2024-09-13 07:29:10 发布

dingshi7798

最新推荐文章于 2024-09-13 07:29:10 发布

阅读量409

点赞数

文章标签： php javascript 操作系统 ViewUI

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

使用网络摄像头捕获照片

今天，我想尝试由Web实时通信工作组和设备API工作组在W3C共同开发的Media Capture and Streams API 。一些开发人员可能将其简称为getUserMedia ，它是允许网页访问媒体捕获设备（例如网络摄像头和麦克风）的主要界面。

您可以在我的GitHub上找到该项目的源代码。此外，这是一个工作示例供您尝试。在最新的Windows 10预览版本中，Microsoft首次添加了对Microsoft Edge浏览器中的媒体捕获API的支持。这些代码大部分来自Edge开发团队在其测试驱动器站点上生产的Photo Capture示例。

对于那些想深入了解的人，Eric Bidelman 在HTML5岩石上有一篇很棒的文章，深入探讨了该API的历史。

加快速度

getUserMedia（）方法是理解Media Capture API的一个很好的起点。 getUserMedia（）调用将MediaStreamConstraints作为输入参数，该参数定义了捕获设备和捕获的媒体流的首选项和/或要求，例如摄像头FaceingMode，麦克风音量和视频分辨率。

通过MediaStreamConstraints，您还可以使用其设备ID选择特定的捕获设备，该设备ID可以从enumerateDevices（）方法派生。用户授予许可后，如果可以满足特定的MediaStreamConstraints，则getUserMedia（）调用将返回带有MediaSteam对象的Promise 。

所有这些都无需下载插件！在此示例中，我们将深入研究API，并在要捕获的视频和图像上创建一些简洁的过滤器。您的浏览器支持吗？从Chrome 21，Opera 18和Firefox 17开始，getUserMedia（）就已经存在了，现在可以在Edge中使用。

特征检测

特征检测是对navigator.getUserMedia是否存在的简单检查。检入每个浏览器是一个很大的项目，所以我建议您仅使用Modernizr进行检查。运作方式如下：

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

如本示例所示，如果没有Modernizr，则必须使用：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 
if (!navigator.getuserMedia) {
  Console.log('You are using a browser that does not support the Media Capture API');
}

影片播放器

在我们的HTML中，您可以在页面顶部看到视频标签。您会注意到它也设置为自动播放。否则，视频将永久冻结在第一帧。

<div class="view--video">
    <video id="videoTag" src="" autoplay muted class="view--video__video"></video>
</div>

当前没有媒体集的来源，但是我们将很快通过JavaScript注入该来源。

访问输入设备

这项新功能可以为开发人员带来许多新机遇，但也可能给最终用户带来安全风险，因此，启动此Web应用程序时首先要注意的是，它要求使用网络摄像头的权限。 getUserMedia接受一些参数。第一个对象指定您要访问的每种媒体的详细信息和要求。要访问网络摄像头，第一个参数应为{video：true}。此外，要同时使用麦克风和摄像头，请传递{video：true，audio：true}。

网络摄像头快照视图

支持多个网络摄像头

这才是真正有趣的地方。在此示例中，我们还将使用MediaDevices.enumeratedDevices方法。这将收集有关系统上可用的媒体输入/输出设备（例如麦克风，相机和扬声器）的信息。这是一个承诺，它将返回几个属性，包括设备的类型（类型），例如videoinput ， audioinput或audiooutput. 另外，它还可以生成具有唯一ID的字符串形式的唯一ID （视频输入：id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =） ，最后生成一个描述设备的标签，例如“FaceTime HD Camera (Built-in)” 。但是，这仍然是一项实验性技术，甚至尚未在CanIUse.com上列出。

在视频播放器上设置源

在initalizeVideoStream函数中，您可以看到我们正在从页面获取video标签并将其源设置为我们要传入的流。Stream本身是一个Blob。如果浏览器不支持srcObject属性，则会回退以从媒体流中创建URL并进行设置。

// initializeVideoStream() - Callback function when getUserMedia() returns successfully with a mediaStream object
    // 1. Set the mediaStream on the video tag
    // 2. Use 'srcObject' attribute to determine whether to use the standard-based API or the legacy version
 
    var initializeVideoStream = function(stream) {
        mediaStream = stream;
 
        var video = document.getElementById('videoTag');
        if (typeof (video.srcObject) !== 'undefined') {
            video.srcObject = mediaStream;
        }
        else {
            video.src = URL.createObjectURL(mediaStream);
        }
        if (webcamList.length > 1) {
            document.getElementById('switch').disabled = false;
        }
    };

应用CSS过滤器

我不太擅长拍照，所以我经常依靠Instagram为我提供的滤镜。但是，如果您可以将自己的滤镜应用于视频或静态图像该怎么办？好吧，你可以！我为视频供稿创建了一个简单的功能，使我可以实时应用CSS过滤器。该图像几乎是相同的。

// changeCssFiltersOnVid() - Cycle through CSS filters applied to the video stream
    // 1. Grab a reference to the video tag
    // 2. Keep the original CSS classes while still adding the filters
    // 3. Loop through all of the filters
 
    var changeCssFilterOnVid = function () {
        var el       = document.getElementById('videoTag');
        el.className = 'view--video__video';
 
        var effect = filters[index++ % filters.length]
        if (effect) {
            el.classList.add(effect);
            console.log(el.classList);
        }
    }

在课程的顶部，我有一个循环过滤器的数组。它们存储为字符串，对应于CSS中具有相同名称的类。

// CSS filters var index = 0; var filters = ['grayscale', 'sepia', 'blur', 'invert', 'brightness', 'contrast', ''];

在CSS中：

/* image * video filters */
.grayscale {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    filter: grayscale(1);
}
 
.sepia {
    -webkit-filter: sepia(1);
    -moz-filter: sepia(1);
    -ms-filter: sepia(1);
    filter: sepia(1);
}
 
.blur {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

您可以在Edge测试驱动器页面上查看有关此工作原理以及实时更改值的更多示例。

保存图像

仔细研究代码，您可能会看到一些其他您尚未立即熟悉的功能。吸引我的第一件事是navigator.msSaveBlob 。 Blob构造函数使您可以直接在客户端上轻松创建和操作Blob（基本上是文件）。 IE 10+支持该功能。

msSaveBlob允许您将此blob对象（在本例中为快照映像）保存到磁盘。它还具有同级方法msSaveOrOpenBlob ，该方法还允许您从浏览器中打开图像。

<p style="color:grey">// savePhoto() - Function invoked when user clicks on the canvas element
// 1. If msSaveBlob is supported, get the photo blob from the canvas and save the image file
// 2. Otherwise, set up the download attribute of the anchor element and download the image file</p>
 
    var savePhoto = function() {
        if (photoReady) {
            var canvas = document.getElementById('canvasTag');
            if (navigator.msSaveBlob) {
                var imgData = canvas.msToBlob('image/jpeg');
                navigator.msSaveBlob(imgData, 'myPhoto.jpg');
            }
            else {
                var imgData = canvas.toDataURL('image/jpeg');
                var link    = document.getElementById('saveImg');
                link.href   = imgData;
                link.download = 'myPhoto.jpg';
                link.click();
            }
            canvas.removeEventListener('click', savePhoto);
            document.getElementById('photoViewText').innerHTML = '';
            photoReady = false;
        }
    };

如果浏览器支持该方法，它将减少我们为保存图像而需要编写的代码量。

我们还能从这里去哪里？

这仅仅是个开始。我们还可以将WebGL与之配合使用，从而甚至可以应用morHeye过滤器，并在高度交互的环境中内置实时视频/音频提要。也许那将是我的下一个项目…
此外，您可以绑定到Web Audio API，以将调频应用于音频输出。来自Web Audio调谐器的此示例很好地说明了这一点。有些人更了解视觉学习，因此也请查看此Microsoft示例。

最后，随着移动浏览器继续采用更多这种技术，您将能够使用这些JavaScript API绑定到底层硬件，并使该功能在移动设备上运行，而不管平台如何。现在是成为Web开发人员的好时机，希望您在使用了此功能之后，会明白为什么我很高兴能成为其中的一员。

这是源代码和工作示例