我正在尝试使用脚本cam.js制作一个演示页面，我需要有六个不同的“拍照”按钮和六个不同的屏幕来显示拍摄的照片。我已经完成了这一切，但相机/网络摄像头无法加载，因此当我单击按钮时，没有拍摄照片，也没有可以看到自己的屏幕。
这是我写的内容，是的，.js 文件已正确链接。
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="scriptcam.js"></script>
<script language="JavaScript">
$(document).ready(function () {
$("#webcam").scriptcam({
promptWillShow: showMessage,
showMicrophoneErrors: false,
onError: onError,
cornerRadius: 20,
cornerColor: 'e3e5e2',
onWebcamReady: onWebcamReady,
uploadImage: 'upload.gif',
onPictureAsBase64: base64_tofield_and_image
});
});
function base64_tofield() {
$('#formfield').val($.scriptcam.getFrameAsBase64());
};
function base64_toimage1() {
$('#image1').attr("src", "data:image1/png;base64,"+$.scriptcam.getFrameAsBase64());
}
function base64_toimage2() {
$('#image2').attr("src", "data:image2/png;base64,"+$.scriptcam.getFrameAsBase64());
}
function base64_toimage3() {
$('#image3').attr("src", "data:image3/png;base64,"+$.scriptcam.getFrameAsBase64());
}
function base64_toimage4() {
$('#image4').attr("src", "data:image4/png;base64,"+$.scriptcam.getFrameAsBase64());
}
function base64_toimage5() {
$('#image5').attr("src", "data:image5/png;base64,"+$.scriptcam.getFrameAsBase64());
}
function base64_toimage6() {
$('#image6').attr("src", "data:image6/png;base64,"+$.scriptcam.getFrameAsBase64());
}
function base64_toimage7() {
$('#image7').attr("src", "data:image7/png;base64,"+$.scriptcam.getFrameAsBase64());
};
function base64_tofield_and_image(b64) {
$('#formfield').val(b64);
$('#image1').attr("src", "data:image/png;base64,"+b64);
$('#image2').attr("src", "data:image/png;base64,"+b64);
$('#image3').attr("src", "data:image/png;base64,"+b64);
$('#image4').attr("src", "data:image/png;base64,"+b64);
$('#image5').attr("src", "data:image/png;base64,"+b64);
$('#image6').attr("src", "data:image/png;base64,"+b64);
$('#image7').attr("src", "data:image/png;base64,"+b64);
};
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
}
function onError(errorId, errorMsg) {
$("#btn1").attr("disabled", true);
$("#btn2").attr("disabled", true);
$("#btn3").attr("disabled", true);
$("#btn4").attr("disabled", true);
$("#btn5").attr("disabled", true);
$("#btn6").attr("disabled", true);
$("#btn7").attr("disabled", true);
alert(errorMsg);
}
function onWebcamReady(cameraNames, camera, microphoneNames, microphone, volume) {
$.each(cameraNames, function (index, text) {
$('#cameraNames').append($('<option></option>').val(index).html(text))
});
$('#cameraNames').val(camera);
}
function showCurrentVersion() {
alert($.scriptcam.version());
};
</script>
</head>
<body>
<div style="width: 330px; float: left;">
<div id="webcam">
</div>
<div style="margin: 5px;">
<img src="webcamlogo.png" style="vertical-align: text-top">
<select id="cameraNames" size="1" onchange="changeCamera()" style="width: 245px; font-size: 10px; height: 25px;">
<option value="0">FaceTime HD Camera (Built-in) (05ac:850b)</option>
</select>
</div>
</div>
</div>
<div style="width: 135px; float: middle;">
<p>
<button class="btn btn-small" id="btn1" onclick="base64_toimage1()">
Snapshot 1</button></p>
<p>
<button class="btn btn-small" id="btn2" onclick="base64_toimage2()">
Snapshot 2</button></p>
<p>
<button class="btn btn-small" id="btn3" onclick="base64_toimage3()">
Snapshot 3</button></p>
<p>
<button class="btn btn-small" id="btn4" onclick="base64_toimage4()">
Snapshot 4</button></p>
<p>
<button class="btn btn-small" id="btn5" onclick="base64_toimage5()">
Snapshot 5</button></p>
<p>
<button class="btn btn-small" id="btn6" onclick="base64_toimage6()">
Snapshot 6</button></p>
<p>
<button class="btn btn-small" id="btn7" onclick="base64_toimage7()">
Snapshot 7</button></p>
</div>
<div style="width: 200px; float: left;">
<p>
<img id="image_1" style="width: 200px; height: 153px;" /></p>
<p>
<img id="image_2" style="width: 200px; height: 153px;" /></p>
<p>
<img id="image_3" style="width: 200px; height: 153px;" /></p>
<p>
<img id="image_4" style="width: 200px; height: 153px;" /></p>
<p>
<img id="image_5" style="width: 200px; height: 153px;" /></p>
<p>
<img id="image_6" style="width: 200px; height: 153px;" /></p>
<p>
<img id="image_7" style="width: 200px; height: 153px;" /></p>
</div>
最佳答案
而不是 <script language="...>尝试<script type="...">
关于javascript - 同一页面上有多个 scriptcam.js，相机无法加载/显示和拍照，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20034864/