mvc 插入html5拍照功能，访问页面时不提示是否启动摄像头，帮我看看

huisheng 2012-07-21 02:09:32

我是刚开始使用HTML5。在网站上找了个拍照的功能。
http://www.dotblogs.com.tw/shadow/archive/2012/04/01/71209.aspx
我加了一段视频播放的是正常的。
但是我的这个拍照不提示我是否启动摄像头。
没有什么显现。
我用的是。MVC ASP.NET
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server" >
<title>Index</title>

</head>
<body>

<section>
<header>
<h1>This is a video section</h1>
</header>
<P>
<video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" kesrc="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv"
controls autoplay loop>
</video></p>

<video id="myVideo" src=""></video>
<canvas id="viewfinder"></canvas>
<br />
<input type="button" value="拍照" /><br />
拍照結果：
<div id="result">
</div>
<script type="text/javascript">
varvideo_element=document.getElementById('myVideo');
if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow
navigator.getUserMedia('myVideo',success,error);
}
function success(stream){
video_element.src=stream;
}
</script>

</section>
</body>
</html>

...全文

488 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhouguang536 2013-03-14

打赏
举报

navigator.getUserMedia error: NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1} 我总是提示这个错误什么意思？

huisheng 2012-07-21

打赏
举报

这次测试又可以了。真奇怪了

huisheng 2012-07-21

打赏
举报

可以了。但是不太明白。为什么要加这样写，

<section id="splash">
<p id="errorMessage"></p>
</section>
<section id="app" hidden>
<p><video id="monitor" autoplay width="450"></video> <canvas id="photo"></canvas></p>
<p><input value="say cheese!" type=button value="📷" id="snapshotbutton">
</section>

<script type="text/javascript">
var faceKey = "9a348d36a65e0b8ca3aa010eeb1b395f";
var faceSecret = "6065c6275fca70d187c0d78e2e94d472";

//credit http://stackoverflow.com/a/8782422/52160
function dataURItoBlob(dataURI, callback) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs

var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
} else {
byteString = unescape(dataURI.split(',')[1]);
}

// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}

// write the ArrayBuffer to a blob, and you're done
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}

function errorHandler(e) {
console.log("Error");
console.dir(e);
}

if (navigator.webkitGetUserMedia) {

navigator.webkitGetUserMedia({ video: true }, gotStream, noStream);

var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');

function gotStream(stream) {

video.src = webkitURL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
streamError();
};
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
$("#snapshotbutton").click(snapshot);
}

function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}

function streamError() {
document.getElementById('errorMessage').textContent = 'Camera error.';
}

function snapshot() {
$("#result").html("<p><i>Working hard for the money...</i></p>");

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);

var data = canvas.toDataURL('image/jpeg', 1.0);
newblob = dataURItoBlob(data);

var formdata = new FormData();
formdata.append("api_key", faceKey);
formdata.append("api_secret", faceSecret);
formdata.append("filename", "temp.jpg");

formdata.append("file", newblob);

$.ajax({
url: 'http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses',
data: formdata,
cache: false,
contentType: false,
processData: false,
dataType: "json",
type: 'POST',
success: function (data) {
handleResult(data.photos[0]);
}

});

}

function handleResult(photo) {
console.dir(photo);
var s = "<h2>Result</h2>";
if (photo.tags.length) {
var tag = photo.tags[0];
s += "<p>";
if (tag.attributes.gender) s += "<b>Gender:</b> " + tag.attributes.gender.value + "<br/>";
if (tag.attributes.glasses) s += "<b>Glasses:</b> " + tag.attributes.glasses.value + "<br/>";
if (tag.attributes.smiling) s += "<b>Smiling:</b> " + tag.attributes.smiling.value + "<br/>";
if (tag.attributes.age_est) s += "<b>Age:</b> " + tag.attributes.age_est.value + "<br/>";
if (tag.attributes.mood) s += "<b>Mood:</b> " + tag.attributes.mood.value + "<br/>";
if (tag.attributes.length == 0) s += "I got something, but the data wasn't clear. Sorry.";
s += "</p>";
} else {
s += "<p>Sorry, I didn't find any faces.</p>";
}
$("#result").html(s);
}

} else {
document.getElementById('errorMessage').textContent = 'No native camera support available.';
}

</script>

<div id="result"></div>

为什么要加上这段：（不加为什么不行）
var faceKey = "9a348d36a65e0b8ca3aa010eeb1b395f";
var faceSecret = "6065c6275fca70d187c0d78e2e94d472";

//credit http://stackoverflow.com/a/8782422/52160
function dataURItoBlob(dataURI, callback) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs

var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
} else {
byteString = unescape(dataURI.split(',')[1]);
}

// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}

// write the ArrayBuffer to a blob, and you're done
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}

function errorHandler(e) {
console.log("Error");
console.dir(e);
}

huisheng 2012-07-21