npm package: @muguilin/webrtc-player
Description: webrtc、WebRTC、WebRTCPlayer、WebRTC播放器
Author: 沐枫（MuGuiLin）
Latest version: 0.0.4

# WebRTCPlayer 播放器

[![MIT License](https://img.shields.io/npm/l/utilsjs.svg?style=flat-square)](https://www.npmjs.com/package/mu-tooljs)

> Web前端，一个能在Web浏览器中，通过JavaScript实时播放WebRTC多媒体视频流的播放器 。



---



#### 🏡 下载安装：

```shell
# 使用npm命令下载安装
$ npm i @muguilin/webrtc-player

# 使用yarn命令下载安装
$ yarn add @muguilin/webrtc-player

```



#### 🚀 使用方法：

> - 获取或创建一个 HTMLVideoElement，并将其传递给 WebRTCPlayer类。
> -  调用 play() 方法，传入 WebRTC 流地址（要确保WebRTC 流是正常可用的）。
> - 如果需要停止播放，可以调用 stop() 方法。
> -  这样就可以轻松地在不同的Web浏览器页面中播放WebRTC 流。



- 通过 JS Module(模块化)的方式导入使用

  ```html
  <!-- ES6模块导入使用 -->
  <script type="module">
    // const WebRTCPlayer require('@muguilin/webrtc-player');
    
    import { WebRTCPlayer } from '@muguilin/webrtc-player';
  
    // WebRTCPlayer实例化
    const webrtc = new WebRTCPlayer(videoRef);
    
  </script>
  ```
  
- 通过 `<script src="">` 标签以 CDN 的形式引入使用

  ```html
  <!-- 将@muguilin/webrtc-player的js文件下载后，在html文件中引入本地脚本 -->
  <script src="./js/webrtc-player.js"></script>
  
  <script>
    // 在浏览器控制台中打印WebRTCP类是否引入成功
    console.log(WebRTCP);
      
    const { WebRTCPlayer } = WebRTC;
  
    // WebRTCPlayer实例化
    const webrtc = new WebRTCPlayer(videoRef)
  </script>
  ```



#### 🎬使用实例：

```html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>WebRTC播放器</title>
	<style>
		body {
			padding: 50px;
		}

		h1,
		section {
			text-align: center;
		}

		video {
			display: block;
			margin: 30px auto;
			width: 960px;
		}

		input {
			display: block;
			margin: 10px auto;
			padding: 10px;
			width: 938px;
		}

		button {
			padding: 5px 20px;
			font-size: 16px;
		}
	</style>
</head>

<body>
	<h1 class="h1">WebRTC播放器</h1>
	<hr>

	<section>
		<video id="videoRef" controls autoplay playsinline></video>
		<input type="text" id="url" value="" />
		<button id="playBtn">▶️ 开始播放</button>
		<button id="stopBtn">⏺️ 停止播放</button>
	</section>

	<script src="./main.umd.js"></script>
	<script type="module">

		// https://www.npmjs.com/package/@muguilin/webrtc-player
		// import { WebRTCPlayer } from '@muguilin/webrtc-player';

		console.log("WebRTC", WebRTC);
		const { WebRTCPlayer } = WebRTC;

		const videoRef = document.querySelector('#videoRef');
		const webrtc = new WebRTCPlayer(videoRef, {
			onPlay: (res) => {
				console.log('视频已开始播放', res);
			},
			onFirstFrame: () => {
				console.log('第一帧已渲染')
			},
			onStop: () => {
				console.log('视频已停止')
			},
			onError: (error) => {
				console.error('播放出错:', error)
				webrtc.destroy();
			},
			reconnect: (player) => {
				console.log('尝试重新连接...', player, player.reconnectCount)
				if (player.reconnectCount > 3) {
					player.destroy();
				}
			},
			onBuffering: () => {
				console.log('视频缓冲中...')
			}
		});

		// 实例属性/方法
		console.log('webrtc ', webrtc)

		// 播放
		playBtn['onclick'] = function () {
			const url = document.querySelector('#url').value;
			webrtc.play(url);
		};

		// 停止
		stopBtn['onclick'] = function () {
			webrtc.stop();
		};

	</script>
</body>

</html>
```