Base-webrtc-player NPM

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	重置连接的方法，调用此方法可以断开连接。