RealtimePlayer

A realtime player based on webrtc.

Getting Started

Demo

import RealtimePlayer from 'realtimeplayer';

const player = new RealtimePlayer({
  videoElement: document.querySelector('#video'),
  textHelperElement: document.querySelector('.video-input-helper'),
  wsAddress: 'ws://xxx',
  buildJoinRoomMessage: () => {
    return {
      "type":"joinRoom",
      "user_type":"web",
      "token":""
    }
  },
  buildMediaCandidateMessage: (candidate) => {
    return {
      "type": "candidate",
      "candidate": candidate
    }
  },
  buildMediaOfferMessage: (desc) => {
    return {
      "type": "offer",
      "description": desc
    }
  },
  getMessageType: (msg) => {
    const parsedMessage = JSON.parse(msg);
    const { type, ...rest } = parsedMessage;
    let payload = { ...rest };
    return { type, payload }
  },
  initPeerCase: (parsed) => {
    return parsed.type === 'roomStatus';
  },
  hooksOnSignalMessage: (parsedMessage) => {
    // hooks
  }
})

Options

videoElement HTMLVideoElement required

用来展示画面的video元素

textHelperElement HTMLInputElement required

用来辅助粘贴的text input元素

videoMode String

可选，视频流格式 webrtc or image，默认为webrtc;

imageElement HTMLImageElement

可选，图片流时用来展示图片的元素

wsAddress String required

websocket信令地址

buildMediaOfferMessage (desc: RTCSessionDescriptionInit) => any required

用来构造Media Offer信息的模版函数

buildMediaCandidateMessage (candidate: any) => any required

用来构造Media Candidate信息的模版函数

buildJoinRoomMessage () => any required

用来构造JoinRoom信息的模版函数

getMessageType () => (msg: string) => { type: string, payload: any, toPeerType: string } required

用于从信令信息中解析消息类型的函数

hooksOnSignalMessage (parsed: { type: string; payload: Record<string,any> }) => void required

信令服务器收到所有消息后的回调，可以在这里根据收到的信令消息自定义行为

initPeerCase (parsed: { type: string; payload: Record<string,any> }) => void

可选, 标志可以开始初始化PeerConnection的判断函数, 默认为判断message-type是否等于roomStuats

answerType string

可选, 标志是对等方Sdp的消息类型, 默认为answer

candidateType string

可选, 标志是对等方Candiadte的消息类型, 默认为candidate

keyFrame any

可选, 请求关键帧，如果需要可以设置

iceConfig any

可选, 用于配置PeerConnection的ICE配置

peerType Enum 'text'

可选，用于配置需要额外创建的PeerConenction类型，暂时只支持传入'text'，默认只创建media类型

heartBeatMsg any

可选，用于配置信令心跳信息，默认{ type: "heartbeat" }

heartBeatInterval number

可选，用于配置信令心跳间隔，单位为ms，默认10000ms(即10s)

buildTextOfferMessage (desc: RTCSessionDescriptionInit) => any

可选，用来构造Text Offer信息的模版函数

buildTextCandidateMessage (candidate: any) => any

可选，用来构造Text Candidate信息的模版函数

isPC boolean

可选，用于指定当前投流终端是否为PC终端(与Mouse Move触发条件相关)

Methods

controller get Method

返回Video Controller的实例，获取控制流对象

emitter () => Emitter

返回Player的事件总线实例，组件会在部分情况(如: 重连，重连失败，重连成功)下发送事件信号， 用户可以自定义事件监听器

replay (force: boolean) => void

强制重新连接，失败会发送事件信号 Player.RetryFailed， 成功会发送事件信号 Player.RetrySuccess， 类型见dist/emitter.d.ts

streamerInstance () => WebrtcMediaStreamSimple|undefined

返回Player内部的webrtc-streamer实例(视频流Peer实例包装类，定义见dist/signal/webrtc-stream.d.ts)

signalInstance () => SignalSimple|undefined

返回Player内部的SignalpSimle实例(信令服务器实例包装类，定义见dist/signal/signal-simple.d.ts)

textInstance () => WebRtcTextSimple|undefined

默认为空， 如果指定了需要'text'的Peertype，则返回Player内部的webrtc-text实例(文本流Peer实例包装类，定义见dist/signal/webrtc-text.d.ts)

keyPress (code: AndroidKeycode) => void

模拟点击对端手机的某个功能按键键，code值见dist/const.d.ts

rotate () => void

模拟转屏信号，发送给对端手机

develop

to run local-phone demo

npm install
npm run build
npm run local-server
npm run start-local
open localhost:9090

to run udt-phone demo

npm install
npm run build
npm run start-udt
open localhost:9090

to run camera demo

npm install
npm run build
npm run local-signal
npm run start-camera
open localhost:9090

develop as package

npm install -g yalc
yalc publish

// yalc add xxxx in other project

release

npm run build
npm publish

Project Structure