CODEWITHSUNDEEP
javascripthtmlmobilecamerastreaming
userzero
userzero

Reputation: 119

HTML5 mobile camera capture

I would like to do the mobile camera capture by HTML5 like this

I have try to use below method but it needs to click somewhere for opening the camera that mean I could not preview the image in live.

<input id="fileselect" type="file" accept="image/*" capture="camera">

I also found the other method which is used a function called "getUserMedia" but it is not support on IOS8.

So how can I implement the mobile camera capture with HTML5?

Please help.

Upvotes: 2

Views: 1231

Answers (2)

CYoung
CYoung

Reputation: 367

Below is a simple example of use of HTML5 to put a video viewer on the screen that also allows you to capture still images. It has been tested on Chrome Version 40.0.2214.93 or later. It has been done in an MVC app. If your replace the markup in your Index.cshtml with this code it should run OK. The only other dependency is the jquery.

@{
    ViewBag.Title = "Home Page";
}

<style>
    .videostream, #cssfilters-stream, #screenshot {
        width: 307px;
        height: 250px;
    }

    .videostream, #cssfilters-stream {
        background: rgba(255,255,255,0.5);
        border: 1px solid #ccc;
    }

    #screenshot {
        vertical-align: top;
    }


</style>


<div style="text-align:center;">
    @*<div style="text-align:center;">*@
    <div style="float:left;">
        <video id="basic-stream" class="videostream" autoplay></video>
        <p><button id="capture-button">Capture video</button></p>
    </div>
    <div style="float:left; padding-left:20px;">
        <button id="SaveImageBtn" style="vertical-align:top; margin-top:100px; margin-right:20px;">Save -></button>
        <canvas id="outputCanvas" class="videostream"></canvas>        
    </div>
</div>

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>

<script>

    var video = document.querySelector('#basic-stream');
    var button = document.querySelector('#capture-button');
    var localMediaStream = null;

    var canvas = document.querySelector('outputCanvas');

    $(document).ready(function () {

        $("#capture-button").click(function () {
            RunIt();
        });

        $("#SaveImageBtn").click(function () {

            var cvs = $("#outputCanvas")[0];
            var ctx = cvs.getContext('2d');
            ctx.drawImage(video, 0, 0, 300, 150);
            console.log("Got here 01");
        });


        var videoObj = {"video": true};
        var errBack = function (error) { alert("An error");};

        function RunIt() {
            navigator.webkitGetUserMedia(
              { "video": true, "audio": true },
              function (s) {
                  video.src = 
                      window.webkitURL.createObjectURL(s);

                  video.controls = true;
                  localMediaStream = s;

                  video.play();



              },
              function (e) { console.log(e); }
            );
        };
    });

</script>

Upvotes: 1

Vamshi Suram
Vamshi Suram

Reputation: 870

Try using some placeholder image.

Upvotes: 0

Related Questions