@muguilin/webrtc-player

v0.0.4

Published

6 months ago

webrtc、WebRTC、WebRTCPlayer、WebRTC播放器

Downloads

0High
0Medium
0Low

muguilin

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

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

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

🎬使用实例：

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

WebRTCPlayer 播放器

🏡 下载安装：

🚀 使用方法：

🎬使用实例：