為什么我運行代碼時 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（又名 mainScreen）時，您當前正在重新創建按鈕並捕獲每一幀，這不是您想要做的。 按鈕和捕獲對象都是持久的，因此您只需要創建一次。

此外，當您的代碼在屏幕上顯示網絡攝像頭視頻時，它不會出現在您單擊保存時生成的文件中。 這是因為創建捕獲 object 實際上並沒有將捕獲的圖像繪制到您的 canvas。 相反，您需要隱藏捕獲 object 並將其作為圖像繪制到 canvas。 這是托管在 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');
}

不幸的是，我無法將其制作成 StackOverflow 上的片段，因為它運行的 iframe 沒有請求網絡攝像頭訪問權限的權限。

為什么我運行代碼時 createCapture 不起作用？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-04-28 07:32:35

為什么我運行代碼時 createCapture 不起作用？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-04-28 07:32:35

解決方案1
1 已采納 2021-04-28 07:32:35