Javascript HTML5移动摄像头捕获

我想用HTML5做手机摄像头抓拍喜欢吗

我试着使用下面的方法，但它需要点击某个地方打开相机，这意味着我无法在现场预览图像

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

我还找到了另一个方法，它使用了一个名为“getUserMedia”的函数，但IOS8不支持它

那么，我如何用HTML5实现移动摄像头捕获呢

---

请提供帮助。

尝试使用一些占位符图像。

下面是一个使用HTML5在屏幕上放置视频查看器的简单示例，它还允许您捕获静态图像。 它已经在Chrome版本40.0.2214.93或更高版本上进行了测试。 这是在MVC应用程序中完成的。如果将Index.cshtml中的标记替换为此代码，则它应该运行正常。唯一的其他依赖项是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>

@{
ViewBag.Title=“主页”；
}
.videostream、#cssfilters流、#屏幕截图{
宽度：307px；
高度：250px；
}
.videostream，#cssfilters流{
背景：rgba（255255,0.5）；
边框：1px实心#ccc；
}
#截图{
垂直对齐：顶部；
}
@**@
捕获视频

保存->
var video=document.querySelector（“#基本流”）；
var button=document.querySelector（“#捕获按钮”）；
var localMediaStream=null；
var canvas=document.querySelector（'outputCanvas'）；
$（文档）.ready（函数（）{
$（“#捕获按钮”）。单击（函数（）{
RunIt（）；
});
$（“#SaveImageBtn”）。单击（函数（）{
var cvs=$（“#outputCanvas”）[0]；
var ctx=cvs.getContext（'2d'）；
ctx.drawImage（视频，0，0，300，150）；
console.log（“Got here 01”）；
});
var videoObj={“video”：true}；
var errBack=函数（错误）{alert（“错误”）；}；
函数RunIt（）{
navigator.webkitGetUserMedia(
{“视频”：真，“音频”：真}，
职能{
video.src=
window.webkitURL.createObjectURL；
video.controls=true；
localMediaStream=s；
video.play（）；
},
函数（e）{console.log（e）；}
);
};
});

您可以使用PhoneGap进行此操作