java中Primefaces 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

我什至下载了展示 war 文件并尝试该版本，但没有成功。

有人可以帮忙吗？

发生什么事了？

在火狐浏览器上:

我收到允许相机访问的提示，我单击“确定”。
我收到运行 Adobe Flash 的提示，我同意。
接受两者后，相机“盒子”就变成白色了。
当我单击“捕获”时，我收到的错误是“Webcam.js 错误:网络摄像头尚未加载”。
注意:控制台在页面加载时返回“unreachable code after return statements[了解更多]”，但没有其他消息接受两个提示后出现。

在 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 论坛上发布了此内容，希望这里或那里的人可以帮助我。当我弄清楚这一点时，我会更新这两个网站)

克里斯蒂娜

请您参考如下方法:

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