HTML5移动相机捕获

HTML5 mobile camera capture

本文关键字：相机 移动 HTML5      更新时间：2023-09-26

我想像这样通过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>

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

相关文章：