mirror of
https://github.com/vdalex25/rtsp-to-web-player.git
synced 2025-09-26 12:51:21 +08:00
update
This commit is contained in:
vdalex
3
.prettierignore
Normal file
3
.prettierignore
Normal file
@@ -0,0 +1,3 @@
|
||||
dist
|
||||
examples
|
||||
node_modules
|
||||
100
README.md
100
README.md
@@ -1,5 +1,7 @@
|
||||
# RTSPtoWEBPlayer
|
||||
external video player for projects:
|
||||
|
||||
external video player for projects:
|
||||
|
||||
- [RTSPtoWeb](https://github.com/deepch/RTSPtoWeb)
|
||||
- [RTSPtoWebRTC](https://github.com/deepch/RTSPtoWebRTC)
|
||||
- [RTSPtoWSMP4f](https://github.com/deepch/RTSPtoWSMP4f)
|
||||
@@ -10,6 +12,7 @@ there is no GUI in this project, you can add your own GUI
|
||||
|
||||
[demo page](http://htmlpreview.github.io/?https://github.com/vdalex25/rtsp-to-web-player/blob/main/dist/index.html)
|
||||
[publish page](https://vdalex25.github.io/rtsp-to-web-player/dist)
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
@@ -21,62 +24,81 @@ npm install
|
||||
|
||||
npm run build
|
||||
```
|
||||
|
||||
it's created compiled file `dist/RTSPtoWEBPlayer.js`
|
||||
|
||||
## Usage
|
||||
|
||||
Add script to your page
|
||||
|
||||
```html
|
||||
<script src="dist/RTSPtoWEBPlayer.js"></script>
|
||||
```
|
||||
|
||||
Create new player
|
||||
|
||||
```js
|
||||
const options={
|
||||
parentElement: document.getElementById('player')
|
||||
const options = {
|
||||
parentElement: document.getElementById("player"),
|
||||
};
|
||||
const player=new RTSPtoWEBPlayer(options);
|
||||
player.load('ws://localhost:8083/stream/517fe9dbf4b244aaa0330cf582de9932/channel/0/mse?uuid=517fe9dbf4b244aaa0330cf582de9932&channel=0');
|
||||
const player = new RTSPtoWEBPlayer(options);
|
||||
player.load(
|
||||
"ws://localhost:8083/stream/517fe9dbf4b244aaa0330cf582de9932/channel/0/mse?uuid=517fe9dbf4b244aaa0330cf582de9932&channel=0"
|
||||
);
|
||||
```
|
||||
|
||||
## Options
|
||||
```js
|
||||
options={
|
||||
parentElement:null,
|
||||
source:null,
|
||||
controls:true,
|
||||
muted:true,
|
||||
autoplay:true,
|
||||
loop:false,
|
||||
hlsjsconfig: {
|
||||
|
||||
}
|
||||
}
|
||||
```js
|
||||
options = {
|
||||
parentElement: null,
|
||||
source: null,
|
||||
controls: true,
|
||||
muted: true,
|
||||
autoplay: true,
|
||||
loop: false,
|
||||
hlsjsconfig: {},
|
||||
};
|
||||
```
|
||||
|
||||
#### `parentElement`
|
||||
|
||||
default: null
|
||||
|
||||
HTMLElement
|
||||
|
||||
#### `source`
|
||||
|
||||
link to mediasource. requires explicit protocol http/https or ws/wss
|
||||
|
||||
#### `controls`
|
||||
|
||||
default: true
|
||||
|
||||
show/hide notive video control
|
||||
|
||||
#### `muted`
|
||||
|
||||
default: true
|
||||
|
||||
#### `autoplay`
|
||||
|
||||
default: true
|
||||
|
||||
#### `loop`
|
||||
|
||||
default: false
|
||||
|
||||
#### `hlsjsconfig`
|
||||
|
||||
default: empty;
|
||||
|
||||
full list of config you can see on [API dicumentation hls.js](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)
|
||||
full list of config you can see on [API dicumentation hls.js](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)
|
||||
|
||||
#### `webrtcconfig`
|
||||
default:
|
||||
|
||||
default:
|
||||
|
||||
```js
|
||||
{
|
||||
iceServers: [{
|
||||
@@ -89,49 +111,57 @@ bundlePolicy: "max-compat",
|
||||
iceTransportPolicy: "all"//for option "relay" need use turn server
|
||||
}
|
||||
```
|
||||
full list of config you can see on [RTCPeerConnection](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#parameters)
|
||||
|
||||
full list of config you can see on [RTCPeerConnection](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#parameters)
|
||||
|
||||
## Methods
|
||||
|
||||
#### `load(source)`
|
||||
|
||||
breaking previos connections and load new source
|
||||
|
||||
```js
|
||||
const server='127.0.0.1:8083';//server and port where is running one of mediaserver
|
||||
const uuid='test';//stream uuid
|
||||
const channel=0;//stream channel optional
|
||||
const server = "127.0.0.1:8083"; //server and port where is running one of mediaserver
|
||||
const uuid = "test"; //stream uuid
|
||||
const channel = 0; //stream channel optional
|
||||
|
||||
//Project RTSPtoWeb[MSE]
|
||||
const source=`ws://${server}/stream/${uuid}/channel/${channel}/mse?uuid=${uuid}/&channel=${channel}`;
|
||||
const source = `ws://${server}/stream/${uuid}/channel/${channel}/mse?uuid=${uuid}/&channel=${channel}`;
|
||||
//Project RTSPtoWeb[WEBRTC]
|
||||
const source=`http://${server}/stream/${uuid}/channel/${channel}/webrtc?uuid=${uuid}/&channel=${channel}`;
|
||||
const source = `http://${server}/stream/${uuid}/channel/${channel}/webrtc?uuid=${uuid}/&channel=${channel}`;
|
||||
//Project RTSPtoWeb[HLS]
|
||||
const source=`http://${server}/stream/${uuid}/channel/${channel}/hls/live/index.m3u8`;
|
||||
const source = `http://${server}/stream/${uuid}/channel/${channel}/hls/live/index.m3u8`;
|
||||
//Project RTSPtoWeb[HLSLL]
|
||||
const source=`http://${server}/stream/${uuid}/channel/${channel}/hlsll/live/index.m3u8`;
|
||||
const source = `http://${server}/stream/${uuid}/channel/${channel}/hlsll/live/index.m3u8`;
|
||||
|
||||
//Project RTSPtoWebRTC[WEBRTC]
|
||||
const source=`http://${server}/stream/receiver/${uuid}`;
|
||||
const source = `http://${server}/stream/receiver/${uuid}`;
|
||||
|
||||
//Project RTSPtoWSMP4f[MSE]
|
||||
const source=`ws://${server}/ws/live?suuid=${uuid}`;
|
||||
const source = `ws://${server}/ws/live?suuid=${uuid}`;
|
||||
|
||||
//Project RTSPtoHLS[HLS]
|
||||
const source=`http://${server}/play/hls/${uuid}/index.m3u8`;
|
||||
const source = `http://${server}/play/hls/${uuid}/index.m3u8`;
|
||||
|
||||
//Project RTSPtoHLSLL[HLS]
|
||||
const source=`http://${server}/play/hls/${uuid}/index.m3u8`;
|
||||
const source = `http://${server}/play/hls/${uuid}/index.m3u8`;
|
||||
|
||||
player.load(source);
|
||||
```
|
||||
|
||||
#### `destroy()`
|
||||
|
||||
breaks all active connections and destroys the player
|
||||
|
||||
#### `control media`
|
||||
for player control you can use all methods for video tag [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#methods) over player.video
|
||||
|
||||
for example
|
||||
for player control you can use all methods for video tag [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#methods) over player.video
|
||||
|
||||
for example
|
||||
|
||||
```js
|
||||
const player=new RTSPtoWEBPlayer({
|
||||
parentElement: document.getElementById('player')
|
||||
const player = new RTSPtoWEBPlayer({
|
||||
parentElement: document.getElementById("player"),
|
||||
});
|
||||
player.load(source_url);
|
||||
|
||||
@@ -142,6 +172,6 @@ player.video.play();
|
||||
//get currentTime
|
||||
console.log(player.video.currentTime);
|
||||
//set currentTime
|
||||
player.video.currentTime=10;
|
||||
player.video.currentTime = 10;
|
||||
//etc
|
||||
```
|
||||
|
||||
287
dist/RTSPtoWEBPlayer.js
vendored
287
dist/RTSPtoWEBPlayer.js
vendored
File diff suppressed because one or more lines are too long
2
index.js
2
index.js
@@ -1,2 +1,2 @@
|
||||
import RTSPtoWEBPlayer from "./src/rtsp-to-web-player";
|
||||
export default RTSPtoWEBPlayer;
|
||||
export default RTSPtoWEBPlayer;
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
"eslint": "^8.8.0",
|
||||
"eslint-config-google": "^0.14.0",
|
||||
"eslint-plugin-react": "^7.28.0",
|
||||
"prettier": "2.8.2",
|
||||
"style-loader": "^2.0.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
.RTSPtoWEBPlayer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.RTSPtoWEBPlayer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.RTSPtoWEBPlayer video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
}
|
||||
.RTSPtoWEBPlayer video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,43 +1,49 @@
|
||||
const path = require('path');
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',//production,development
|
||||
watch: false,
|
||||
target: 'web',
|
||||
entry: {
|
||||
RTSPtoWEBPlayer:"./src/rtsp-to-web-player.js"
|
||||
},
|
||||
output: {
|
||||
path:__dirname+'/dist',
|
||||
filename: "[name].js",
|
||||
library: '[name]',
|
||||
libraryExport: 'default',
|
||||
globalObject: 'this'
|
||||
},
|
||||
module: {
|
||||
rules:[{
|
||||
test: /\.js$/,
|
||||
loader:'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['@babel/preset-env', { targets: {
|
||||
"safari":"11"
|
||||
}
|
||||
}]
|
||||
],
|
||||
plugins: ['@babel/plugin-proposal-class-properties']
|
||||
}
|
||||
mode: "production", //production,development
|
||||
watch: false,
|
||||
target: "web",
|
||||
entry: {
|
||||
RTSPtoWEBPlayer: "./src/rtsp-to-web-player.js",
|
||||
},
|
||||
output: {
|
||||
path: __dirname + "/dist",
|
||||
filename: "[name].js",
|
||||
library: "[name]",
|
||||
libraryExport: "default",
|
||||
globalObject: "this",
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
targets: {
|
||||
safari: "11",
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
plugins: ["@babel/plugin-proposal-class-properties"],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
}]
|
||||
},
|
||||
devServer: {
|
||||
static: {
|
||||
directory: path.join(__dirname, 'dist'),
|
||||
},
|
||||
compress: true,
|
||||
port: 9000,
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ["style-loader", "css-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
devServer: {
|
||||
static: {
|
||||
directory: path.join(__dirname, "dist"),
|
||||
},
|
||||
compress: true,
|
||||
port: 9000,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user