Watch videos on phone or tablet

[whyboris]

Huge thank you to @cal2195 for his code 🙇

This code comes from his transcoding-video branch 🥇

This is meant to be released in tandem with whyboris/Video-Hub-App#611 🤝

[whyboris]

@cal2195 -- do you have interest and time to glance at something? 😊

Video is working well (thanks to you code 🙇‍♂️) on the browser on the computer. But whenever I open the remote (the webpage served by the VHA server) the video is absent -- the controls appear where you would expect (as they are their own HTML elements), but instead of a black rectangle for video, or video, it's as if there is a transparent rectangle instead of the video (the size is set by CSS) - so the element may be absent or not rendered or rendered as a rectangle with transparent background 😖

There's no way to "inspect" in iOS -- so I'm stuck for now 😢

[cal2195]

I'll take a proper look when I get a bit of free time, but if I were to guess, I'd expect it's security issues from the mobile side - phones are a lot more restrictive.

Have you tried adding access-control-allow-origin: * to the headers returned from the server? Possibly a http/https mixing issue?

What's the best way to test out the remote side of the app, btw? Is there a port to access from the VHA app, or do I install something on my phone? 😄

[cal2195]

On Android btw, I believe you can enable dev mode and attach your chrome browser to the instance running on the phone, giving you full access to inspect and the dev tools:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging

[whyboris]

Thanks -- I'll try some more things today; there's at least one more test I hadn't done to narrow down the problem. Will comment here when I do.

To test, the transcoding-video branch on VHA is something you'll need to npm install and npm start 🚀
In Settings go to Current hub and click Start server (it will have the port in the UI, default is 3000)

This project remote just runs in parallel (npm start) and runs on port 4000 -- you can test locally by going to localhost:4000 to see it go 🚀

To test on mobile, you'll need to put the built assets from this repository npm run build from dist/remote folder into the /remote folder on the VHA repository (you can keep the server running while swapping the new files) 👍 and connect to localhost:3000 (to get the assets served from the app).

If you npm run electron (build VHA) you can put the assets from dist/remote into the assets/remote folder in your C:\Program Files\Video Hub App 3\assets\remote 🚀 also see documentation

No pressure on looking into it 😊

[whyboris]

Update I figured out some things -- seems like it's not the <video> tag fault, but a problem with Safari (I was testing on Mac desktop).

The easiest thing to see is to open the url for the video directly in browser and see that it doesn't work 😅 Safari in the console shows Failed to load resource: Plug-in handled load

The problem, I strongly suspect, has to do with Safari expecting a 206 Partial Content response (see StackOverflow) with a server endpoint that accepts ranges: Partial Content -- https://medium.com/@vishal1909/how-to-handle-partial-content-in-node-js-8b0a5aea216

This link points to a GitHub repository: https://github.com/phoenixinfotech1984/node-content-range and the code works (but without using FFmpeg to transcode).

I'll be testing things out -- but so far nothing to investigate on the Front end side -- it's not an HTML issue (at least not until I can get the video to play in Safari on a Mac). 👌

[cal2195]

Just a thought, but what happens if you just set the response code to 206? And maybe through in the content range header for good measure? 😄

[whyboris]

Thank you - I tried the 206 thing but was not successful (could have been my implementation).

I'll come back to this feature in a few months (when I'm done with my new-in-development image app 😎 )