# gsence-web-camera
> webRTC RTSP流播放 视频播放器
Latest version **1.0.10** (published 2022-09-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install gsence-web-camera
pnpm add gsence-web-camera
yarn add gsence-web-camera
bun add gsence-web-camera
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.10 |
| Published | 2022-09-15 |
| First published | 2020-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 82.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aruna |
| Maintainers | arunaya |
## Links
- npm: https://www.npmjs.com/package/gsence-web-camera
- npm.io page: https://npm.io/package/gsence-web-camera
## Recent versions
- 1.0.10 (latest) — 2022-09-15
- 1.0.1-Beta.0 (beta) — 2022-03-07
- 1.0.8 — 2022-09-05
- 1.0.6-1 — 2022-03-11
- 1.0.6 — 2022-03-10
- 1.0.5 — 2022-03-09
- 1.0.4 — 2022-03-08
- 1.0.3 — 2022-03-08
- 1.0.2 — 2022-03-07
- 1.0.1-Beta — 2022-03-07
- 1.0.0-Beta — 2022-03-07
- 1.0.0-Beta.2 — 2022-03-07
- 1.0.0-1 — 2022-03-07
- 1.0.0 — 2022-03-07
- 1.0.0-Beta.0 — 2022-03-07
- … 45 more at https://npm.io/package/gsence-web-camera/versions
## README
# webRTC 视频播放
## 安装
`npm install @gos/web-camera`
## 应用
1. 引入
`import RTCPeer from '@gos/web-camera'`
2. 新建实时通信连接
```
// IQBox用户只需提供盒子打开地址
rtcPeer = new RTCPeer({
hostUrl: hostUrl,
});
```
或者也可以分别提供 signalServer 和 token 参数
```
rtcPeer = new RTCPeer({
signalServer: `${window.location.protocol.replace('http', 'ws')}//${url.hostname}${url.pathname}/websocket/core/webrtc/api/v1/websocket`,
token: searchParams.get('token')
});
```
每个节点需要一个通信连接，同一个节点的多个视频播放可以复用同一个连接。
为减少首次播放等待时间，可以预先建立好通信连接。
- hostUrl
- 类型：url`string`
- IQBox 打开地址。该参数优先级最高，使用该参数时忽略其他参数。
- signalServer
- 类型：`string`
- 通信服务器地址
- token
- 类型: `string`
- websocket 服务 token。该参数会添加再 ws 请求 header Sec-WebSocket-Protocol 字段中。没有传递时携带默认值`no_access_token`。
如：
```
Sec-WebSocket-Protocol: access_token, no_access_token
```
3. 播放视频
```
addPlayer(videoDOMElement, src, onSuccess, onFailed)
```
- videoDOMElement
- 类型：`HTMLElement`
- 播放器`video`元素
- src
- 类型：`string`
- 直播视频 rtsp 源地址
- onSuccess
- 类型：`function`
- 播放成功回调
- 该回调是远端开始推送的时候被调用，不是 video 元素开始渲染第一帧的回调。如果需要自定义 video 的 controls，需要监听 video 元素的事件。
- onFailed
- 类型：`function`
- 播放失败回调
4. 停止播放
```
removePlayer(videoDOMElement, src)
```
- videoDOMElement
- 类型：`HTMLElement`
- 播放器`video`元素
- src
- 类型：`string`
- 直播视频 rtsp 源地址
5. 关闭通信连接
```
destroy(callback)
```
- callback
- 类型：`function`
- 关闭成功回调
## 示例
完整示例请查看 demo 文件夹。
### index.html
```
webRTC Demo
```
### index.js
```
import RTCPeer from './node_modules/@gos/web-camera/src/index.js';
function onDOMLoaded() {
console.log('DOM is loaded');
let hostUrl;
let playingSource;
let rtcPeer;
let openSignalServer = function() {
hostUrl = document.getElementById('host-url').value;
let url, searchParams;
if (hostUrl) {
url = new URL(hostUrl);
searchParams = new URLSearchParams(url.search);
}
if (!hostUrl) {
alert('请输入主机地址');
return;
}
// IQBox用户只需提供盒子打开地址
rtcPeer = new RTCPeer({
hostUrl: hostUrl, // 该参数优先级最高，使用该参数时忽略其他参数
});
// 或者也可以分别提供signalServer 和 token参数
// rtcPeer = new RTCPeer({
// signalServer: `${window.location.protocol.replace('http', 'ws')}//${url.hostname}${url.pathname}/websocket/core/webrtc/api/v1/websocket`,
// token: searchParams.get('token')
// });
document.getElementById('open-btn').setAttribute('disabled', 'disabled');
document.getElementById('play-btn').removeAttribute('disabled');
document.getElementById('close-btn').removeAttribute('disabled');
}
// 建立通信
document.getElementById('open-btn').onclick = openSignalServer;
document.getElementById('play-btn').onclick = function() {
// 播放
if (!source) {
alert('请输入直播RTSP地址');
return;
}
playingSource = document.getElementById('source').value;
rtcPeer.addPlayer(document.getElementById('player'), playingSource)
// rtcPeer.addPlayer(document.getElementById('player'), 'file://1')
document.getElementById('stop-btn').removeAttribute('disabled');
}
document.getElementById('stop-btn').onclick = function() {
// 停止
rtcPeer.removePlayer(document.getElementById('player'), playingSource)
// rtcPeer.removePlayer(document.getElementById('player'), 'file://1')
}
document.getElementById('close-btn').onclick = function() {
rtcPeer.destroy(() => {
console.log('通道已关闭');
});
document.getElementById('open-btn').removeAttribute('disabled');
}
}
document.addEventListener("DOMContentLoaded", onDOMLoaded);
```
---
_Source: https://npm.io/package/gsence-web-camera · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._