@muguilin/webrtc-player NPM

WebRTCPlayer 播放器

Web前端，一个能在Web浏览器中，通过JavaScript实时播放WebRTC多媒体视频流的播放器。

🏡 下载安装：

# 使用npm命令下载安装
$ npm i @muguilin/webrtc-player

# 使用yarn命令下载安装
$ yarn add @muguilin/webrtc-player

🚀 使用方法：

获取或创建一个 HTMLVideoElement，并将其传递给 WebRTCPlayer类。
调用 play() 方法，传入 WebRTC 流地址（要确保WebRTC 流是正常可用的）。
如果需要停止播放，可以调用 stop() 方法。
这样就可以轻松地在不同的Web浏览器页面中播放WebRTC 流。

通过 JS Module(模块化)的方式导入使用

<!-- 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 的形式引入使用

<!-- 将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>

🎬使用实例：

<!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;
		}

		button {
			padding: 5px 20px;
			font-size: 16px;
		}
	</style>
</head>

<body>
	<h1 class="h1">WebRTC播放器</h1>
	<hr>

	<section>
		<video id="videoRef" controls autoplay playsinline></video>
		<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);

		const url = 'https://www.xxx.com/rtc/v1/whep/?app=live';

		// 播放
		playBtn['onclick'] = function () {
			webrtc.play(url);
		};

		// 停止
		stopBtn['onclick'] = function () {
			webrtc.stop();
		};

	</script>
</body>

</html>

webrtc WebRTC WebRTCPlayer webrtc-adapter WebRTC播放器 WebRTC流媒体

0.0.3

9 months ago

0.0.2

9 months ago

0.0.1

9 months ago