• 使用js调用摄像头拍照


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

    代码

    <!DOCTYPE html>
    <html lang="ZH-CN">
    <head>
      <meta charset="utf-8">
      <title>web RTC 测试</title>
      <style>
        .booth {
    	  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演示;

    特别说明

    1. 有些浏览器可能不支持此功能
    2. 必须通过服务器打开页面,通过files://打开无效
    3. 如果通过远程服务器打开则必须是https协议, http协议也无法使用
  • 相关阅读:
    video标签
    正则表达式
    BOM和DOM
    css样式属性
    js简介
    格式与布局
    CSS样式表
    表单
    redis学习心得之三-【java操作redis】
    redis学习心得之二【redis主从配置】
  • 原文地址:https://www.cnblogs.com/scarecrowlxb/p/6804747.html
Copyright © 2020-2023  润新知