{"id":13402749,"url":"https://github.com/Streamedian/html5_rtsp_player","last_synced_at":"2025-03-14T08:31:04.818Z","repository":{"id":41070622,"uuid":"54034412","full_name":"Streamedian/html5_rtsp_player","owner":"Streamedian","description":"Play RTSP stream from IP camera in browser in this HTML5 player without plugins","archived":false,"fork":false,"pushed_at":"2024-01-18T07:32:39.000Z","size":855,"stargazers_count":2648,"open_issues_count":69,"forks_count":597,"subscribers_count":120,"default_branch":"master","last_synced_at":"2025-03-11T17:52:14.133Z","etag":null,"topics":["aac","angular","h264","html5","ip-cameras","javascript","mp4","mse","nvr","react","rtsp","rtsp-client","rtsp-player","sdp","stream","video","webscocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Streamedian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-16T13:31:50.000Z","updated_at":"2025-03-08T19:55:13.000Z","dependencies_parsed_at":"2023-02-09T19:45:49.572Z","dependency_job_id":"4918f343-91c6-42e3-9df7-30f97a88693b","html_url":"https://github.com/Streamedian/html5_rtsp_player","commit_stats":{"total_commits":58,"total_committers":13,"mean_commits":4.461538461538462,"dds":0.5517241379310345,"last_synced_commit":"7cbd55348296c972d721a8717f367cca40874c0f"},"previous_names":["specforge/html5_rtsp_player"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Streamedian%2Fhtml5_rtsp_player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Streamedian%2Fhtml5_rtsp_player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Streamedian%2Fhtml5_rtsp_player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Streamedian%2Fhtml5_rtsp_player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Streamedian","download_url":"https://codeload.github.com/Streamedian/html5_rtsp_player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243544665,"owners_count":20308168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aac","angular","h264","html5","ip-cameras","javascript","mp4","mse","nvr","react","rtsp","rtsp-client","rtsp-player","sdp","stream","video","webscocket"],"created_at":"2024-07-30T19:01:20.349Z","updated_at":"2025-03-14T08:31:04.341Z","avatar_url":"https://github.com/Streamedian.png","language":"JavaScript","readme":"## Overview\n\nAll modern browsers don't natively support playback of RTSP (Real Time Streaming Protocol) streams, \nwhich is a common format for many popular IP cameras. \nSo for a long time if you wanted to display your RTSP IP camera stream on the web page, \nyou had to use intermediate transcoding servers, which would receive RTSP stream, \ndecode it and convert into format accepted by browser like HLS, MPEG-DASH or MP4. \nThis solution gets the job done, but it may suffer from big latency and poor performance due to the need to transcode and convert video with often compromised output video quality as the result.\n\nThis custom HTML5 player, that works directly on top of a standard HTML5 ```\u003cvideo\u003e``` element, \nwas developed to implement different philosophy. Instead of decoding RTSP stream on the intermediate server\nit shifts this heavy task to the end user browser, where task of decoding of a single stream is insignificant.\nThis means that your intermediate server no longer have to pull all the load, \nyou can share it between everyone watching your RTSP stream. As an additional advantage, \nend user browser will always receive full quality unaltered picture from your IP camera.\n\nStreamedian is a Javascript library which implements RTSP client for watching live streams in your browser. \nIt requires support of HTML5 Video with Media Sources Extensions for playback. Also player relies on server-side websocket \nproxy for retransmitting RTSP streams to browser.\n\n![](http://www.specforge.com/static/images/demo/software_development_1.jpg)\n      \nIt works by muxing RTP H264 and AAC payload into ISO BMFF (MP4) fragments. \n\nStreamedian is written using ECMAScript 2015 standard.\n\n## Live test stream\n\nDemo is available on https://streamedian.com\n\nBrowser support (ES5 transpiled version):\n\n* Firefox v.42+\n* Chrome v.23+\n* OSX Safari v.8+\n* MS Edge v.13+\n* Opera v.15+\n* Android browser v.5.0+\n* IE Mobile v.11+\n\nNot supported in iOS Safari and Internet Explorer\n\n## Install\n\n```\nnpm install git://github.com/Streamedian/html5_rtsp_player.git\n```\n\n## Usage\n\n### Browser side\n\nAttach HTML Video with RTSP URL\n```\n\u003cvideo id=\"test_video\" controls autoplay src=\"rtsp://your_rtsp_stream/url\"\u003e\u003c/video\u003e\n\nor\n\n\u003cvideo id=\"test_video\" controls autoplay\u003e\n    \u003csource src=\"rtsp://your_rtsp_stream/url\"\u003e\n\u003c/video\u003e\n```\n\nYou can ignore source by passing data-ignore=\"true\":\n\n```\n\u003cvideo id=\"test_video\" controls autoplay\u003e\n    \u003csource src=\"natively_supported_video_url\" data-ignore=\"true\"\u003e\n    \u003csource src=\"rtsp://your_rtsp_stream/url\"\u003e\n\u003c/video\u003e\n```\n\nIf browser can play that source, player will not be initialized for this element. \n\nSetup player in your js:\n\n```\nimport * as streamedian from 'streamedian/player.js';\n// import WebsocketTransport from 'wsp/transport/websocket';\n// import RTSPClient from 'wsp/client/rtsp/client';\n\nlet mediaElement = rtsp.attach(document.getElementById('test_video'));\nlet player = new streamedian.WSPlayer(mediaElement, {\n    // url: `${STREAM_URL}`,      // overrides mediaElement's sources\n    modules: [\n        {\n            // client module constructor. Should be subclass or BaseClient. RTSPClient by default\n            // client: RTSPClient,\n            transport: {\n               // client module constructor. Should be subclass or BaseTransport. WebsocketTransport by default\n               // constructor: WebsocketTransport,\n               options: {\n                   // address of websocket proxy described below. ws${location.protocol=='https:'?'s':''}://${location.host}/ws/ by default\n                   socket: \"ws://websocket_proxy_address/ws\",\n                   // function called player exceptions\n                   errorHandler (e) {\n                       alert(`Failed to start player: ${e.message}`);\n                   },\n                   // function to get credentials for protected streams\n                   queryCredentials() {\n                       return new Promise((resolve, reject)=\u003e{\n                           let c = prompt('input credentials in format user:password');\n                           if (c) {\n                               this.setCredentials.apply(this, c.split(':'));\n                               resolve();\n                           } else {\n                               reject();\n                           }\n                       });\n                   }\n               }\n           }\n        },\n    ]\n});\n\n```\n\nES6 Modules support is required. You can use rollup to build this script:\n\nrollup.config.js\n```\nimport buble from 'rollup-plugin-buble';\nimport alias from 'rollup-plugin-alias';\n\nconst path = require('path');\n\nexport default {\n    entry: path.join(__dirname, 'example.js'),\n    targets: [\n        {dest: path.join(__dirname, 'example/streamedian.js'), format: 'es'}\n    ],\n    sourceMap: true,\n    plugins: [\n        // uncomment if you want to transpile into es5\n        //buble({\n            //exclude: 'node_modules/**'\n        //}),\n        alias({\n            bp_logger: path.join(__dirname,'node_modules/bp_logger/logger'),\n            bp_event: path.join(__dirname,'node_modules/bp_event/event'),\n            bp_statemachine: path.join(__dirname,'node_modules/bp_statemachine/statemachine'),\n            //jsencrypt: path.join(__dirname,'node_modules/jsencrypt/src/jsencrypt.js'),\n            streamedian: path.join(__dirname,'src')\n        })\n    ]\n\n}\n```\n\n\n```\n\u003e npm install bp_event bp_logger bp_statemachine\n\u003e rollup -c\n```\n\nInclude compiled script into your HTML:\n\n```\n\u003cscript src=\"streamedian.js\"\u003e\u003c/script\u003e\n```\n\n### RTSP Authentication\n\nStreamedian player support both basic and digest authentication. Authentication type is detected automatically\nwhen you connect to the stream.\nYou can directly specify user/password in rtsp url in form rtsp://username@password:stream.url/resource/\nor pass _queryCredentials()_ function to _streamedian.WSPlayer_. This function in order\nshould return promise that call _this.setCredentials(user, password)_.\n\n\n### Server side\n\n1. Install websocket proxy\n\n    Sign up and install websocket proxy from http://streamedian.com\n\n    Register domain you want to use this player\n\n    Download license file to your server\n\n    Note that this package depends on systemd and gcc5+ runtime so it can be installed \n    only on recent distribution versions. \n\n2. Configure port and license file path in /etc/ws_rtsp.ini\n\n    This port should be open in your firewall. Also you can pass request to this port from your proxy. (for example: http://nginx.org/en/docs/http/websocket.html) \n\n3. Run it\n\n```\n\u003e service ws_rtsp start\n```\n\n### Player architecture\n\nPlayer comprises three main modules: **transport**, **client** and **remuxer**.  \n\n**Transport** responsible for data delivery and data queuing. It should fire _connected_, _disconnected_ and _data_ events.\nAs soon data received, transport should push it into dataQueue and fire _data_ event. Base class for transports can be found in core/base_transport.\nAs a default, WebsocketTransport that relies on websocket proxy is implemented.\n \n**Client** listens for data events, parse it into elementary stream packets and enqueue parsed data into it's own queue. Client can \npass queued buffer to remuxer with _samples_ event. To identify stream track client should fire _tracks_ event. When ready, _flush_\nevent can be used to construct media fragment and pass it to video presenter. Base class for transports can be found in core/base_client.\nDefault client is RTSP client over websocket transport.\n\n**Remuxer** prepares media fragment for video presenter and push it. There is only video presenter at the moment, based on media source extensions.\nRemuxer collects data into mp4 media fragments (moof+mdat) and pass it into source buffer.\n\n### How RTSP proxy works?\n\nRTSP player establish connection with proxy with following protocol:\n\n1. Connect to RTSP channel by connecting websocket with \"rtsp\" protocol specified and get connection id\n\n    ```\n    c\u003es:\n    WSP/1.1 INIT\\r\\n\n    seq: \u003csequence_id for response tracking\u003e\n    host: \u003cRTSP stream host\u003e\\r\\n\n    port: \u003cRTSP stream port\u003e\\r\\n\\r\\n\n       \n    s\u003ec:\n    WSP/1.1 200 OK\\r\\n\n    seq: \u003csequence_id for response tracking\u003e\n    channel: \u003cchannel_id\u003e\\r\\n\\r\\n\n    \n    Error codes \u003e= 400 means error\n    ```\n\n2. Connect to RTP channel by connecting websocket with \"rtp\" protocol\n\n    ```\n    c\u003es:\n    WSP/1.1 JOIN\\r\\n\n    seq: \u003csequence_id for response tracking\u003e\\r\\n\n    channel: \u003cchannel_id achieved from RTSP socket initialization\u003e\\r\\n\\r\\n\n    \n    s\u003ec:\n    WSP/1.1 200 OK\\r\\n\n    seq: \u003csequence_id for response tracking\u003e\\r\\n\\r\\n\n    \n    Error codes \u003e= 400 means error\n    ```\n\n3. Send RTSP commands wrapped into WSP protocol: \n\n    ```\n    c\u003es:\n    WSP/1.1 WRAP\\r\\n\n    seq: \u003csequence_id for response tracking\u003e\\r\\n\n    \\r\\n\n    \u003cRTSP_PROTOCOL_DATA\u003e\n    \n    s\u003ec:\n    WSP/1.1 200 OK\\r\\n\n    channel: \u003cchannel_id\u003e\\r\\n\n    \\r\\n\n    \u003cRTSP_PROTOCOL_RESPONSE\u003e\n    \n    Error codes \u003e= 400 means error\n    ```\n\n4. RTP channel should send interleaved data with 4 byte header ($\\\u003cchannel\\\u003e\\\u003csize\\\u003e). Separate RTP is not supported at this moment\n\n\n### Load balancing\n\nRTSP proxy does not support load balancing itself but can be easily integrated with such load balancers like nginx.\nYou can start multiple instances of proxy on different sockets and configure nginx upstreams.\n\n![](http://www.specforge.com/static/images/demo/ws_rtsp_proxy.png)\n\n\nHave any suggestions to improve our player?\nFeel free to leave comments or ideas streamedian.player@gmail.com\n","funding_links":[],"categories":["JavaScript","语言资源库","Repos 仓库"],"sub_categories":["JavaScript","H5 Player"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStreamedian%2Fhtml5_rtsp_player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FStreamedian%2Fhtml5_rtsp_player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStreamedian%2Fhtml5_rtsp_player/lists"}