gpt4 book ai didi

javascript - 同一页面上有多个 scriptcam.js,相机无法加载/显示和拍照

转载 作者:行者123 更新时间:2023-11-28 08:44:32 25 4
gpt4 key购买 nike

我正在尝试使用脚本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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com