Question

我正在尝试使用Primeface的PhotoCam（版本6.2），并使用其展示中的示例，该相机不适用于Firefox（开发人员版63.0b13）或Safari 12 ..版，并且对我不起作用。在移动设备上的Safari上运行（移动设备在iOS12上）。

它已部署到具有https的网站，并且可以在Chrome浏览器中同时在台式机和移动浏览器上使用。

此刻，我正在使用展示演示，该演示位于此处（代码也发布在下面）：

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

我什至可以下载演示战争文件并尝试该版本，但成功没有改变。

有人可以帮忙吗？

发生了什么事？

在Firefox上：

我收到允许访问摄像机的提示，单击确定。
我同意运行Adobe Flash的提示。
接受两个选项后，相机的“盒子”就是白色的。
当我单击捕获时，收到的错误是“ Webcam.js错误：尚未加载网络摄像头”。
注意：控制台在页面加载时返回“ return statement [Learn More]之后无法访问的代码”，但没有其他消息接受两个提示后出现。

在Safari上：

我收到允许访问摄像机的提示，单击确定。
我收到错误消息“ Webcam.js错误：无法访问网络摄像头：TypeError：类型错误TypeError：类型错误”

在移动设备上的Safari上：

我收到错误消息“ Webcam.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论坛上发布了此信息，希望这里或那里的人能为我提供帮助。当我发现这一点时，我将同时更新两个网站）

克里斯蒂娜

Answer 1

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

Answer 2

我最近将Photocam更新到其JS插件的最新版本，并且还修复了IE11的类似错误。看到这里：

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

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

我强烈建议尝试从GitHub下载6.3-SNAPSHOT版本的PrimeFaces，并告知我们最新版本是否已解决您的问题。

Primefaces 6.2 PhotoCam-Firefox / Safari出现网络摄像头错误

2 个答案: