在一些浏览器里已经可以使用web api调用摄像头功能了。
基于此可以经行拍照摄像功能，网上找了些资料，然后实现了简单的拍照功能
演示地址 [url]https://bingxl.cn/webrtc.html[/url]- <!DOCTYPE html>
- <html lang="ZH-CN">
- <head>
- <meta charset="utf-8">
- <title>web RTC 测试</title>
- <style>
- .booth {
- width:400px;
-
- background:#ccc;
- border: 10px solid #ddd;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <div class="booth">
- <video id="video" width="400" height="300"></video>
- <button id='tack'> snap shot</button>
- <canvas id='canvas' width='400' height='300'></canvas>
- <img id='img' src=''>
- </div>
-
-
- <script>
- var video = document.getElementById('video'),
- canvas = document.getElementById('canvas'),
- snap = document.getElementById('tack'),
- img = document.getElementById('img'),
- vendorUrl = window.URL || window.webkitURL;
-
- //媒体对象
- navigator.getMedia = navigator.getUserMedia ||
- navagator.webkitGetUserMedia ||
- navigator.mozGetUserMedia ||
- navigator.msGetUserMedia;
- navigator.getMedia({
- video: true, //使用摄像头对象
- audio: false //不适用音频
- }, function(strem){
- console.log(strem);
- video.src = vendorUrl.createObjectURL(strem);
- video.play();
- }, function(error) {
- //error.code
- console.log(error);
- });
- snap.addEventListener('click', function(){
-
- //绘制canvas图形
- canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
-
- //把canvas图像转为img图片
- img.src = canvas.toDataURL("image/png");
-
- })
- </script>
- </body>
- </html>
特别说明 - 有些浏览器可能不支持此功能
- 必须通过服务器打开页面，通过files：//打开无效
- 如果通过远程服务器打开则必须是https协议， http协议也无法使用
此博客出自稻草人LXB，转载请注明原文地址
博客地址：[url]http://www.cnblogs.com/scarecrowlxb/[/url]
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
