当前位置: 首页 > news >正文

android webview实现拍照

android webview实现拍照


1. html

<div id="pnlVideo1">
                            <input type="hidden" name="imgNric1" id="imgNric1" />
                            <label id="nric" class="control-label labelfont" style="color:#888;font-weight:bold;">Picture of Asset</label><br /><br />
                            <button id="btnOpen1" class="btn btn-default" type="button">Open WebCam</button>
                            <select id="videoSource" style="display:none">
                                
                            </select>
                            <div id="vdoOne" style="display:none;">
                                <video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video>
                                <canvas id="canvasPreview" style="margin-top:15px;" width="300" height="224"></canvas>
                                <canvas id="canvasUpload" style="display:none;" width='300' height='224'></canvas>
                                <button id="snap" class="btn btn-default" type="button">Snap Photo</button>
                            </div>
                        </div>
                       
                        






    <script type="text/javascript">
        $(document).ready(function () {




        });


         Elements for taking the snapshot
        var canvasPreview = document.getElementById('canvasPreview');
        var canvasUpload = document.getElementById('canvasUpload');
        var contextPreview = canvasPreview.getContext('2d');
        var contextUpload = canvasUpload.getContext('2d');






        //#################### Video Source #######################
        var videoElement = document.querySelector('video');
        var videoSelect = document.querySelector('select#videoSource');


        navigator.mediaDevices.enumerateDevices()
            .then(gotDevices).then(getStream).catch(handleError);


        videoSelect.onchange = getStream;


        function gotDevices(deviceInfos) {
            for (var i = 0; i !== deviceInfos.length; ++i) {
                var deviceInfo = deviceInfos[i];
                var option = document.createElement('option');
                option.value = deviceInfo.deviceId;
               if (deviceInfo.kind === 'videoinput') {
                    option.text = deviceInfo.label || 'camera ' +
                        (videoSelect.length + 1);
                    videoSelect.appendChild(option);
                } else {
                    console.log('Found ome other kind of source/device: ', deviceInfo);
                }
            }
        }


        function getStream() {
            if (window.stream) {
                window.stream.getTracks().forEach(function (track) {
                    track.stop();
                });
            }


            var constraints = {
                
                video: {
                    optional: [{
                        sourceId: videoSelect.value
                    }]
                }
            };


            navigator.mediaDevices.getUserMedia(constraints).
                then(gotStream).catch(handleError);
        }


        function gotStream(stream) {
            window.stream = stream; // make stream available to console
            videoElement.srcObject = stream;
        }


        function handleError(error) {
            console.log('Error: ', error);
        }


        //######################## End Video Source #################




        // Get access to the camera!
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
                videoElement.src = window.URL.createObjectURL(stream);
                videoElement.play();


            });
        }
        else {
            document.getElementById("pnlVideo1").style.display = "none";
        }




      




         Trigger photo take
        document.getElementById("snap").addEventListener("click", function () {
            contextPreview.drawImage(videoElement, 0, 0, 300, 224);
            contextUpload.drawImage(videoElement, 0, 0, 300, 224);
            document.getElementById("video").style.display = "none";
            document.getElementById("snap").style.display = "none";
            document.getElementById("canvasPreview").style.display = "block";


            var image = document.getElementById("canvasUpload").toDataURL("image/jpeg");
            image = image.replace('data:image/jpeg;base64,', '');
            $("#imgNric1").val(image);
        });


         Trigger photo take




        document.getElementById("btnOpen1").addEventListener("click", function () {
            document.getElementById("vdoOne").style.display = "block";
            document.getElementById("video").style.display = "block";
            document.getElementById("snap").style.display = "block";
            document.getElementById("canvasPreview").style.display = "none";
        });




</script>





2. Android studio 中权限设置:




<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.esbu.nec.bme">


    <uses-permission android:name="android.permission.INTERNET" />


    <!-- To auto-complete the email text field in the login form with the user's emails -->
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.READ_PROFILE" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.VIBRATE" />




    <uses-feature
        android:name="android.hardware.camera"
        android:required="true" />


    <application
        android:allowBackup="true"
        android:icon="@mipmap/sgh"
        android:label="@string/app_name"
        android:supportsRtl="true"


        android:hardwareAccelerated="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />


                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".LoginActivity"
            android:label="@string/title_activity_login"></activity>
    </application>


</manifest>





3. 加载view时需要开启JavaScript和文件访问权限。


...
 mWebView = (AdvancedWebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setAllowFileAccess(true);
...


相关文章:

  • lens flare:镜头光晕
  • SQL批处理 导入excel数据到表
  • opengl粒子系统的渲染方式
  • html5 canvas上传图片后预览
  • ZBuffer裁剪planar shadow
  • 3D几何流水线之模型变换
  • html5 canvas 加载图片错误 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'
  • RGBA模式人物换色的实现
  • javascript实现QR code扫描
  • android webview旋转屏幕导致页面重新加载问题
  • FLEX实践—自创相册
  • Nebula3的渲染线程插件(Render Thread Plugin)
  • android webview 遇到android.os.FileUriExposedException错误
  • Ucweb的发展趋势
  • Asp.net MVC scheduler实现
  • 「面试题」如何实现一个圣杯布局?
  • Android 初级面试者拾遗(前台界面篇)之 Activity 和 Fragment
  • C++11: atomic 头文件
  • JavaScript创建对象的四种方式
  • leetcode386. Lexicographical Numbers
  • PhantomJS 安装
  • PHP的Ev教程三(Periodic watcher)
  • react-native 安卓真机环境搭建
  • Redux 中间件分析
  • socket.io+express实现聊天室的思考(三)
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 物联网链路协议
  • 智能合约Solidity教程-事件和日志(一)
  • 中国人寿如何基于容器搭建金融PaaS云平台
  • 白色的风信子
  • python最赚钱的4个方向,你最心动的是哪个?
  • ​业务双活的数据切换思路设计(下)
  • !!【OpenCV学习】计算两幅图像的重叠区域
  • ()、[]、{}、(())、[[]]命令替换
  • (04)Hive的相关概念——order by 、sort by、distribute by 、cluster by
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (附源码)计算机毕业设计SSM教师教学质量评价系统
  • (附源码)流浪动物保护平台的设计与实现 毕业设计 161154
  • (四)图像的%2线性拉伸
  • (太强大了) - Linux 性能监控、测试、优化工具
  • (转)linux 命令大全
  • .NET 4.0中使用内存映射文件实现进程通讯
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .net 流——流的类型体系简单介绍
  • .Net环境下的缓存技术介绍
  • .net开发引用程序集提示没有强名称的解决办法
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • .vue文件怎么使用_我在项目中是这样配置Vue的
  • /3GB和/USERVA开关
  • /bin/bash^M: bad interpreter: No such file ordirectory
  • @autowired注解作用_Spring Boot进阶教程——注解大全(建议收藏!)
  • @entity 不限字节长度的类型_一文读懂Redis常见对象类型的底层数据结构
  • @Transaction注解失效的几种场景(附有示例代码)
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945
  • [20190416]完善shared latch测试脚本2.txt