Media URLs seem incorrect when not local

[dustin]

I noticed in console two problems:

1. The service was trying to contact localhost:9090 for media (page snapshots, e.g.).
2. The service was trying to use file:// for videos

I was able to work around #1 by specifying VITE_ARTIFACT_API_BASE_URL=http://remotehost:9090 (very sensitive to trailing slash).

It would probably be good to include an example in the docker compose file.

But for 2, I don't have a workaround. It seems to just always want to serve that from a place that won't exist on my filesystem.

[suchintan]

@dustin what kind of example would be good in the docker compose? We have this right now:

skyvern/docker-compose.yml

Line 97 in 8f3d7c8

# - VITE_API_BASE_URL=http://localhost:8000/api/v1

Are you open to a suggestion / PR?

#2 - By default it just writes to the local filesystem. You can set up AWS + set storage type to be S3 instead (https://github.com/Skyvern-AI/skyvern/blob/main/skyvern/forge/app.py#L27)

[dustin]

I had to set VITE_API_BASE_URL in addition to VITE_ARTIFACT_API_BASE_URL (the latter I found by digging through code and then trial-and-error until I got it working). An example of this would be helpful.

For the media (2), all of these things write to the local filesystem, don't they? The surprising part is that the URLs are all file:// which wouldn't work in many cases (e.g., writing to /data in the docker container and then serving up file:///data isn't going to work unless I put this application's data at the root of /data on one's computer which seems unlikely). Instead, why can't this just work similarly to the rest of the images?

[suchintan]

Updated: #1699

Thanks for the feedback @dustin

[Th3Heavy]

what is the solution for watch video recording, for a local installation on kubernetes ?
i can see screenshot. but i get this to see video:

Not allowed to load local resource: file:///data/artifacts/tsk_362042468532950184/00_0_stp_362042468532950186/2025-02-19T15:09:46.906620_a_362042494302753966_recording.webm

Code 200 for image:
https://skyvern.xxx/artifact/image?path=/data/artifacts/local/workflow_runs/wr_362042464237982880/wrb_362042464237982886/2025-02-19T15:09:46.886523_a_362042494302753964_screenshot_llm.png

[mingfang]

what is the solution for watch video recording, for a local installation on kubernetes ? i can see screenshot. but i get this to see video:

Not allowed to load local resource: file:///data/artifacts/tsk_362042468532950184/00_0_stp_362042468532950186/2025-02-19T15:09:46.906620_a_362042494302753966_recording.webm

Code 200 for image: https://skyvern.xxx/artifact/image?path=/data/artifacts/local/workflow_runs/wr_362042464237982880/wrb_362042464237982886/2025-02-19T15:09:46.886523_a_362042494302753964_screenshot_llm.png

I'm seeing the same problem; My VITE_ARTIFACT_API_BASE_URL is correct and I'm seeing other artifacts such as screenshots.

But the recordings are not working.
This is strange because I did find this code that should make it work.

skyvern/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts

Line 28 in 2d24055

return `${artifactApiBaseUrl}/artifact/recording?path=${task.recording_url.slice(7)}`;

Please re-open this issue.

[Th3Heavy]

idk how but now it's work..
i will edit if i find anythings

i set this:
VITE_WSS_BASE_URL: wss://skyvern.xxxx/api/v1
VITE_API_BASE_URL: https://skyvern.xxxxx/api/v1
VITE_ARTIFACT_API_BASE_URL: https://skyvern.xxxxx

[mingfang]

I found the problem.

The conversation from file:// to https:// currently only happens in

skyvern/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts

Line 28 in 2d24055

return `${artifactApiBaseUrl}/artifact/recording?path=${task.recording_url.slice(7)}`;

and that is only called for task details here

skyvern/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx

Line 24 in 2d24055

return getRecordingURL(task);

The problem I'm seeing is for workflow details

skyvern/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunRecording.tsx

Line 5 in 2d24055

const recordingURL = workflowRun?.recording_url;

I made a quick and dirty hack locally by changing that function to convert the URL, like this

import { useWorkflowRunQuery } from "../hooks/useWorkflowRunQuery";
import { artifactApiBaseUrl } from "@/util/env";

function WorkflowRunRecording() {
  const { data: workflowRun } = useWorkflowRunQuery();
  console.log(workflowRun)
  let recordingURL = workflowRun?.recording_url;
  if (recordingURL?.startsWith("file://")) {
    recordingURL = `${artifactApiBaseUrl}/artifact/recording?path=${recordingURL.slice(7)}`;
  }
  return recordingURL ? (
    <video src={recordingURL} controls className="w-full rounded-md" />
  ) : (
    <div>No recording available for this workflow</div>
  );
}

export { WorkflowRunRecording };

A better fix would be to make artifactUtils not task specific so that it would work for workflow details also.
A even better fix is to never use file:// at all and always use https:// for all artifact URLs.

[suchintan]

Great find @mingfang -- this is a pernicious bug. Are you open to opening a PR?

[mingfang]

@suchintan can you please review my PR?