[英]HTML5 mobile camera capture
我想用HTML5做移動相機拍攝像這樣
我嘗試使用下面的方法,但是它需要單擊某個位置以打開相機,這意味着我無法實時預覽圖像。
<input id="fileselect" type="file" accept="image/*" capture="camera">
我還找到了另一種方法,該方法使用了一個名為“ getUserMedia ”的函數,但IOS8不支持該方法。
那么如何使用HTML5來實現移動攝像頭捕獲呢?
請幫忙。
以下是使用HTML5在屏幕上放置視頻查看器的簡單示例,該視頻查看器還允許您捕獲靜止圖像。 已在Chrome版本40.0.2214.93或更高版本上進行了測試。 它已經在MVC應用中完成。 如果用此代碼替換Index.cshtml中的標記,則應運行OK。 唯一的其他依賴性是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>
嘗試使用一些占位符圖像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.