Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Notes to fix mp4 webcam stream showing up as empty (black box) #834

Open
4 of 12 tasks
rsteckler opened this issue Jul 10, 2023 · 0 comments
Open
4 of 12 tasks

Notes to fix mp4 webcam stream showing up as empty (black box) #834

rsteckler opened this issue Jul 10, 2023 · 0 comments

Comments

@rsteckler
Copy link

rsteckler commented Jul 10, 2023

Description

I'm using go2rtc to convert a camera rtsp stream to mp4 so it's visible in cncjs. There are other ways to do this (e.g. ffmpeg). The result is a url that looks like this:
http://go2rtc.home/api/stream.mp4?src=camera1&mp4=flac

That fails to load in cncjs because it fails to recognize it as a video feed, which is intended to happen here in the webcam widget.

A workaround for the moment is to append something like &unused=.mp4 to the url, which won't affect the stream and will pass the check above.

The medium term fix is to use the following regex instead, to check for a variety of supported video formats:

const isVideoStream = url => (/\.(mp4|3gp|ogg|wmv|webm|flv|avi*|wav|vob*)$/i).test(url)

... but that's prone to false positives like from a url of http://localhost/myn.avigationimage.png (where n.avigation contains AVI and will trigger as a video feed).

The best long-term fix is to do a HEAD fetch and determine the mime-type, as follows:

function isVideoUrl(url) {
  return fetch(url, {method: 'HEAD'}).then(res => {
    return res.headers.get('Content-Type').startsWith('video')
  })
}

That solution will need to handle redirects and also I'm not sure if there are other instances of the front-end making async http requests from the browser, so I'd look to the owners here for guidance on that architectural decision.


Leaving boilerplate below to satiate any bots:

Versions

  • CNCjs: 1.9.x
  • Node.js: 6.x
  • NPM: 5.x

How Do You Install CNCjs?

  • NPM
  • Download the CNCjs Desktop Application

CNC Controller

  • Grbl
  • Smoothieware
  • TinyG/g2core

Hardware

  • Raspberry Pi
  • Desktop or Laptop
  • Mobile Device

Operating System

  • Not Applicable
  • Windows
  • Mac
  • Linux
  • [ ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant