1*80f20d70SHarlanC<!DOCTYPE html> 2*80f20d70SHarlanC<html> 3*80f20d70SHarlanC 4*80f20d70SHarlanC<head> 5*80f20d70SHarlanC <title>WHEP Example</title> 6*80f20d70SHarlanC <style> 7*80f20d70SHarlanC body { 8*80f20d70SHarlanC font-family: Arial, sans-serif; 9*80f20d70SHarlanC background-color: #f2f2f2; 10*80f20d70SHarlanC } 11*80f20d70SHarlanC 12*80f20d70SHarlanC h1 { 13*80f20d70SHarlanC text-align: center; 14*80f20d70SHarlanC margin-top: 50px; 15*80f20d70SHarlanC } 16*80f20d70SHarlanC 17*80f20d70SHarlanC label { 18*80f20d70SHarlanC display: inline-block; 19*80f20d70SHarlanC width: 100px; 20*80f20d70SHarlanC margin-bottom: 10px; 21*80f20d70SHarlanC } 22*80f20d70SHarlanC 23*80f20d70SHarlanC input[type="text"] { 24*80f20d70SHarlanC padding: 5px; 25*80f20d70SHarlanC border-radius: 5px; 26*80f20d70SHarlanC border: 1px solid #ccc; 27*80f20d70SHarlanC width: 200px; 28*80f20d70SHarlanC } 29*80f20d70SHarlanC 30*80f20d70SHarlanC button { 31*80f20d70SHarlanC padding: 10px; 32*80f20d70SHarlanC background-color: #4CAF50; 33*80f20d70SHarlanC color: white; 34*80f20d70SHarlanC border: none; 35*80f20d70SHarlanC border-radius: 5px; 36*80f20d70SHarlanC cursor: pointer; 37*80f20d70SHarlanC } 38*80f20d70SHarlanC 39*80f20d70SHarlanC button:hover { 40*80f20d70SHarlanC background-color: #3e8e41; 41*80f20d70SHarlanC } 42*80f20d70SHarlanC 43*80f20d70SHarlanC #video-container { 44*80f20d70SHarlanC width: 640px; 45*80f20d70SHarlanC height: 360px; 46*80f20d70SHarlanC margin: 0 auto; 47*80f20d70SHarlanC background-color: #000; 48*80f20d70SHarlanC position: relative; 49*80f20d70SHarlanC } 50*80f20d70SHarlanC 51*80f20d70SHarlanC #localVideo { 52*80f20d70SHarlanC width: 100%; 53*80f20d70SHarlanC height: 100%; 54*80f20d70SHarlanC } 55*80f20d70SHarlanC 56*80f20d70SHarlanC #play-btn { 57*80f20d70SHarlanC position: absolute; 58*80f20d70SHarlanC top: 50%; 59*80f20d70SHarlanC left: 0; 60*80f20d70SHarlanC transform: translate(0, -50%); 61*80f20d70SHarlanC font-size: 24px; 62*80f20d70SHarlanC color: #fff; 63*80f20d70SHarlanC cursor: pointer; 64*80f20d70SHarlanC z-index: 1; 65*80f20d70SHarlanC } 66*80f20d70SHarlanC 67*80f20d70SHarlanC #progress-bar { 68*80f20d70SHarlanC position: absolute; 69*80f20d70SHarlanC bottom: 0; 70*80f20d70SHarlanC left: 0; 71*80f20d70SHarlanC width: 100%; 72*80f20d70SHarlanC height: 10px; 73*80f20d70SHarlanC background-color: #333; 74*80f20d70SHarlanC cursor: pointer; 75*80f20d70SHarlanC } 76*80f20d70SHarlanC 77*80f20d70SHarlanC #progress-bar-fill { 78*80f20d70SHarlanC height: 100%; 79*80f20d70SHarlanC background-color: #4CAF50; 80*80f20d70SHarlanC width: 0%; 81*80f20d70SHarlanC } 82*80f20d70SHarlanC </style> 83*80f20d70SHarlanC</head> 84*80f20d70SHarlanC 85*80f20d70SHarlanC<body> 86*80f20d70SHarlanC <h1>WHEP Example</h1> 87*80f20d70SHarlanC <div style="text-align: center;"> 88*80f20d70SHarlanC <label for="app-name">App Name:</label> 89*80f20d70SHarlanC <input type="text" id="app-name" name="app-name" value="live"> 90*80f20d70SHarlanC <label for="stream-name">Stream Name:</label> 91*80f20d70SHarlanC <input type="text" id="stream-name" name="stream-name" value="test"> 92*80f20d70SHarlanC <br><br> 93*80f20d70SHarlanC <button id="start-whep-btn">Start WHEP</button> 94*80f20d70SHarlanC </div> 95*80f20d70SHarlanC <div id="video-container"> 96*80f20d70SHarlanC <video id="localVideo" autoplay playsinline muted></video> 97*80f20d70SHarlanC </div> 98*80f20d70SHarlanC 99*80f20d70SHarlanC <script src="whep.js"></script> 100*80f20d70SHarlanC <script> 101*80f20d70SHarlanC const startWhepBtn = document.getElementById("start-whep-btn"); 102*80f20d70SHarlanC 103*80f20d70SHarlanC startWhepBtn.addEventListener("click", () => { 104*80f20d70SHarlanC const appName = document.getElementById("app-name").value; 105*80f20d70SHarlanC const streamName = document.getElementById("stream-name").value; 106*80f20d70SHarlanC 107*80f20d70SHarlanC //Create peerconnection 108*80f20d70SHarlanC const pc = window.pc = new RTCPeerConnection(); 109*80f20d70SHarlanC 110*80f20d70SHarlanC //Add recv only transceivers 111*80f20d70SHarlanC pc.addTransceiver("audio"); 112*80f20d70SHarlanC pc.addTransceiver("video"); 113*80f20d70SHarlanC 114*80f20d70SHarlanC pc.ontrack = (event) => { 115*80f20d70SHarlanC console.log(event) 116*80f20d70SHarlanC if (event.track.kind == "video") { 117*80f20d70SHarlanC var player = document.getElementById('localVideo') 118*80f20d70SHarlanC player.srcObject = event.streams[0] 119*80f20d70SHarlanC player.controls = true 120*80f20d70SHarlanC 121*80f20d70SHarlanC } 122*80f20d70SHarlanC } 123*80f20d70SHarlanC //Create whep client 124*80f20d70SHarlanC const whep = new WHEPClient(); 125*80f20d70SHarlanC 126*80f20d70SHarlanC const url = location.origin + "/whep?app=" + appName + "&stream=" + streamName; 127*80f20d70SHarlanC const token = "" 128*80f20d70SHarlanC 129*80f20d70SHarlanC //Start viewing 130*80f20d70SHarlanC whep.view(pc, url, token); 131*80f20d70SHarlanC 132*80f20d70SHarlanC }); 133*80f20d70SHarlanC </script> 134*80f20d70SHarlanC</body> 135*80f20d70SHarlanC 136*80f20d70SHarlanC</html>