base-webrtc-player

介绍

webrtc播放器基于html的标签，通过建立RTCPeerConnection获取拉流。本组件提供了vue组件与typescript方法，可按需使用。

安装

npm install --save base-webrtc-player

使用vue组件

导入

<template>
  <rtc :apiUrl=“apiUrl” :apiPort="apiPort" :height="300" :width="500"></rtc>
</template>

<script setup lang="ts">
import rtc from 'base-webrtc-player'
 
const apiUrl = '127.0.0.1'
const apiPort = '1985'
</script>

<style lang="less">
</style>

props

| propName | type | default | description | | -------------- | -------------- | ------- | ------------------------------------------------------------ | | autoplay | Boolean | true | 是否自动播放，将传递给标签 | | height | Number | 250 | 高度，将传递给标签 | | width | Number | 400 | 宽度，将传递给标签 | | muted | Boolean | true | 是否静音，将传递给标签。注:如果设置了autoplay，请把它设置为true，否则可能让autoplay失效 | | apiUrl | String | '' | 建立连接的接口地址，必填。 | | apiPort | String|Number | '' | 建立连接的端口，必填。 | | streamUrl | String | '' | 获取流的地址，一般由服务器内部指定，若想由发起者指定也可以。 | | streamPort | String|Number | '' | 获取流的端口。 | | className | String | '' | 播放器的class名。 | | videoClassName | String | '' | video标签的class名。 |

使用TypeScript方法

导入

import { useWebRTC } from 'base-webrtc-player';

const { playVideo, stream } = useWebRTC();
playVideo(urlObject, callback)
srcObject = stream

useWebRTC()返回值

| 返回值 | 介绍 | | ------------- | ------------------------------------------------------------ | | playVideo | 用于开始建立连接的方法，接收两个参数(urlObject, callback),urlObject中包含了连接信息,callback为连接开始前的回调函数，一般用于注册peerConnection的回调事件。 | | peerConnetion | 本次连接的实例对象。 | | stream | 本次连接的媒体流，用于赋值给srcObject对象进行播放。 | | resetConnect | 重置连接的方法，调用此方法可以断开连接。 |