为什么当我运行代码时 createCapture 不起作用？

Question

我正在处理的项目应该有代码 createCapture，但是当我运行代码时它不起作用，尽管代码中有 createCapture()。

当我运行它时，我会点击到第二页，第二页应该有一个createCapture。当点击到第二页时，相机应该打开

JS代码：

let screen = 0;
let saveB;
let fullB;
let capture;


function setup() {
    createCanvas(400,400);
}


function draw() {
    if(screen == 0) {
        startScreen();
    } else if(screen == 1) {
        mainScreen();
    } else if(screen == 2) {
        endScreen();
    }
}

function startScreen() {
    background(100);
    fill(250);
    text('Here you are', width / 2, height /2);
    text('Click to Start', width / 2, height / 2 + 20);
    textAlign(CENTER);
}

function mousePressed() {
    if(screen == 0) {
        screen = 1;
    } else if(screen == 2) {
        screen = 0;
    }
}


function mainScreen() {
    background(100, 200, 250);
    text('This is you ', 40, 30);
    saveB = createButton('Save');
    saveB.mousePressed(Savefile);

    fullB = createButton('FullScreen');
    fullB.mousePressed(FullScreen);

    capture = createCapture('VIDEO');
    capture.position(200,200);
    capture.size(100, 100);
    let audio = createCapture('AUDIO');
}

function Savefile() {
    save('Photo.jpg');
}

function FullScreen() {
    let fs = fullscreen
    fullscreen(!fs);
}

function endScreen() {
    background(100,200,200);
    fill(250);
    text('Thank you for looking at yourself', width / 2, height / 2);
    text('Click to restart', width / 2, height / 2 + 20);
}

html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>

  <body>
    <script src="sketch.js"></script>
  </body>
</html>

createCapture 应该出现在第二页，但它没有。提前谢谢你。

Answer 1

您可能没有权限在您使用此代码的上下文中访问相机。如果您的代码运行在另一个网站的 iframe 中，它可能有限制，甚至无法请求访问网络摄像头。

除此之外，您的代码大部分都能正常工作。但是，当您到达屏幕 1 (a.k.a.mainScreen) 时，您当前正在重新创建按钮并捕获每一帧，这不是您想要做的。按钮和捕获对象都是持久化的，所以你只需要创建一次。

此外，当您的代码在屏幕上显示网络摄像头视频时，它不会出现在您单击“保存”时生成的文件中。这是因为创建捕获对象实际上并没有将捕获的图像绘制到您的 canvas。相反，您需要隐藏捕获对象并将其作为图像绘制到 canvas。这里有一个working version of your code hosted on p5js.org。下面是一个只有相关位的缩略版本：

let saveB;
let capture;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  mainScreen();
}

let mainScreenInitialized = false;

function mainScreen() {
  if (!mainScreenInitialized) {
    mainScreenInitialized = true;
    background(100, 200, 250);
    text('This is you ', 40, 30);
    
    saveB = createButton('Save');
    saveB.mousePressed(Savefile);

    capture = createCapture('VIDEO');
    capture.hide();
  }
  
  let aspect = capture.height / capture.width;
  image(capture, 100, 100, 200, 200 * aspect);
}

function Savefile() {
  save('Photo.jpg');
}

不幸的是，我无法将其制作成 Whosebug 上的片段，因为它运行的 iframe 没有请求访问网络摄像头的权限。

为什么当我运行代码时 createCapture 不起作用？

Why does createCapture not work when I run the code?

javascript

p5.js

为什么当我 运行 代码时 createCapture 不起作用？

Why does createCapture not work when I run the code?

javascript

p5.js

为什么当我运行代码时 createCapture 不起作用？