使用html5绘图技术事项调用摄像头拍照;

 在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5;

  以下是HTML代码

<video id="video" width="640" height="480" autoplay></video>   <!--这一行是调用摄像头之后呈现的画面-->
<button id="snap">Snap Photo</button>   <!--拍照按钮-->
<canvas id="canvas" width="640" height="480"></canvas><!--这一行是拍照之后呈现在网页上的画面-->

  以下是JavaScript代码

var aVideo=document.getElementById(‘video‘);
		var aCanvas=document.getElementById(‘canvas‘);
		var ctx=aCanvas.getContext(‘2d‘);

		navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
      	navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息

		function gotStream(stream) {
			video.src = URL.createObjectURL(stream);
			video.onerror = function () {
			  stream.stop();
			};
			stream.onended = noStream;
			video.onloadedmetadata = function () {
			  alert(‘摄像头成功打开!‘);
			};
		}
		function noStream(err) {
       	 	alert(err);
      }

//按钮模拟拍照,就是通过绘图将捕捉到的画面呈现在画布上

document.getElementById("snap").addEventListener("click", function() {

		ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
	});

  

时间: 2024-10-17 00:48:09

使用html5绘图技术事项调用摄像头拍照;的相关文章

Ionic系列——调用摄像头拍照和选择图库照片功能的实现

1.需求描述 最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传. 2.准备 ①.添加插件$cordovaCamera cordova plugin add cordova-plugin-camera ②.在controller中添加依赖 3.代码实现 $scope.takePhoto=function(){     var options = {                                                        

android: 调用摄像头拍照

很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄像头进行拍照. 新建一个 ChoosePicTest 项目,然后修改 activity_main.xml 中的代码,如下所示: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro

html5中调用摄像头拍照

方法: getCamera: 获取摄像头管理对象 对象: Camera: 摄像头对象 CameraOption: JSON对象.调用摄像头的參数 PopPosition: JSON对象,弹出拍照或摄像界面指示位置 回调方法: CameraSuccessCallback: 调用摄像头操作成功回调 CameraErrorCallback: 摄像头操作失败回调 权限: 功能模块(permissions) { // ... "permissions":{ // ... "Camera

android调用摄像头拍照

调用手机摄像头拍照,获取拍照后的图片数据.以下代码是在activity中:     // 调用摄像头         Button b = (Button) findViewById(R.id.btn1);     b.setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View v) {             // Here we fire the inte

HTML5——利用navigator+Video调用摄像头进行录像

以前无聊的时候玩儿过HTML5,感觉里面的很多新标签确实深深震撼了我额.... 今天需求那边要做这样一个功能,在微信里面调用摄像头进行拍摄,然后上传.刚开始最先想到的是Video标签,只要将它的src指定为当前摄像头录制到的视频就可以了. 后来百度了一段,发现还要用上Navigator,具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <t

【MediaKit】WPF项目中 调用摄像头拍照的开发包

今天遇到一个 人事的项目,项目中需要调用摄像头给员工照相.如何解决这个问题呢? 介绍一个开发包给你,MediaKit.论坛里头的人都说好,但是黑兔觉得大家好才是真的好.你不妨试试~ 第一步:添加WPFMediaKit.dll 文件到项目中 第二步:把WPFMediaKit.dll文件引用进来. 步骤 右击引用->添加引用->浏览选项卡->选择WPFMediaKit.dll文件所在的位置. 第三步:在窗口顶端加入如下代码(注意不要该意记)就像using一个类样. xmlns:WPFMedi

C#调用摄像头拍照

在winforn程序中,经常会遇到一些调用硬件的功能,这里给大家讲解的事使用AForge调用摄像头 首先引用用dll文件 这些都是需要应用的dll文件,其中AForge.Controls.dll文件里面封装了一些void控件,在工具箱中应用文件就会出现如下控件 这里会使用到VideoSourcePlayer控件,下面是底层代码 using引用 using System.Drawing.Imaging;using System.Windows;using System.IO;using Syste

谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE

<template> <div> <!--canvas截取流--> <canvas ref="canvas" width="320" height="260"></canvas> <!--图片展示--> <video ref="video" width="340" height="280" autoplay&g

H5调用摄像头拍照

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>摄像头拍照</title> <meta name="viewport" content="widt