capture.js
(function() { //拍摄照片的宽度和高度。我们将设置 //宽度为此处定义的值，但高度为 //根据输入流的纵横比计算。 var width = 320; //我们将把照片宽度调整为 var height = 0; //这将根据输入流计算 //| streaming指示我们当前是否正在进行流式处理 //摄像机的视频。显然，我们从错误开始。所以当我们还没有拍照的时候，肯定是没有流的，所以是错误开始 var streaming = false; //我们需要配置或控制的各种HTML元素。这些将由startup（）函数设置。 var video = null; var canvas = null; var photo = null; var startbutton = null; function startup() { video = document.getElementById('video'); canvas = document.getElementById('canvas'); photo = document.getElementById('photo'); startbutton = document.getElementById('startbutton'); navigator.mediaDevices.getUserMedia({video: true, audio: false}) .then(function(stream) { video.srcObject = stream; video.play(); }) /* .catch(function(err) { console.log("An error occurred: " + err); });*/ video.addEventListener('canplay', function(ev){ if (!streaming) { height = video.videoHeight / (video.videoWidth/width); //火狐当前有一个错误，无法读取高度，因此如果发生这种情况，我们将进行假设。 if (isNaN(height)) { height = width / (4/3); } video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false); startbutton.addEventListener('click', function(ev){ takepicture(); ev.preventDefault(); }, false); clearphoto(); } //在照片中填充一个指示，捕获。就是我们的拍照按钮 function clearphoto() { var context = canvas.getContext('2d'); context.fillStyle = "#AAA"; context.fillRect(0, 0, canvas.width, canvas.height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); } //通过获取视频的当前内容来捕获照片 //并将其绘制成画布，然后将其转换为PNG //格式化数据URL。在屏幕外的画布上绘制，然后 //将其绘制到屏幕上，我们可以更改其大小和/或应用 //绘制前的其他更改。 function takepicture() { var context = canvas.getContext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); } else { clearphoto(); } } //设置事件侦听器以运行启动过程 //加载完成后。 window.addEventListener('load', startup, false); })();main.css
@CHARSET "UTF-8"; #video { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #photo { border: 1px solid black; box-shadow: 2px 2px 3px black; width:320px; height:240px; } #canvas { display:none; } .camera { width: 340px; display:inline-block; } .output { width: 340px; display:inline-block; } #startbutton { display:block; position:relative; margin-left:auto; margin-right:auto; bottom:32px; background-color: rgba(0, 150, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2); font-size: 14px; font-family: "Lucida Grande", "Arial", sans-serif; color: rgba(255, 255, 255, 1.0); } .contentarea { font-size: 16px; font-family: "Lucida Grande", "Arial", sans-serif; width: 760px; }manifest.json
{ "name": "WebRTC Still Photo Sample", "docsUrl": "https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos", "description": "Uses WebRTC's getUserMedia() API, a <video> element, and a <canvas> to capture still photos using your webcam." }index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>WebRTC：静态照片捕获演示</title> <meta charset='utf-8'> <link rel="stylesheet" href="main.css" type="text/css" media="all"> <script src="capture.js"> </script> </head> <body> <div class="contentarea"> <h1>静态照片捕获演示</h1> <p>此示例演示如何使用 您的内置摄像头，从该流中获取图像，然后创建 使用该图像的PNG。</p> <div class="camera"> <video id="video">视频流不可用</video> <button id="startbutton">拍照</button> </div> <canvas id="canvas"> </canvas> <div class="output"> <img id="photo" alt="屏幕捕获将显示在此框中。"> </div> <p> Visit our article <a href="https://me.csdn.net/qq_43122746"> 使用WebRTC拍摄静态照片</a> 了解更多有关技术的信息 </p> </div> </body> </html>进入页面调取摄像头，点击允许后可以在左边方框中看到实时的摄像头拍摄 点击拍照获取实时静态照片
保存功能还在实现中。。。
