html调用手机PC 端摄像头和图片库

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title></title>
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	</head>

	<body>

		<div id="divcontrol">
			<video id="video" autoplay="" style=‘width:640px;height:480px‘>
			</video>
			<button id="snap">
				拍照
			</button>
			<canvas style="display:none" id="canvas" width="320" height="320">
			</canvas>

			<input type="file" accept="image/video;capture=camera">
			<input type="file" accept="video/*;capture=camera">
			<input type="file" accept="video/*;capture=camcorder">
			<input type="file" accept="audio/*;capture=microphone">
		</div>
	</body>
	<script type="text/javascript">
// 获取封装本地 数据流
            var avideo = document.getElementById("video");

            navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia|| navigator.msGetUserMedia;

            
            //webkit 内核 
            if (navigator.webkitGetUserMedia) {
                    navigator.webkitGetUserMedia(
	                   {video:true}, 
	                   function(stream) {
                       avideo.src = window.webkitURL.createObjectURL(stream);
                       avideo.autoplay = true;},
                       function (error) { alert(error);});
            }

 
            //火狐内核

            if (navigator.mozGetUserMedia) {
                    navigator.mozGetUserMedia({video:true},function(LocalMediaStream) {
                       avideo.mozSrcObject =LocalMediaStream;
                       video.autoplay = true;
                    }, function (error) { alert(error);});
            }
            
            //画图脚本
              function scamera() {
                var canvasObj = document.getElementById(‘canvas‘);
                var context1 = canvasObj.getContext(‘2d‘);
                context1.fillStyle = "#ffffff";
                context1.fillRect(0, 0, 320, 240);
                context1.drawImage(videoElement, 0, 0, 320, 240);
            }          
</script>

</html>
时间: 2024-08-09 14:48:27

html调用手机PC 端摄像头和图片库的相关文章

SmsManager - Windows Phone手机PC端短信管理工具检查版本更新地址

SmsManager - Windows Phone手机PC端短信管理工具检查版本更新时将抓取此页面中两个特殊字符串之间的文字内容(共3处),并替换\n为换行,html转义字符为原字符. wpsmsmanager0-start[1.2]end-wpsmsmanager0 wpsmsmanager1-start[新版本V1.2已发布(2015/4/10)\n更新说明:\n可导出短信至Android手机\n前往查看?]end-wpsmsmanager1 wpsmsmanager2-start[htt

mac 配置apache 服务器 实现手机pc 端局域网传输

mac 配置apache 服务器 一.上一篇太low 了 每次下载大的文件都会失败,经过苦苦的百度,终于找到了解决方案,那就是配置apache, 二.开启我们的配置 1.开启apache 服务,mac是自带apa服务的,直接开启即可,注意一下命令都要使用 sudu root 权限 ? html sudo apachectl start Password: /System/Library/LaunchDaemons/org.apache.httpd.plist: service already l

PC端和手机访问调用不同的页面,JS和PHP不同方法

js方法: var urlqr = location.href;    urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if(IsPC())  window.location.replace(urlqr);//PC端访问就跳转到PC页面 else window.location.replace(urlqr);//否则跳转移动页面 //判断是否pc端访问         function IsPC() {             va

浏览器端javascript调用手机终端本地功能实现02-功能点汇总

上篇博文已经说明,本篇直接进入主题.本篇大致说明总体功能以及代码用途,下篇将功能点逐一详细说明. 功能点包括: 拍照相关接口(camera) 功能函数名称 作用 备注 invokeCamera() 调用摄像头拍照 requestAlbum() 调用相册功能 requestAlbumMulti() 相册多选 requestAlbumMultiUpload() 相册多选完后上传 2. 录音相关接口(media) 功能函数名称 作用 备注 startRecord() 录制音频 stopRecord()

判断当前终端是手机还是pc端并进行不同的页面跳转

判断当前设备(终端)是手机还是pc端并进行不同的页面跳转 DEMO 1 <script type="text/javascript"> function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.mat

浏览器端javascript调用手机终端本地功能实现03-拍照

上篇大致说明了已实现的功能点及大致的实现方式,本篇详细说明如何通过js调用拍照的相关功能. js代码部分已经在<浏览器端javascript调用手机终端本地功能实现02>中展现,主要说明android部分和ios部分的实现.请将js代码或文件放在要加载的服务器页面里. android端实现 1 //定义拍照相关接口 2 private JSInterfaceCamera jsInterfaceCamera; 3 //初始化 4 jsInterfaceCamera=new JSInterface

php判断手机段登录,以及phpcms手机PC双模板调用

首先一段php代码判断是否为手机浏览: function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { return true; } // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息 if (isset ($_SERVER['HTTP_VIA'])) { // 找不到为flase,否则为true return stristr($_SERV

TML5如何在移动网页端调用手机图片或者camera

TML5如何在移动网页端调用手机图片或者camera可以参考这篇文章: 如果你开始基于iOS系统(ios6 above) 的web应用,可以考虑这段代码: 点击按钮,会调用你的摄像头相册 附源码文件: <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

PC端页面如何调用QQ进行在线聊天?

pc端如何实现QQ在线咨询? html代码如下: <a href="tencent://message/?uin=1234567&Site=Sambow&Menu=yes">QQ在线咨询</a> 1 其中,上述HTML代码中的"1234567"指的是QQ客服号码. 只需要这么一句简单的html代码,就可以实现QQ在线聊天! 具体PC端实现QQ聊天的原理和相关知识,可以参考"移动web端对手机QQ的调用"进行