WebRtc直播流的播放
后端服务已经使用ZLMediaKit框架提供了直播流地址
一、WebRtc原生播放器播放直播流
1、使用ZLMediaKit框架提供的ZLMRTCClient.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>播放示例</title> <!-- 引入 zlmrtcclient.js 1.0.2 --> <script src="http://117.40.242.70:35080/ZLMRTCClient.js"></script> </head> <body> <!-- 视频播放元素 --> <video autoplay controls></video> <script> // 1. 获取视频元素 const videoElement = document.getElementById('videoPlayer'); // 2. 配置参数（严格对应 1.0.2 版本的 defaults 结构） const config = { element: videoElement, // 绑定视频播放元素（必填） debug: true, // 开启调试日志，方便排查问题 zlmsdpUrl: 'http://117.40.242.70:35080/index/api/webrtc?app=live&stream=test1&type=play', // 后端提供的流地址（必填） simulcast: false, // 不启用 simulcast（早期版本可能不支持） useCamera: false, // 播放时不需要启用本地摄像头 audioEnable: true, // 启用音频 videoEnable: true, // 启用视频 recvOnly: true, // 仅接收流（播放模式） resolution: { w: 800, h: 450 }, // 视频分辨率 usedatachannel: false // 不使用数据通道 }; // 3. 创建实例（1.0.2 版本可能通过构造函数直接初始化，无需 connect 方法） const rtcClient = new ZLMRTCClient.Endpoint(config); // 4. 监听事件（1.0.2 版本的事件名可能与早期定义一致） // 监听错误事件 rtcClient.on('error', (err) => { console.error('ZLMRTCClient 错误:', err); }); // 监听 WebRTC 不支持事件 rtcClient.on('webrtcNotSupport', () => { alert('当前浏览器不支持 WebRTC，请更换浏览器'); }); var remoteStream = null; // 监听远程流添加事件（核心：获取到流后播放） rtcClient.on('WEBRTC_ON_REMOTE_STREAMS', (event) => { console.log('收到远程流，开始播放'); // 1.0.2 版本可能自动绑定到 element，若未自动绑定则手动设置 if (videoElement.srcObject !== event.streams) { const stream = event.streams[0]; remoteStream = stream; videoElement.srcObject = stream; } }); // 监听连接状态变化 rtcClient.on('WEBRTC_ON_CONNECTION_STATE_CHANGE', (state) => { console.log('连接状态:', state); // 可能的状态：connecting/connected/disconnected }); function stop() { if (!rtcClient) return; // 停止视频播放 videoElement.pause(); videoElement.srcObject = null; // 停止媒体流轨道 if (remoteStream) { remoteStream.getTracks().forEach(track => track.stop()); remoteStream = null; } // 断开连接并清理实例 if (rtcClient.disconnect) { rtcClient.disconnect(); } else if (rtcClient.close) { rtcClient.close(); } rtcClient = null; } </script> </body> </html>ZLMRTCClient.js的版本不同，实例化对象rtcClient对象不同，这里使用的1.0.2是
new ZLMRTCClient.Endpoint(config)二、使用开源的播放器easyPlayer
<!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>演示</title> <script src="./js/EasyPlayer-pro.js"></script> </head> <style> .player_item { position: relative; padding-bottom: 56%; background-color: black; margin-bottom: 20px; } .player_box { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .inputs { -webkit-appearance: none; background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #dcdfe6; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 36px; line-height: 36px; outline: none; padding: 0 15px; transition: border-color .2s cubic-bezier(.645, .045, .355, 1); width: 100%; max-width: 600px; margin-right: 16px; margin-bottom: 16px; margin-top: 16px; } .btn-item { cursor: pointer; display: inline-block; padding: 6px 12px; margin-right: 15px; border-radius: 4px; border: 1px #ccc solid; } .df { display: flex; align-items: center; margin-bottom: 16px; } .box { padding-top: 10px; margin: auto; max-width: 800px; } </style> <body> <div> <br> <h2>EasyPlayerPro案例演示</h2> <br> <div> <div></div> </div> <div> <input type="checkbox" /><span>音频</span> </div> <input type="text" value="ws://localhost:6230/ws_flv/live/stream_1_0.flv"> <div> <div>播放</div> <div>重播</div> <div>静音</div> <div>注销</div> </div> </div> <script> window.onload = function () { var playerInfo = null var config = { stretch: true, hasAudio: true, } playCreate() var input = document.getElementById('input'); var audio = document.getElementById('hasAudio'); var player = document.getElementById('onPlayer'); var replay = document.getElementById('onReplay'); var mute = document.getElementById('onMute'); var stop = document.getElementById('onStop'); if (config.hasAudio) audio.checked = true audio.onclick = () => { if (audio.checked == true) { config.hasAudio = true } else { config.hasAudio = false } } player.onclick = () => { onPlayer() } replay.onclick = () => { onReplay() } mute.onclick = () => { onMute() } stop.onclick = () => { onStop() } function playCreate() { var container = document.getElementById('player_box'); playerInfo = new EasyPlayerPro(container, config); } function onPlayer() { playerInfo && playerInfo.play(input.value).then(() => { }).catch((e) => { console.error(e); }); } function onMute() { if (!playerInfo) return playerInfo.setMute(true) } function onReplay() { onDestroy().then(() => { playCreate(); onPlayer() }); } function onDestroy() { return new Promise((resolve, reject) => { if (playerInfo) { playerInfo.destroy() playerInfo = null } setTimeout(() => { resolve(); }, 100); }) } function onStop() { onDestroy().then(() => { playCreate(); }); } } </script> </body> </html>播放效果好，具有截图、视频录制等功能
