axiscommunications/media-stream-library-js

JavaScript library to handle media streams on the command line (Node.js) and in the browser.

Media streams and overlay

This repository hosts 3 different libraries used for playback of video streams and enabling simpler SVG overlays.

For development, you'll need a local installation of Node.js, and yarn to install dependencies.

media-stream-library-js's Issues

Add docker image with gstreamer RTSP server

To test the RTSP stream without a camera, we can use a gstreamer RTSP test server. Having a docker image for this would enable us to easily do automated browser tests.

Expose MessageType enum

First off thanks again for creating this library, I'm a big fan of your pipeline architecture, it gives me the ability to create my own component and re-use some of yours in a custom pipeline. One problem I am having is after I transform my stream in my custom component, I wish to send that data to the Mp4Muxer component, doing so I need to add a type of MessageType.SDP or MessageType.ELEMENTARY, currently I have had to hardcode a copy of the MessageType enum in my project. It would make it much easier if this enum was exposed in your library. I will try and create a pull request with this change later today

Video element argument missing

Hello,

When I am trying to use simple.html sample, I am getting this error. Please help

Uncaught (in promise) Error: video element argument missing
at new e.exports (media-stream-library.min.js:1)
at new e.exports (media-stream-library.min.js:1)
at play (simple-player.js:42)
at HTMLButtonElement.playButton.addEventListener (simple-player.js:69)

Error while running the browser example

On the browser console I see this:
Firefox cannot establish a connection to the server at ws://127.0.0.1:8854/

On the terminal, this is what I see:
"GET /axis-cgi/rtspwssession.cgi?1561702741825" Error (404): "Not found"

Please suggest what am I doing wrong.

Include TypeScript Definitions to Published NPM

First off I want to thank you guys for open sourcing this library and also recently updating to TypeScript. This new issue references a recently closed enhancement request, I was hoping you guys could include the typescript definitions when publishing the repo to NPM?

Delay on Firefox

Hi,

I noticed a strange delay on Firefox,
I compared the on-board video client with the simple-player sample, both on Firefox.

Simple-player sample got stuck for 10 seconds and after that 10 seconds it start to work perfectly,
but this behavior is not happening on the on-board client.
On the other side this is not happening on Chrome, where the sample works perfectly as expected.

I'm working on a wired local network with an Axis AXIS P1448 (Firmware 8.30.1, Web 2.5.1.15)
I'm using the simple-player sample, in the examples folder.

thanks for any feedback

unknown chunks in RTSP-Parser

Hi,

randomly I have an Exception in RTSP-Parser method _setState(), because the first chunk is either an IDLE, INTERLEAVED or RTSP chunk.
It is quite hard to log this exception but I could log 2 chunks which result in the exception:
1d c4 e9 db ca b4 c9 64 66 e4 4f d6 79 0e 3b 0e da c8 48 cf 75 51 4b 8f 86 c6 12 35 22 75 19 71 41 0a e1 d7 53 0d fa 69 e5 89 55 f7 10 bd ad ee 26 11
and
ac b7 61 92 29 17 0f 34 2c 70 43 ef 35 b7 cb 38 5d 82 09 e7 3e c4 e1 23 68 3a bd 13 bb 4f a0 3e 0e df 3e 83 ac 66 c5 c2 73 25 cb 9d cd 94 5a 14 c9 76

Does anybody know what this chunk could be?
I am running several camera streams in parallel, but I don't know if this is important to reproduce the error. I will try this at night with a single camera.

How would a more resistent implementation looks like? May be just ignoring such bad chunks?

The html-video-pipeline cannot be closed

It should be possible to close the html-video-pipeline by terminating the websocket connection.
A .close() method on the pipeline would do the trick, calling .outgoing.end() on the websocket component.

Feature request: Include dist folder when publishing package

Is it possible to include the dist folder when publishing ? Your company did this with locomote.

Currently when we do a yarn add we only get the sources. So when we want to use this lib we have to compile it manually. I'm using angular and I need to include the min.js file in my scripts. This way it will be loaded with the app.

Adding dist is easy, we just need a .npmignore file at the root. The syntax is the same as for .gitignore but it is used only when publishing the lib. NpmIgnore documentation. This way we can avoid having the dist in github, we only have it in npmjs repository.

