Primeface 6.2 PhotoCam - Firefox / Safari的网络摄像头错误



我正在尝试使用Primeface的PhotoCam(版本6.2(,并且使用他们展示中的示例,相机在Firefox(开发人员版63.0b13(或Safari版本12上对我不起作用..并且也无法在移动设备上的Safari上运行(移动设备在iOS12上(。

它被部署到一个有https的网站,它可以在Chrome的桌面和移动浏览器上运行。

我目前正在使用展示演示,在这里找到(代码也发布在下面(:

https://www.primefaces.org/showcase/ui/multimedia/photoCam.xhtml

我什至下载了展示战争文件并尝试了该版本,但成功没有变化。

请问有人可以帮忙吗?

发生了什么事情?

在火狐浏览器上:

  • 收到允许相机访问的提示,我单击确定。
  • 我收到运行Adobe Flash的提示,我同意。
  • 接受两者后,相机"盒子"只是白色的。
  • 当我单击捕获时,我收到的错误是"网络摄像头.js错误:网络摄像头尚未加载"。
  • 注意:控制台在页面加载时返回"返回语句后无法访问的代码[了解更多]",但没有其他消息 接受两个提示后显示。

在 Safari 上:

  • 收到允许相机访问的提示,我单击确定。
  • 我收到错误"网络摄像头.js错误:无法访问网络摄像头:类型错误:类型错误类型错误:类型错误">

在移动设备上的 Safari 上:

  • 我收到错误"网络摄像头.js错误:无法访问网络摄像头:错误: 无效约束错误:无效约束">

这是 xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" template="/common/template.xhtml">
<ui:define name="title">PhotoCam</ui:define>
<ui:define name="content">
<h:form>
<h:panelGrid columns="3" cellpadding="5">
<p:photoCam widgetVar="pc" listener="#{photoCamView.oncapture}" update="photo"/>
<p:commandButton type="button" value="Capture" onclick="PF('pc').capture()"/>
<p:outputPanel id="photo">
<p:graphicImage name="demo/images/photocam/#{photoCamView.filename}.jpeg"
rendered="#{not empty photoCamView.filename}"/>
</p:outputPanel>
</h:panelGrid>
</h:form>
</ui:define>

这是Java类

public class PhotoCamView {
private String filename;
private String getRandomImageName() {
int i = (int) (Math.random() * 10000000);
return String.valueOf(i);
}
public String getFilename() {
return filename;
}
public void oncapture(CaptureEvent captureEvent) {
filename = getRandomImageName();
byte[] data = captureEvent.getData();
ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
String newFileName = externalContext.getRealPath("") + File.separator + "resources" + File.separator + "demo" +
File.separator + "images" + File.separator + "photocam" + File.separator + filename + ".jpeg";
FileImageOutputStream imageOutput;
try {
imageOutput = new FileImageOutputStream(new File(newFileName));
imageOutput.write(data, 0, data.length);
imageOutput.close();
}
catch(IOException e) {
throw new FacesException("Error in writing captured image.", e);
}
}}

我感谢对此的任何帮助。

(我也在Primefaces论坛上发布了这个,希望这里或那里有人可以帮助我。当我弄清楚这一点时,我会更新两个网站(

克里斯蒂娜

只需从Github下载网络摄像头.js并将其放在xhtml文件夹中即可。 然后将<script type="text/javascript" src="webcam.js"></script>添加到您的 xhtml 文件中

我最近刚刚将 Photocam 更新到最新版本的 JS 插件,并修复了 IE11 的类似错误。看这里:

https://github.com/primefaces/primefaces/issues/4094

https://github.com/primefaces/primefaces/issues/3755

我强烈建议您尝试 GitHub 的 6.3-SNAPSHOT 版本的 PrimeFaces,并让我们知道这个最新版本是否解决了您的问题。

最新更新