Adobe Premiere Pro CEP-无法与面板一起启动节点js本地服务器

Question

我一直在试验 Premiere Pro CC 2019 的面板开发，现在我正在尝试按照 https://medium.com/adobetech/how-to-build-a-node-js-server-in-a-panel-ba1d63ea67e2 上的教程在面板旁边创建一个带有 nodejs 的本地服务器，但我无法获得它可以工作

我已经在这里上传了我的代码，除了更新的 manifest.xml 版本号：https://github.com/VanMuylemSven/AdobePanelNodeSample

之外，它与教程没有太大区别

单击面板 returns 空警报，已在 Premiere Pro CC 2019 和 Photoshop CC 2019 中测试启用调试总是告诉我连接被拒绝，本地服务器中控制台日志的 none 曾经被触发。

Manifest.xml

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="7.0" ExtensionBundleId="com.my.test" ExtensionBundleVersion="1.0.0"
        ExtensionBundleName="NodeSamplePanel" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <ExtensionList>
        <Extension Id="com.my.test.panel" Version="1.0" />
        <Extension Id="com.my.localserver" Version="1.0" />
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <Host Name="PHXS" Version="14.0" />
            <Host Name="PHSP" Version="14.0" />         
            <Host Name="PPRO" Version="7.0" />          
        </HostList>
        <LocaleList>
            <Locale Code="All" />
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="7.0" />
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="com.my.test.panel">
            <DispatchInfo >
                <Resources>
                <MainPath>./client/index.html</MainPath>
                <CEFCommandLine>
                    <Parameter>--allow-file-access</Parameter>
                    <Parameter>--allow-file-access-from-files</Parameter>
                    <Parameter>--enable-nodejs</Parameter>
                    <Parameter>--mixed-context</Parameter>
                </CEFCommandLine>
                <ScriptPath>./host/index.jsx</ScriptPath>
                </Resources>
                <Lifecycle>
                    <AutoVisible>true</AutoVisible>
                </Lifecycle>
                <UI>
                    <Type>Panel</Type>
                    <Menu>NodeJS SAMPLE PANEL</Menu>
                    <Geometry>
                        <Size>
                            <Height>540</Height>
                            <Width>600</Width>
                        </Size>                       
                    </Geometry>
                </UI>
            </DispatchInfo>
        </Extension>
        <Extension Id="com.my.localserver">
            <DispatchInfo>
            <Resources>
                <MainPath>./client/localServer.html</MainPath>
                <CEFCommandLine>
                    <Parameter>--allow-file-access</Parameter>
                    <Parameter>--allow-file-access-from-files</Parameter>
                    <Parameter>--enable-nodejs</Parameter>
                    <Parameter>--mixed-context</Parameter>
                </CEFCommandLine>
            </Resources>
            <Lifecycle>
                <AutoVisible>false</AutoVisible>
            </Lifecycle>
            <UI>
                <Type>Custom</Type>
                <Icons />
            </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Your First Fullstack Panel</title>

    <script>
            console.log(" console log in index.html test " );
        </script>
</head>
<body>
    <!-- Simple HTML UI elements to get us started. -->
    <h1>Your First Full Stack Panel</h1>
    <button id="import-button">Import from external server</button>

    <!-- Add you dependencies here -->
    <script src="../lib/jquery-1.9.1.js"></script>
    <script src="CSInterface.js"></script>
    <script src="index.js"></script>
</body>
</html>

index.js

/* Create an instance of CSInterface. */
var csInterface = new CSInterface();

/* Load your server extension */
csInterface.requestOpenExtension("com.my.localserver", "");

/* Make a reference to your HTML button and add a click handler. */
var openButton = document.querySelector("#import-button");
openButton.addEventListener("click", importDoc);


if (typeof(require) !== 'undefined') {
    alert("Node.js is enabled");
} else {
    alert("Node.js is disabled");
}

/* Get the path for your panel */
var extensionDirectory = csInterface.getSystemPath("extension");