If you accept this request, I would gladly make a pull request.

The NPM package build doesn't support Internet Explorer 11

Hei,

When I use the NPM package build, Internet Explorer cannot load the library.

import { pipelines } from 'media-stream-library/lib/index.browser';

However, if I download the .min.js file from the Github Releases and import it manually, then it works with Internet Explorer.

Could it be possible to include a IE 11 compatible build inside the NPM package ?

Thanks.

Add browser tests

It would be good to add actual browser tests. We could use the main pipeline that is used in the browser example and test it on a browser matrix, for example with saucelabs.

TypeError: Cannot read property 'map' of undefined

Accessing boxBuilder.trackData before it's defined causes this.
Can happen if someone asks for e.g. framerate before movie started.

Invalid use of the 'super' keyword

Using a shorthand method name in an object in a constructor with a super does not work in Microsoft Edge 41.16299.371.0, Microsoft EdgeHTML 16.16299. It results in a Invalid use of the 'super' keyword error.

Replacing:

const incoming = new Transform({
      objectMode: true,
      transform (msg, encoding, callback) {

With:

const incoming = new Transform({
      objectMode: true,
      transform: function (msg, encoding, callback) {

Seems to work for now.

I filed a bug in ChakraCore for this as well: chakra-core/ChakraCore#5030

Browser Example not working- Testing with Axis Camera

Commit ID: commit 16a3811

I am not able to run the browser examples given in this library with Axis Camera.

Please find the error message from console.

media-stream-library.min.js:1 Uncaught SyntaxError: Unexpected token .

simple-player.js:1 Uncaught TypeError: Cannot destructure property `pipelines` of 'undefined' or 'null'.
    at simple-player.js:1
(anonymous) @ simple-player.js:1

Please find the error snapshot below:

Image

From this log it is clear that there is some problem with the Authentication method. Please help me with this or let me know how I need to provide the credentials.
Let me know if you need any other information.

D:\NodeJS\media-stream-library-js>npm run examples

> [email protected] examples D:\NodeJS\media-stream-library-js
> webpack --mode development && http-server examples/browser

Hash: d10d465926ec8dd365a2
Version: webpack 4.34.0
Time: 6068ms
Built at: 06/19/2019 9:43:39 AM
                           Asset      Size  Chunks             Chunk Names
dist/media-stream-library.min.js  1.12 MiB    main  [emitted]  main
Entrypoint main = dist/media-stream-library.min.js
[./lib/index.browser.ts] 202 bytes {main} [built]
[./lib/pipelines/html5-canvas-pipeline.ts] 5.75 KiB {main} [built]
[./lib/pipelines/html5-video-metadata-pipeline.ts] 2.92 KiB {main} [built]
[./lib/pipelines/html5-video-pipeline.ts] 5.15 KiB {main} [built]
[./lib/pipelines/index.browser.ts] 303 bytes {main} [built]
[./lib/pipelines/metadata-pipeline.ts] 4.41 KiB {main} [built]
[./lib/pipelines/pipeline.ts] 5.46 KiB {main} [built]
[./lib/pipelines/rtsp-mjpeg-pipeline.ts] 2.67 KiB {main} [built]
[./lib/pipelines/rtsp-mp4-pipeline.ts] 4.31 KiB {main} [built]
[./lib/pipelines/rtsp-pipeline.ts] 3.75 KiB {main} [built]
[./lib/utils/clock.ts] 2.93 KiB {main} [built]
[./lib/utils/config.ts] 1.49 KiB {main} [built]
[./lib/utils/index.browser.ts] 58 bytes {main} [built]
[./lib/utils/protocols/ntp.ts] 472 bytes {main} [built]
[./lib/utils/scheduler.ts] 7.36 KiB {main} [built]
    + 265 hidden modules
Starting up http-server, serving examples/browser
Available on:
  http://10.0.75.1:8081
  http://192.168.1.114:8081
  http://169.254.45.66:8081
  http://127.0.0.1:8081
  http://172.17.163.65:8081
Hit CTRL-C to stop the server
[Wed Jun 19 2019 09:44:57 GMT+0530 (India Standard Time)] "GET /camera/simple.html" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"
[Wed Jun 19 2019 09:44:57 GMT+0530 (India Standard Time)] "GET /media-stream-library.min.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"
[Wed Jun 19 2019 09:44:57 GMT+0530 (India Standard Time)] "GET /camera/simple-player.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"
[Wed Jun 19 2019 09:44:57 GMT+0530 (India Standard Time)] "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"
[Wed Jun 19 2019 09:44:57 GMT+0530 (India Standard Time)] "GET /favicon.ico" Error (404): "Not found"
[Wed Jun 19 2019 09:45:47 GMT+0530 (India Standard Time)] "GET /camera/simple-overlay.html" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"
[Wed Jun 19 2019 09:45:47 GMT+0530 (India Standard Time)] "GET /camera/simple-overlay-player.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"

Please find the HTTP server logs below:
Image

Thanks in advance.

ES5 and IE 11 support

Any plans on supporting/including an ES5 / IE 11 compatible bundle?

We'd like to be able to do something like this: import { pipelines } from 'media-stream-library/dist/es5/index.browser';

Attempting to import the pipeline directly from the library and compiling it ourself doesn't seem to work with our current setup as media-stream-library dependencies throw non-strict mode errors.

Using version: 6.0.0-alpha.2

Improve code coverage of the MP4 muxer

Find a way to add good unit tests for the MP4 muxer component and helpers.

Stream interruption detection

I'm using the WebSocketRtspVideo pipeline to stream video.
However, if there is a connection interruption it seems the player just freezes.
Is there a way or event to detect that the stream/socket connection breaks? So that I may take action or inform the user?

Make sure the correct preset is used with .babelrc

If no .babelrc is present, webpack with look for a global .babelrc
before using preset in its config. To avoid config duplication the
preset is removed from webpack.config.js and a local .babelrc is added.

The stream delay may grow a lot and will not go back to normal

Hi,

In some situations (networks latency / issues / dynamic FPS bug), the stream delay may grow a lot, sometimes up to 20 seconds. It never goes back to a normal. The solution is then to restart the stream, which involves some back and forth RTSP commands (it's slow), or to play with the currentTime and buffered properties of the media element but it's not working all the time and we feel like this should be handled by the library.

Could media-stream-library-js handle high latency / broken stream / stalled streams ?

Feature request: Typescript definition

Nowadays a lot of js library provide definition for typescript. I would be nice to follow the movement. 😉

I know that it's not done in 5min, but I would be of a great help for those working with typescript.

I would gladly help you if this request is accepted.

Unable to start a stream on Safari iOS

When we try to play a stream on Safari iOS, we get the following error : TypeError: undefined is not a constructor (evaluating 'new window.MediaSource()') (line 47 of mse-component.js).

Speak through the camera using the computer microphone

I'm currently working on replacing flash completely. My company currently use locomote player. This player was able to use the computer's microphone to talk through the camera.

I came up with a POC of this feature using only HTML5 (and a websocket proxy because you cannot open a TCP stream from the browser).

Would it be conceivable to integrate this feature into this repository ? Or do you think it's a completely separate feature ? There is a bit of re-sampling and transcoding to do and I wanted to do this in a service worker so I know that it's not that easy to integrate in this project.

I know that the primary focus of this repos is to stream RTP, but I was just wandering.

MJPEG on Safari OS X not working

media-stream-library-js/lib/components/canvas/index.ts

Line 119 in 1dcdad4

.createImageBitmap(blob)

window.createImageBitmap is not a function. (In 'window.createImageBitmap(blob)', 'window.createImageBitmap' is undefined)

Maybe drawImage for Safari and transferFromImageBitmap for Chrome/Firefox?

Both versions, 5 and 6

audio track in sdp causes crashes

I've an Foscam camera which provides two media types in SDP:
console.log(sdp):

media: 
   [ { type: 'video',
       port: '0',
       proto: 'RTP/AVP',
       fmt: '96',
       connectionData: [Object],
       bwtype: 'AS',
       bandwidth: '96',
       rtpmap: [Object],
       range: 'npt=0-',
       fmtp: [Object],
       control: 'track1' },
     { type: 'audio',
       port: '0',
       proto: 'RTP/AVP',
       fmt: '0',
       connectionData: [Object],
       bwtype: 'AS',
       bandwidth: '64',
       control: 'track2' } ]

SDP from WireShark:

v=0
o=- 1547817039042595 1 IN IP4 10.0.1.135
s=IP Camera Video
i=videoMain
t=0 0
a=tool:LIVE555 Streaming Media v2014.02.10
a=type:broadcast
a=control:*
a=range:npt=0-
a=x-qt-text-nam:IP Camera Video
a=x-qt-text-inf:videoMain
m=video 0 RTP/AVP 96
c=IN IP4 0.0.0.0
b=AS:96
a=rtpmap:96 H264/90000
a=range:npt=0-
a=fmtp:96 packetization-mode=1;profile-level-id=640032;sprop-parameter-sets=Z2QAMqw0zAKAC1/wFqAgICgAAB9o7jwwh0MACfyAAJ/DXeXGhgAT+QABP4a7y4U=,aO48MA==
a=control:track1
m=audio 0 RTP/AVP 0
c=IN IP4 0.0.0.0
b=AS:64
a=control:track2

this causes trouble in

• boxbuilder.js
• mse-component.js
• rtspsession-component.js

by requesting media.rtpmap

Proposal: check type of media and skip if it isn't 'video'
I am preparing a PR for this

Subscribe to an Axis camera event stream?

Hi all, is it possible to use this library to subscribe to an axis camera rtsp event stream? I see a pipeline for the browser but it is possible to do within Node.js?

Any example appreciated!

Html5VideoPipeline stream video freezes and or delays(timer) when the video element is hidden

It seems like when streaming to more than one video element in parallel hiding any one of them expcept from the first one will cause the video timer to freeze untill made visible in the DOM again.

However if the video elements (part from the first one) are hidden as default then made visible in the DOM the videos freeze entirely. Packages are still being sent through the websockets but the image is completely dead.

Need TLS component similar to TCP one

Hello,

I am looking for a TLS component similar to the TCP one mentioned in https://github.com/AxisCommunications/media-stream-library-js/tree/master/lib/components/tcp

What modifications should I do? other than using a TLS port

Safari 12.1 ends the stream when it is buffering

I'm trying to make our player work with Safari. I manage to play the stream if I allow autoplay in the "Settings for this website". However unlike other browsers, when the stream is buffering Safari pauses it and emits a ended event.

I'm using media-stream-library-js 5.0.0

createObjectURL deprecated

Use srcObject instead: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

Was removed in Chrome 71.

Stream delay due to buffering

I am also using the WebSocketRtspVideo pipeline to stream video for LIVE and real-time video applications.

The problem:
When the WebSocket.readyState != 1 (OPEN), the (read-only) WebSocket.bufferedAmount grows as the message queue grows. This is normal and fine except for LIVE and real-time video applications where the client wants to see what is happening at that moment and it is not interested in lost data. Much like the MJPEG stream works.

Question:
How do I either flush the queue, or set the queue size to nearly zero. Meaning, I want to tell the Axis camera server not to queue anything. If it cannot send it, then discard the data. In our application, not only are we not interested in the past, but it is imperative that we see what is happening in real time.

MDN Web Docs - WebSocket

RTSP authentication fails

Copied from comments of PR 102 and following comments.

There seems to be an issue with #127, which leads to failing RTSP authentication.

I will investigate this further and hopefully create an PR to fix this.

Canvas scheduler missing

We need to have a clock + scheduling of JPEG images in the Canvas component. This will allow us to play motion JPEG at the correct speed, and allow for synchronization of other events based on the presentation time of the canvas motion JPEG video.

Cannot play streams with B-frames

Currently we don't support differences in presentation time and decode time.

Add greenkeeper for package updates

Integrate Greenkeeper to make package updates automatic. Only do this after #14 is merged, so that we have a proper test in place to ensure package updates don't break stuff.

Add code quality tool

Add some kind of automated code quality tool, e.g. codacy or codecov, which are free for open source projects.

MVHD Box - duration is set to 0xffffffff

Hi,

I have added a sink which writes the data to disk. This was pretty easy and straight forward. But
by replaying this, with VLC I recognized an undefined strange length of the video. (-1243.34, or something like this.)
After some research and experimenting with mp4Parser and comparing the file with a recording of ffmpeg, I found an difference in the MVHD box.
FFmpeg sets the duration flag to 0.
We are setting this to 0xffffffff.
After changing it to 0, my replay works as expected also :-)

So my question is, would there be any drawback by changing this duration to 0?
I couldn't found anything about the "undefined" default here: spec - file format

RTSP session timeout value not used

I noticed an issue when I was testing a Dahua camera with the library where a minute or so after starting to RTSP stream from it the connection would be closed by the camera. Digging further into this it appears that the camera sends a session timeout value in the setup response (e.g. Session: 1387212806996;timeout=60) and will close the connection unless the session is renewed within the timeout value.

I found a VAPIX document that suggests to me the appropriate way to renew the session is to send an OPTIONS request. From https://www.axis.com/files/manuals/vapix_video_streaming_52937_en_1307.pdf:

The response returns a session identifier that should be used together with the stream control commands (for example PLAY, PAUSE and TEARDOWN). If the session header includes the timeout parameter, the session will close after the timeout time unless explicitly kept alive. Session can be kept alive by sending RTSP requests to the Axis product containing the session identifier (for example OPTIONS, see 3.2.5 RTSP OPTIONS) within the timeout time or by using RTCP messages.

As I don't have an AXIS camera handy, I can't confirm that the renewing of sessions is required for them but, based on the document above, sending an OPTIONS request periodically should work in all cases and I don't think cause an issue.

I believe I have a fix for this and will raise a PR.

Cheers,
Simon

new Html5VideoPipeline(...) throws error in IE11

Describe the bug
Creating a new Html 5 Video Pipeline throws the error:

SCRIPT5022: insertion point not part of pipeline

To Reproduce
create a new Html5VideoPipeline object imported from :

'media-stream-library/dist/es5/pipelines/html5-video-pipeline';"

And run it in Internet Explorer 11.

Screenshots

Environment (please complete the following information):

• OS: Windows
• Browser Internet Explorer 11

Additional context
Same code works in other browser environments.

RTSP authentication

Hi,
Any plans to add support for RTSP authentication?
Thanks.

Node.js compliance

Hi,

I am using the media-stream-lib as foundation for another project with a bit different scope/perspective. For my use cases most of the stream-handling is done on the server side. The browser only gets some extracted MP4 packets to render the video.
In fact: rtsp-session and authentication is running in node.
With migration to Typescript I ran into trouble on these two files, because they are not full compliant to Node.js.
For example: window is not defined

window.setInterval(()
...

or the import statement of md5.js in digest.ts

I'll create a pull request to fix these issues and get independent from runtime environment.

Internet Explorer 11 support ?

Hei,

We receives errors from this library, with our users using Internet Explorer 11. Do you have any plan to support internet explorer 11, or should we simply ask our users to use another web browser ?

Digest auth using media-stream-library unsuccessful

Hi,

We were trying to stream live video of axis cameras through media-stream-library.js V6.0(https://github.com/AxisCommunications/media-stream-library-js/releases/tag/v6.0.2).

We tried your github example (See attached) to modify and perform basic/digest auth but couldn't succeed, we have also referred your source code index.ts and Html5VideoPipeline.ts (Seems to have digest implementation), to see if we can do digest auth in anyway, but couldn't succeed. We will be integrating the video in our application and we do not need the browser to prompt for the username and password. Instead, we want to use digest authentication as a standard way to authenticate to the camera.

Thanks,
Kulwant Sharma

Basic/Digest auth not working for html5-canvas pipeline

Easier development, local demo/test

To develop or demo/test, we have to start a docker container with RTSP server, a TCP-WebSocket proxy, and then finally a HTTP server that statically serves a bundle. It would be nice if developing was made easier by combining these steps into a single yarn dev, which would start the RTSP/TCP-WebSocket backend, and then run webpack watch to host a particular pipeline.

Decoding problem for some camera configurations

I'm using the library for testing different camera models, everyone streaming video in H264 format.
All the camera working correctly except one and l've find out that the video is working only if I change the "Entropy coding" from CAVLC to CABAC into camera configuration. In the other case I see a frame, than black image until the next keyframe.

Have you experience similar problem? I'm not an expert in data compression schemas so I don't know wht's the difference between the two configurations.

Thank you

Video stream hangs on load

I tried to use a html5 Video Pipeline in a React component, based on the example player. But sometimes when the page loads, the video stream seems to hang, only showing the first frame. It never seems to hangs when the the component is remounted though.

This is using media-stream-library: 4.0.7

The (simplified) code causing the problem looks like this:

import { pipelines } from "media-stream-library";
import React, { Component } from "react";

export default class Live extends Component {

    public render() {
        return (
            <video autoPlay={true} />
        );
    }

    public async componentDidMount() {
        this.play(this.props.host, this.props.encoding);
    }

    private play(host, encoding) {
        const videoEl = document.querySelector("video");

        const pipeline = new pipelines.Html5VideoPipeline({
            rtsp: { uri: `rtsp://${host}/axis-media/media.amp?videocodec=${encoding}` },
            videoEl,
            ws: { uri: `ws://${host}/rtsp-over-websocket` },
        });

        pipeline.ready.then(() => {
            pipeline.play();
        });
    }

}

No MediaSource support with Samsung Internet

Hei,

We have one user with Samsung Internet 7.2. This browser doesn't support MediaSource by default, so the media-stream-library-js triggers the exception window.MediaSource is not a constructor. A more explicit error message such as "this web browser doesn't support media sources" could be a minor improvement.

Browser examples not working

Version:
5.0.0 and 6.0.0-alpha.2

Context:
I am trying this url (rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov) at camera/simple-overlay.html and camera/simple.html on Chrome but I get the following errors:

• simple-overlay-player.js:16 GET http://rtsp//wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov/axis-cgi/usergroup.cgi net::ERR_NAME_NOT_RESOLVED

• simple-overlay-player.js:18 TypeError: Failed to fetch

• openwebsocket.js:47 WebSocket connection to 'ws://rtsp//wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov/rtsp-over-websocket' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

• openwebsocket.js:95 GET http://127.0.0.1:8080/axis-cgi/rtspwssession.cgi?1554731648813 404 (Not Found)

• openwebsocket.js:63 failed to load token 404

• simple-overlay.html:1 Uncaught (in promise) Event {isTrusted: true, type: "error", target: WebSocket, currentTarget: WebSocket, eventPhase: 0, …}

Steps to reproduce:

• git clone https://github.com/AxisCommunications/media-stream-library-js.git
• cd media-stream-library-js/
• npm install
• npm run examples

Did I miss something?

Importing pipelines from dist/es5 throws syntax errors in IE11

Describe the bug
Using components from dist/es5 outputs es6+ syntax and does not work with IE11

To Reproduce
Import and attempt to use components in dist/es5 folder.

Steps to reproduce the behavior:

1. Set up a typescript/webpack project targeting ES5 output

2. Add this to whatever code is going to run on the page (We're using React):
   import { pipelines } from 'media-stream-library/dist/es5/index.browser';

3. Navigate to the page using IE11 and it should throw a syntax error.

Screenshots

Environment (please complete the following information):

• OS: Windows
• Browser Internet Explorer 11

Additional context

our tsconfig:
{ "compilerOptions": { "esModuleInterop": true, "baseUrl": ".", "strict": true, "preserveConstEnums": true, "resolveJsonModule": true, "target": "es5", "module": "commonjs", "outDir": "dist", "sourceMap": true, "experimentalDecorators": true, "suppressImplicitAnyIndexErrors": true, "strictNullChecks": false, "jsx": "react" }, "files": [ "./node_modules/@types/node/index.d.ts", "./node_modules/@types/jest/index.d.ts", ], "paths:": { "lib/*": ["./lib/*"], "src/*": ["./src"], }, "include": [ "src/**/*" ], "exclude": [ "node_modules" ] }

relevant parts of our webpack.config:
module: { rules: [ { test: /\.tsx?$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: [ ['@babel/env', { useBuiltIns: 'usage', corejs: 3, targets: { browsers: ["last 2 versions", "ie >= 11"] } }], "@babel/typescript", "@babel/react" ], plugins: [ ["@babel/proposal-decorators", { "legacy": true }], "@babel/proposal-class-properties", "@babel/transform-regenerator" ], }, } ] }, ...

with Hikvision cameras MJPEG over RTSP not working

Throws
Uncaught Error: no quantization header present