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.
JavaScript library to handle media streams on the command line (Node.js) and in the browser.
License: MIT License
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)
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
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!
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.
Find a way to add good unit tests for the MP4 muxer component and helpers.
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:
Set up a typescript/webpack project targeting ES5 output
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';
Navigate to the page using IE11 and it should throw a syntax error.
Environment (please complete the following information):
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" ], }, } ] }, ...
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.
Environment (please complete the following information):
Additional context
Same code works in other browser environments.
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?
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).
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
Use srcObject
instead: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
Was removed in Chrome 71.
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.
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
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();
});
}
}
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
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.
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
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?
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.
Currently we don't support differences in presentation time and decode time.
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.
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?
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.
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.
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
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.
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.
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.
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
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
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:
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.
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
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 ?
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 ?
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?
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
by requesting media.rtpmap
Proposal: check type of media and skip if it isn't 'video'
I am preparing a PR for this
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.
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.
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.
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.
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
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.
Accessing boxBuilder.trackData
before it's defined causes this.
Can happen if someone asks for e.g. framerate before movie started.
Hi,
Any plans to add support for RTSP authentication?
Thanks.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.