WebRTC 直播流播放方案：原生客户端与 EasyPlayer 实战

后端服务已基于 ZLMediaKit 框架搭建，现在我们来探讨前端如何接入并播放这些直播流。在实际项目中，我们通常有两种主流选择：使用官方提供的原生 SDK，或者集成成熟的第三方播放器。

一、原生 WebRTC 播放器（ZLMRTCClient）

如果你希望最小化依赖，直接使用 ZLMediaKit 配套的 ZLMRTCClient.js 是最直接的方式。这里以 1.0.2 版本为例，需要注意不同版本的初始化方式可能有所差异。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC 播放示例</title>
    <!-- 引入官方 SDK -->
    <script src="http://117.40.242.70:35080/ZLMRTCClient.js"></script>
</head>
<body>
    <video id="videoPlayer" autoplay controls></video>
    <script>
        // 1. 获取视频元素
        const videoElement = document.getElementById('videoPlayer');

        // 2. 配置参数
        const config = {
            element: videoElement,      // 绑定播放容器（必填）
            debug: true,                
            : , 
            : ,           
            : ,           
            : ,
            : ,
            : ,             
            : { : , :  },
            : 
        };

        
         rtcClient =  .(config);

        
        rtcClient.(,  .(, err));
        rtcClient.(,  ());

         remoteStream = ;
        rtcClient.(,  {
            .();
             (videoElement. !== event.) {
                videoElement. = event.[];
                remoteStream = event.[];
            }
        });

        rtcClient.(,  {
            .(, state);
        });

        
         () {
             (!rtcClient) ;
            videoElement.();
            videoElement. = ;
             (remoteStream) {
                remoteStream.().( track.());
                remoteStream = ;
            }
             (rtcClient.) rtcClient.();
              (rtcClient.) rtcClient.();
            rtcClient = ;
        }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>EasyPlayer 演示</title> <script src="./js/EasyPlayer-pro.js"></script> <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 { width: 100%; max-width: 600px; height: 36px; border: 1px solid #dcdfe6; padding: 0 15px; } .btn-item { cursor: pointer; padding: 6px 12px; border-radius: 4px; border: 1px #ccc solid; margin-right: 15px; } .df { display: flex; align-items: center; margin-bottom: 16px; } .box { padding-top: 10px; margin: auto; max-width: 800px; } </style> </head> <body> <div class="box"> <h2>EasyPlayerPro 案例演示</h2> <div class="player_item"><div id="player_box" class="player_box"></div></div> <div class="df"> <input type="checkbox" id="hasAudio" /><span>音频</span> </div> <input type="text" id="input" class="inputs" value="ws://localhost:6230/ws_flv/live/stream_1_0.flv"> <div class="df"> <button id="onPlayer" class="btn-item">播放</button> <button id="onReplay" class="btn-item">重播</button> <button id="onMute" class="btn-item">静音</button> <button id="onStop" class="btn-item">注销</button> </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 = () => { config.hasAudio = audio.checked; }; player.onclick = onPlayer; replay.onclick = onReplay; mute.onclick = onMute; stop.onclick = onStop; function playCreate() { container = .(); playerInfo = (container, config); } () { playerInfo && playerInfo.(input.).( .(e)); } () { (!playerInfo) ; playerInfo.(); } () { ().( { (); (); }); } () { ( { (playerInfo) { playerInfo.(); playerInfo = ; } (resolve, ); }); } () { ().( { (); }); } }; </script> </body> </html>

WebRTC 直播流播放方案：原生客户端与 EasyPlayer 实战

一、原生 WebRTC 播放器（ZLMRTCClient）

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具

二、使用开源播放器 EasyPlayer

WebRTC 直播流播放方案：原生客户端与 EasyPlayer 实战

一、原生 WebRTC 播放器（ZLMRTCClient）

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

二、使用开源播放器 EasyPlayer