zoukankan      html  css  js  c++  java
  • 使用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协议也无法使用
  • 相关阅读:
    Can't remove netstandard folder from output path (.net standard)
    website项目的reference问题
    The type exists in both DLLs
    git常用配置
    Map dependencies with code maps
    How to check HTML version of any website
    Bootstrap UI 编辑器
    网上职位要求对照
    Use of implicitly declared global variable
    ResolveUrl in external JavaScript file in asp.net project
  • 原文地址:https://www.cnblogs.com/scarecrowlxb/p/6804747.html
Copyright © 2011-2022 走看看