Not able to Preview the Segments and Edit the Video

[rtong02]

I have deployed the backend services and UI in App Script (npm start) but when I uploaded the video, I was not able to edit and preview the video. I checked the cloud function and got the error below. subprocess.CalledProcessError: Command '['ffmpeg', '-i', '/tmp/tmp2mou0m5m/input.mp4', '-filter_complex', '[0:v]sendcmd=f=/tmp/tmp2mou0m5m/square.txt,crop[cropped];[cropped]crop=0:0', '/tmp/tmp7ey1i6ip/square.mp4']' returned non-zero exit status 1.

at .run ( /layers/google.python.runtime/python/lib/python3.10/subprocess.py:526 ) at .execute_subprocess_commands ( /workspace/utils/utils.py:164 ) at .execute_subprocess_commands ( /workspace/utils/utils.py:182 ) at ._create_cropped_video ( /workspace/combiner/combiner.py:440 ) at ._create_cropped_videos ( /workspace/combiner/combiner.py:392 ) at .render ( /workspace/combiner/combiner.py:292 ) at .gcs_file_uploaded ( /workspace/main.py:61 ) at .wrapper ( /layers/google.python.pip/pip/lib/python3.10/site-packages/functions_framework/init.py:81 ) at .view_func ( /layers/google.python.pip/pip/lib/python3.10/site-packages/functions_framework/init.py:188 ) at .wrapper ( /layers/google.python.pip/pip/lib/python3.10/site-packages/functions_framework/execution_id.py:106 ) at .dispatch_request ( /layers/google.python.pip/pip/lib/python3.10/site-packages/flask/app.py:1502 ) at .full_dispatch_request ( /layers/google.python.pip/pip/lib/python3.10/site-packages/flask/app.py:1516 ) at .full_dispatch_request ( /layers/google.python.pip/pip/lib/python3.10/site-packages/flask/app.py:1518 ) at .wsgi_app ( /layers/google.python.pip/pip/lib/python3.10/site-packages/flask/app.py:2073 )

[mohabfekry]

Those are two different issues. The error you see in the cloud function logs doesn't happen before you try to "render" video variants that you've added to your render queue. So it can't have happened while trying to process a video.

Are you sharing your Google Cloud Project / ViGenAiR instance with another colleague who might have ran into this issue? Or have you indeed tried to render a variant?

The problem that happened as shown by the error is that the video width and height have been identified as 0 and 0 respectively, which anyway might be a side effect of the fact that you can't properly view the video in the UI.

With regards to the UI, it seems to me that you don't have Google Cloud Storage Object Viewer (or more privileged) access, and because of that the video and each segment's screenshot aren't being accessible in the frontend.

Did you follow the prerequisites listed in the "requirements" section of the readme?

Please also open your browser's logs view (Ctrl/Cmd+shift+i in chrome for example) and share a screenshot of the UI errors, which might already hint towards the access issue I raised above.

[rtong02]

Thank you for your reply

1. Yes, I also tried to render the variant.
2. I had the owner role for the GCP Project and here is the screenshot

[mohabfekry]

All Google Cloud Storage resources are accessed via mTLS URLs (storage.mtls.cloud.google instead of storage.cloud.google). These URLs include your "identity" signature after you've authenticated to GCS.

When you first logged in to the UI you would have been prompted to "authenticate" to GCS and allow access, but it seems this didn't happen. I believe you might have overlooked this step or it might have been in a popup that was blocked.

A couple of clarification questions:

• Are you logged in to chrome / are accessing the web app with the same user account that has access to GCP?
• Are you logged in to chrome with "multiple" accounts (e.g. your private account and another company account perhaps)?

Can you try to access the UI in a new "incognito" window (so you're forced to log in with only 1 account - the same account that has access to GCP) and make sure you "unblock" any popups?

[rtong02]

I tried using the "incognito" window to open the app but still got the same error.

[mohabfekry]

Could you please inspect any of the "broken" image URIs or the video URI and access that in a separate window? What error do you receive there?

e.g. the video URI is storage.mtls.cloud.google.com/\<gcp-project-id>-vigenair/\<root-video-folder>/input.\<video-file-extension>

[rtong02]

I got the 403 Forbidden Error.

[mohabfekry]

Yes that's understandable. I meant can you check the "network" tab and see if there are any redirects happening or so? Are there any cookies being sent with the request in the "Request" headers?

What happens if you navigate to GCS and "view" the files? => console.cloud.google.com/storage/browser/\<gcp-project-id>-vigenair/ then navigate to your video folder and click on the "input".\<video-file-extension> file for example. Are you able to access the object and "preview" it?

The problem you are facing is a "Google Cloud Storage" access issue and not a ViGenAiR issue, so I'm trying to debug the access problem to help you resolve it, which will in turn "fix" your UI display.

[rtong02]

1. There is no redirects happening and there is an cookie in the request headers
2. I could access the object and preview it from Cloud Storage directly.

[mohabfekry]

Ok, please examine the URL of your Web App? It usually follows this structure: https://script.google.com/a/macros/<workspace domain>/s/<web-app-ID>/exec

Do you have anything else in there, like a /u0/ or a /u1/ segment?

Could you also please navigate to your script project (https://script.google.com/ and find the "ViGenAiR" project), then from the top-right "Deploy" menu item select "Test deployments"? You should receive a new URL that follows a similar structure to the above but ends with /dev instead of /exec. Could you please visit the web app with this URL and see if anything changes?

[rtong02]

The dev website didn't solve the preview permission issue. But I changed the bucket to public and it solved the issue. But I feel like this is not the appropriate approach.

[mohabfekry]

Yes it's not. There's definitely something wrong going on with your Cloud Project or your internet browser, because you say you're able to access the files in the Cloud Storage browser but when you access the same files via their mTLS URLs you get 403. Either your browser is sending the wrong authentication token (because you're logged in with multiple or a different user than the one that has access to GCP) or you're somehow missing the proper "Object Viewer" or "Storage Admin" roles.

Since this is a Google Cloud issue and not related to ViGenAiR I'm closing it, but I encourage you to reach out to Google Cloud support from within your GCP project to raise this issue.