Text Across The Page/Video-Camera-Screen?

[ChrisJ]

Is it possible to add scrolling text across the page/video-camera-screen?

On an html page, it uses this code:

accept="video/*"

in this context:

<input type="file" name="fileToUpload" id="fileToUpload" accept="video/*" capture="user" onchange="submitForm();">

and when you view the page via mobile, and tap the page, your video camera screen appears. I'm looking to see if it's possible to add scrolling text across the page/video-camera-screen ? like some type of overlay? I would image it may be possible on an html page that displays a web cam, with something like this:

<video autoplay="true" id="videoElement"></video>

I look forward to any comments/suggestions/guidance.

[rproffitt]

Remember I did not test this out but you might be able to do this with CSS and some javascript.

1. The overlay text via CSS: https://codeconvey.com/html5-video-overlay-text/
2. Now in your javascript, move that element.

[ChrisJ]

Thanks you for your reply.
I have created a link to the page that I'm asking about. Apparently it expires in 6 days. I've never used this temporary file hosting site/service before (tiiny.site), but it looks like it works currently. The html page I'm asking about is at : https://mobileview.tiiny.site/
I look forward to any additional comments/suggestions/guidance.

[rproffitt]

To achieve that effect you would code it as noted in my first reply. Remember this forum is mostly programmers and once in a while a person is looking for a no-code solution or for someone to write it for them. I can't guess why the CSS and JavaScript isn't an option for you.

[ChrisJ]

Hi, thank you for your kind reply. I believe your suggestion is for a web page video. My needs is on a web page, that gets tapped via mobile view and shows a camera app. I have a sample at https://mobileview.tiiny.site/ to be viewed via mobile device.

I tried to integrate my code with your suggested code with no success. Any additional help is appreciated.

Also, I don't know what you're trying to tell me here: "Remember this forum is mostly programmers and once in a while a person is looking for a no-code solution or for someone to write it for them."

I am looking for programmer help, aren't I?

I look forward to any helpful reply. Much thanks again.

[rproffitt]

"I am looking for programmer help..."

As in programmer to programmer? Yep. But if you need a finished app, you look to source such as fiverr and other places.

-> BUT maybe I misunderstood what you wanted. I read this as "playback a video and scroll text over it." Your last reply wrote "tapped" and I would be guessing you meant "taped" as in recording, not playback. That's a whole different ballgame.

As it stands I can see a way to overlay and move text with my first idea. But if you want to record and overlay, again, whole other ballgame. I worry I don't understand what you want entirely.

[ChrisJ]

Thanks again for your reply.
Regarding "I don't understand what you want entirely", to be understood I put a link on my reply to show exactly what I mean. To get a better understanding all that is needed is to view this page, via a mobile device,: https://mobileview.tiiny.site/ and "tap" the page, I believe it may give a better idea of what I mean.

Thanks again.

[rproffitt]

You may show what you want but then you wrote "tapped" and write about pulling up a camera app (i.e. recording.) That's well outside the bounds of playback of a video with some text overlay. Maybe you meant taped (i.e. recording) on the phone but here I have to go with asking for clarification.

I'll be clear that text overlay via the methods I noted has been done many times. Moving the text to get the scrolling is done with changing the text or text location is with Javascript.

Again, what you wanted was made unclear by use of the word "tapped" and meantion of the camera app.

[Dani]

There are two very different ways to accomplish what you're asking. The first is, as I believe has been suggested above, to use Javascript to create a scrolling message that overlays on top of where you would display your video on a website. Remember, everything in a DOM document (webpage) is layered, so you can always choose which elements to overlay on top of all other elements.

Secondly, and I'm not sure anyone would actually want to tackle this, but programatically alter the video itself to add an overlay to it. I'm personally not sure how to do this, but I'm relatively sure it could be done.

[ChrisJ]

Thanks for the replies, but I'm not clear if anyone has looked at my link example (via mobile device viewing).
I think viewing there and proceeding, would help clarify my request.
Also, this is not about 'playback'.

[rproffitt]

Viewing is playback of a video. I know English is hard.

[ChrisJ]

Regarding: "viewing is playback of a video", this is not about viewing or playback, it is scrolling text when "recording"

[rproffitt]

everything in a DOM document (webpage) is layered, so you can always choose which elements to overlay on top of all other elements.

• Dani

My work was specific to playback of video content but as Dani pointed out it's a DOM document and you would overlay as you wish. But it's not going to be something I can code for you since it's your code and you would know the element names and then the Javascript to alter the overlay text as you wish.

After some thought, the solution looks to be the same as I lead with above. There are "programming challenge" sites as well as sites like fiverr.

[Dani]

Is it possible to add scrolling text across the page/video-camera-screen?

I'm not familiar with this terminology. What is a "video-camera-screen"? Is that something specific I'm unaware of? (Why the dashes?)

[rproffitt]

Dug a little deeper into your goal and the built in camera/video recorder doesn't embed in the web page (your demo page fails to overlay because it's calling up the Android native video recorder app.)

-> Let's pivot/change the question to "How would I embed a video recorder in my web page?"

We know Zoom and other sites can do this so asking this question may be a better way to make some progress.

Let's look at the camera method you used. It's not going to be a web element as we read:

Once the user has finished recording and they are back in the website

• https://developers.google.com/web/fundamentals/media/recording-video

So to the method you lead with above the answer is a solid no. But if you change to something else as https://www.google.com/search?&q=How+would+I+embed+a+video+recorder+in+my+web+page%3F answers with many possible solutions then an overlay given the method I noted looks correct.

[ChrisJ]

Thank you for your reply and for "dug a little deeper", much appreciated, I did see the quote from the link "and they are back in the website".
However, this link does that same thing. If you view this link (I shortened it, it was quite long) , via mobile device, and choose 'record from camera'
you will see a countdown overlay, 5 4 3 2 1.
I would be interested to know how that overlay is accomplished being that this link is via a web .com page:
https://bit.ly/33D2A6f

I look forward to any additional guidance.

[rproffitt]

I was on my Moto 7 and saw no overlay from the web link or code. Remember that the method in your demo link up top is exactly the method Google lead with and for your purpose is a dead end.

As to your new bit.ly that is the method I wrote about later. I see in the code "Camera Tag : Browser-Based Webcam Video Recording Service And Developer API".

This is not an API I'm familiar with so you have to ask them how to integrate this with your site.

Sorry but no, it's not free as I read https://www.cameratag.com so I must defer its use to them.