我一直在尝试为Premiere Pro CC 2019进行面板开发,现在尝试遵循https://medium.com/adobetech/how-to-build-a-node-js-server-in-a-panel-ba1d63ea67e2中的教程,在面板上将Node.js与本地服务器一起创建本地服务器,但是我无法使其正常工作
我已经在这里上传了我的代码,该代码与本教程在更新的manifest.xml版本号旁边没有什么不同:https://github.com/VanMuylemSven/AdobePanelNodeSample
单击面板将返回一个空警报,该警报已在Premiere Pro CC 2019和Photoshop CC 2019中进行了测试
启用调试总是告诉我连接被拒绝,并且本地服务器中的任何控制台日志都不会被触发。
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>
服务器/ 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)
});
});
}
主机/ 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中错误的版本号有关吗?我真的不知道为什么服务器肯定不会启用,为什么服务器甚至都不会启动或给出任何反馈,所以不胜感激。
最佳答案
最初在此处发布的文章有评论:
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>
这对我有用。
关于javascript - Adobe Premiere Pro CEP-无法在面板旁边启动Node.js LocalServer,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55041131/