gsence-web-camera

v1.0.10

Published

2 years ago

webRTC RTSP流播放视频播放器

Downloads

0High
0Medium
0Low

arunaya

webRTC 视频播放

安装

npm install @gos/web-camera

应用

引入 import RTCPeer from '@gos/web-camera'
新建实时通信连接

// 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
- 类型：urlstring
- IQBox 打开地址。该参数优先级最高，使用该参数时忽略其他参数。
signalServer
- 类型：string
- 通信服务器地址
token
- 类型: string
- websocket 服务 token。该参数会添加再 ws 请求 header Sec-WebSocket-Protocol 字段中。没有传递时携带默认值no_access_token。如：
```
Sec-WebSocket-Protocol: access_token, no_access_token
```

播放视频

addPlayer(videoDOMElement, src, onSuccess, onFailed)

videoDOMElement
- 类型：HTMLElement
- 播放器video元素
src
- 类型：string
- 直播视频 rtsp 源地址
onSuccess
- 类型：function
- 播放成功回调
- 该回调是远端开始推送的时候被调用，不是 video 元素开始渲染第一帧的回调。如果需要自定义 video 的 controls，需要监听 video 元素的事件。
onFailed
- 类型：function
- 播放失败回调

停止播放

removePlayer(videoDOMElement, src)

videoDOMElement
- 类型：HTMLElement
- 播放器video元素
src
- 类型：string
- 直播视频 rtsp 源地址

关闭通信连接

destroy(callback)

callback
- 类型：function
- 关闭成功回调

示例

完整示例请查看 demo 文件夹。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>webRTC Demo</title>
    <style type="text/css">
      #player{
        height: calc(100vh - 90px);
        border: 2px solid;
      }
      div{
        margin: 5px 0;
      }
      input{
        width: 70%;
      }
    </style>
  </head>

  <body>
    <div>
      <label>IQBox主机URL：</label><input id="host-url" placeholder="如https://os.glodon.com/proxy/devices/deviceId/?token=token" value="http://10.2.36.132/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwMmZiMjZmM2YyMTA2ZDNlMjRlMDg5MSIsInJvIjoiZWciLCJleHAiOjE2MTQzMjgxNDd9.PdWm4J-iCPazbI9MXhXn3g4kpoJIF0mbkvwZQohAiyA" />
      <button id="open-btn">打开通道</button>
      <button disabled id="close-btn">关闭通道</button>
    </div>
    <div>
      <label>视频直播RTSP：</label><input id="source" placeholder="请输入完整的rtsp地址" value="rtsp://admin:[email protected]:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1" />
      <button disabled id="play-btn">播放</button>
      <button disabled id="stop-btn">停止</button>
    </div>
    <!-- 需要一个video元素 -->
    <video id="player">您的浏览器不支持播放该视频！</video>
    <script type="module" src="./index.js"></script>
  </body>
</html>

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);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

webRTC 视频播放

安装

应用

示例

index.html

index.js