前端播放webrtc流媒体 (ZLMRTCClient)

1. 引入插件

// 项目地址 https://gitee.com/xiongguangjie/zlmrtcclient.js
import ZLMRTCClient from '@/utils/ZLMRTCClient.js';

2. 使用

const player = ref(null) as any;
const initVideo = (url: string) => {
  // url http://8.130.179.248:8577/index/api/webrtc?app=live&stream=test&type=play
	console.log('播放器', player);
	closePlayer();
	let videoDom = videoRef.value;

	player.value = new ZLMRTCClient.Endpoint({
          element: videoDom, // TML视频元素的ID或引用，用于显示接收到的远程媒体流。通常是一个<video>元素
		debug: false, // 指定是否启用调试模式。如果启用，则会输出调试日志，有助于问题的排查和调试。
		zlmsdpUrl: url, //这是一个URL，指向用于SDP（会话描述协议）消息交换的服务器。在WebRTC通信中，SDP消息用于协商媒体流的参数，如编解码器、IP地址和端口等。
		simulecast: false, //指定是否启用多路复用（Simulcast）。多路复用允许同时发送多个分辨率和比特率的视频流，以便客户端可以根据其网络条件和能力选择合适的流。
		useCamera: false, //指定是否使用摄像头作为视频源。如果为false，可能需要使用屏幕共享或其他视频源。
		audioEnable: false, //指定是否启用音频流。
		videoEnable: true, //指定是否启用视频流。
		recvOnly: true, //指定是否仅接收媒体流（即作为接收端）。如果为true，则不会发送本地媒体流到远端。
		usedatachannel: false, //指定是否使用数据通道（DataChannel）。数据通道允许在WebRTC连接上直接发送和接收任意数据。
		// resolution: {
		// 	w: 600,
		// 	h: 340,
		// },// 一个对象，指定期望的视频分辨率。包含w（宽度）和h（高度）属性。如果这两个值非零，则用于设置视频流的分辨率。
	});

	player.value.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) {
		// ICE 协商出错
		console.log('ICE 协商出错');
	});

	player.value.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) {
		//获取到了远端流，可以播放
		console.log('播放成功', e.streams);
		videoDom.addEventListener('canplay', function (e) {
			videoDom.play();
		});
	});
	player.value.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) {
		// offer anwser 交换失败
		console.log('offer anwser 交换失败', e);
		// player.value.destroy();
		// player.value = null;
	});

	player.value.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function (s) {
		// 获取到了本地流

		console.log('offer anwser 交换失败', e);
	});

	player.value.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) {
		// 获取本地流失败
		console.log('获取本地流失败');
	});

	player.value.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) {
		// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
		console.log('当前状态==>', state);
	});

	player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN, function (event) {
		console.log('rtc datachannel 打开 :', event);
	});

	player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, function (event) {
		console.log('rtc datachannel 消息 :', event.data);
	});
	player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR, function (event) {
		console.log('rtc datachannel 错误 :', event);
	});
	player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE, function (event) {
		console.log('rtc datachannel 关闭 :', event);
	});
};
//关闭流
const closePlayer = () => {
	if (player.value) {
		player.value?.pc?.close();
		player.value = null;
	}
};