function importDoc() {
    /* Make sure to include the full URL */
    //https://www.countryflags.io/be/flat/64.png //Test url, this one returns a success, but doesn't execute server code?
    console.log("Function: importDoc()");
    console.log("extensiondirectory = " + extensionDirectory);
    var url = "http://localhost:3200/import"; //Port 8088 atleast returns "Not Found"-error instead of nothing, but that might be becuase of the .debug port.

    console.log("communicating with server");
    /* Use ajax to communicate with your server */
    $.ajax({
        type: "GET",
        url: url,
        headers: {
            "directory": extensionDirectory
        },
        success: response => {
            /* Use the ExtendScript function to display the downloaded file */
            console.log("SUCCESS IN RESPONSE");
            csInterface.evalScript(`openDocument("${response}")`);
        },
        error: (jqXHR, textStatus, errorThrown) => { 
            console.log(jqXHR);
            console.log(" ///textstatus= " + textStatus);
            console.log(" /// errorthrown= " + errorThrown);
            alert(errorThrown, jqXHR.responseJSON);
        }
    })

}

localserver.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        console.log(" ============== localserver.html ================= " );
        console.log(__dirname + + '/server/main.js');
        /* This script uses cep_node to start the Node.js server located at '/server/main.js' */
        var localServer = cep_node.require(__dirname + '/server/main.js')();
    </script>
    <title>Import Example App</title>
</head>
<body>
</body>
</html>

server/main.js

/* npm Modules */
const express = require("express");
const app = express();
const request = require('request');
const http = require('http');
const path = require("path");
const bodyParser = require("body-parser");
const fs = require('fs');
const httpServer = http.Server(app);

console.log("main.js code started");

module.exports = run

function run(){
    console.log("//////////////////////////////////////")
    console.log("SERVER CODE")
    var port = 3200;
    var hostname = "localhost"

    /* Start the server */
    httpServer.listen(port, hostname);

    /* Middlewares */
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ limit: '50mb',extended: true }));
    app.use(express.static(path.join(__dirname, "../client")));

    /* /import route that can be hit from the client side */
    app.get("/import", (req, res, next) => {

        console.log(" ========================= app.get ===========================");
        /* Get the directory path from the header and name the file */
        var path = req.headers["directory"] + "/placeholder.png"

        /* This is an example URL */
        var uri = "http://via.placeholder.com/350x150";

        /* write a helper function to download the image and save it */
        var saveImage = function(uri, filepath, callback){
            request.head(uri, function(err, res, body){
                request(uri).pipe(fs.createWriteStream(filepath)).on('close', callback);
            });
        };

        saveImage(uri, path, function(){
            /* Send the path back to the client side */
            res.status(200).send(path)
        });


    });
}

host/index.jsx

// function openDocument(){
//     var fileRef = new File("~/Downloads/MyFile.jpg");
//     var docRef = app.open(fileRef);
//     }

function openDocument(location){
var fileRef = new File(location);
var docRef = app.open(fileRef);
}

我做错了什么明显不对的地方吗？这是否与 manifest.xml 中错误的版本号有关？我真的不知道为什么服务器甚至不会启动或给出任何反馈，因为 nodejs 本身肯定已启用，我们将不胜感激。

Answer 1

最初发表于此的文章有评论：

https://community.adobe.com/t5/premiere-pro/cannot-get-csinterface-to-open-extension-server-invisibly-alongside-panel/td-p/10437661 来自 sven-vm

他说替换：

<UI>
    <Type>Custom</Type>
   <Icons />
</UI>

与

<UI>
  <Type>Custom</Type>
  <Geometry>
    <Size>
      <Height>600</Height>
      <Width>600</Width>
    </Size>
  </Geometry>
</UI>

这对我有用。

Adobe Premiere Pro CEP-无法与面板一起启动节点js本地服务器

Adobe Premiere Pro CEP- Cannot start nodejs localserver alongside panel

javascript

adobe

panel

node.js

adobe-premiere