Showing camera view inside html in android and then snap a picture

前端未结

关注

 4  533

Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts

相关标签:

4条回答

小蘑菇

2020-12-02 15:23

I did it for one of my projects. Check out navigator.getUserMedia(). There are a tonne of things you can do with your webcam and browser, including AR games! Here's just a basic example:

HTML:

    <html>
    <head>
    </head>

    <body>
       <form><input type='button' id='snapshot' value="snapshot"/></form> 
       <video autoplay></video>
       <canvas id='canvas' width='100' height='100'></canvas> 
       <script type="text/javascript" src="findit.js"></script>
    </body>

    </html>

findit.js

    var onFailSoHard = function(e)
    {
            console.log('failed',e);
    }

    window.URL = window.URL || window.webkitURL ;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    var video = document.querySelector('video');

    if(navigator.getUserMedia)
    {
        navigator.getUserMedia({video: true},function(stream) {
        video.src = window.URL.createObjectURL(stream);
        },onFailSoHard);
    }

    document.getElementById('snapshot').onclick = function() { 
        var canvas = document.getElementById('canvas'); 
        var ctx = canvas.getContext('2d'); 
        ctx.drawImage(video,0,0); 
    }

Live Demo:

A personal project

More Resources, this is what I used:

Webcam Access

Update:

This solution is valid only for front camera if our device has one. It's basically a "webcam" solution. Not sure if it'll work for your case. Just in case, check out the resources.

0 讨论(0)

一整个雨季

2020-12-02 15:27

You can use camera.getPicture from cordova-plugin-camera or navigator.device.capture.captureVideo from cordova-plugin-media-capture.

var getUserMedia = navigator.getUserMedia 
        || navigator.webkitGetUserMedia 
        || navigator.mozGetUserMedia 
        || navigator.msGetUserMedia 
        || navigator.device.capture.captureVideo 
        || navigator.camera 
        || camera.getPicture;

Hope it helps.

0 讨论(0)

难免孤独

2020-12-02 15:31

There is no direct access to the Camera app using javascript. You can either write a custom PhoneGap (Cordova) plugin to do that.

0 讨论(0)
发布评论:

提交评论
- 加载中...
陌清茗

2020-12-02 15:40

You can install mbppower/CordovaCameraPreview plugin (for android,ios) in your Cordova/phonegap application that allows camera interaction from HTML code. A really amazing plugin it is.. You can access Features such as:

Start a camera preview from HTML code. Drag the preview box. Set camera color effect (Android and iOS),Send the preview box to back of the HTML content,Set a custom position for the camera preview box,Set a custom size for the preview box and Maintain HTML interactivity.

Or you can also use donaldp24/CanvasCamera Plugin for your application if it fits to your requirements.Its supported in both android and iOS platforms. I have observed, for iOS its working fine but in android it isn't working.

Now you can install CordovaCameraPreview plugin through Online PhoneGap too. So without using CLI you can directly use it through this by adding

<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />

in your config.xml file and create ApplicationTemplate.apk/.ipa. For more information regarding this you can ask me. Happy to help.

UPDATE:10th Oct 2017 It used to work well during that time but, donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version.

0 讨论(0)
发布评论:

提交评论
- 加载中...