使用js调用摄像头拍照

最新推荐文章于 2024-06-07 11:32:43 发布

weixin_30416497

最新推荐文章于 2024-06-07 11:32:43 发布

阅读量448

点赞数

原文链接：http://www.cnblogs.com/scarecrowlxb/p/6804747.html

版权

在一些浏览器里已经可以使用web api调用摄像头功能了。
基于此可以经行拍照摄像功能，网上找了些资料，然后实现了简单的拍照功能
演示地址 bingxl.cn/webrtc.html

代码

<!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>

demo演示;

特别说明

有些浏览器可能不支持此功能
必须通过服务器打开页面，通过files：//打开无效
如果通过远程服务器打开则必须是https协议， http协议也无法使用

转载于:https://www.cnblogs.com/scarecrowlxb/p/6804747.html

weixin_30416497

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用js调用摄像头拍照

在一些浏览器里已经可以使用web api调用摄像头功能了。基于此可以经行拍照摄像功能，网上找了些资料，然后实现了简单的拍照功能演示地址 bingxl.cn/webrtc.html代码<!DOCTYPE html><html lang="ZH-CN"><head> <meta charset="utf-8"> <title&g...
复制链接

扫一扫