html5调用手机摄像头

html:<video id="video" autoplay=""style=‘width:640px;height:480px‘></video><button id=‘picture‘>PICTURE</button><canvas id="canvas" width="640" height="480"></canvas></body>js:<script>    var video = document.getElementById("video");    var context = canvas.getContext("2d")    var errocb = function () {        console.log(‘sth wrong!‘);    }    if (navigator.getUserMedia) { // 标准的API        navigator.getUserMedia({ "video": true }, function (stream) {            video.src = stream;            video.play();        }, errocb);    } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API        navigator.webkitGetUserMedia({ "video": true }, function (stream) {            video.src = window.webkitURL.createObjectURL(stream);            video.play();        }, errocb);    }    document.getElementById("picture").addEventListener("click", function () {        context.drawImage(video, 0, 0, 640, 480);    });

</script>
时间: 2024-10-07 13:25:27

html5调用手机摄像头的相关文章

HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</title> 6 <style> 7 #video { border: 1px solid #ccc; display:inline-block; } 8 #canvas

html5调用手机摄像头,实现拍照上传功能

今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源.实现拍照功能的html5代码: <article> <style scoped> video { transform: scaleX(-1); } p { text-alig

利用html5调用本地摄像头拍照上传图片[转]

利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取.. 目前支持html5

js 调用手机摄像头或相册并展示图片

效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,此处没有做上传服务器. 点击“重新上传”,清空所有图片. PC浏览器打开,类似,不过只能选择图片文件: 代码 把input type=file的标签透明度设置为0,使用绝对布局的方式用另一个标签覆盖它: <div id="imgPreview"> <div id="prompt3"> &

Android调用手机摄像头使用MediaRecorder录像并播放

最近在项目开发中需要调用系统的摄像头录像并播放. 在开发中遇到了两个问题,记录下: (1)开发过程中出现摄像头占用,启动失败,报错.但是我已经在onDestory()中关闭了资源. 报错原因:打开程序,调用摄像头,按Home键再打开程序调用,报错摄像头被占用. 解决:在onStop()中关闭资源,在onResume()中判断是否为null,否则实例化资源. (2)其中我录像播放的代码写在Fragment+ViewPager中,在来回切换Fragment的时候,摄像头只能调用一次,并且所在的Fra

iOS开发之调用手机摄像头和相册

//按钮的点击方法- (void)catchImage { UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"请选择" message:@"选取照片" preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction *action1 = [UIAlertAction actionWithTitle:@"相机&

html5调用手机录音

<a href="http://www.html5rocks.com/en/tutorials/webaudio/intro/">html5Recoder</a> <a href="https://github.com/mattdiamond/Recorderjs">form github</a>

h5调用手机摄像头/相册

<!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset="utf-8"></head><body><iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>

vue项目html5调取手机摄像头录像并上传

<video id="video" autoplay width="300" height="300" controls></video> <x-button class="video-btn" type="primary" @click.native="upBtnFileFace">刷脸验证</x-button> <input cl