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

[rsteckler]

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
• [ ]