Created
September 29, 2021 20:06
-
-
Save mondain/d472061232efe75b3d6e609df9aef427 to your computer and use it in GitHub Desktop.
Whip demo page for Red5 Pro
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Whip</title> | |
| <script type="text/javascript" src="whip.js"></script> | |
| </head> | |
| <body> | |
| <b>Whip it! real good</b> | |
| <br /><br /> | |
| <div id="container"></div> | |
| <br /> | |
| <input id="stopBtn" type="button" value="stop" /> | |
| <script type="text/javascript"> | |
| // the stream name to publish | |
| var streamName = "stream1"; | |
| // construct the divs | |
| var div = document.createElement('div'); | |
| div.id = streamName; | |
| div.style.cssText = 'width:640px;height:480px;background:#eee;'; | |
| document.getElementById('container').appendChild(div); | |
| var vid = document.createElement('video'); | |
| vid.id = streamName + '_vid'; | |
| vid.width = 640; | |
| vid.height = 480; | |
| vid.autoplay = true; | |
| vid.controls = true; | |
| document.getElementById(streamName).appendChild(vid); | |
| // handle any browser | |
| var RTCPeerConnection = navigator.mozGetUserMedia ? mozRTCPeerConnection : webkitRTCPeerConnection; | |
| var SessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription || window.msRTCSessionDescription; | |
| // create peerconnection (if iceCandidatePoolSize is 0, the candidate priorities are equal) | |
| const pc = new RTCPeerConnection({iceServers:[{urls:'stun:stun3.l.google.com:19302'}], iceCandidatePoolSize:1}); | |
| // get mic+cam | |
| async function whipIt(pc) { | |
| const gumStream = await navigator.mediaDevices.getUserMedia({ | |
| audio: true, | |
| video: { | |
| width: { min: 640 }, | |
| height: { min: 480 }, | |
| frameRate: { min: 25, max: 60 } | |
| } | |
| }); | |
| for (const track of gumStream.getTracks()) { | |
| pc.addTrack(track); | |
| } | |
| var video = document.getElementById(streamName + '_vid'); | |
| if (video) { | |
| video.srcObject = gumStream; | |
| video.play(); | |
| } | |
| const url = "http://localhost:5080/whip/endpoint?streamId=" + streamName; | |
| const token = "thisisntusedyet"; | |
| // create whip client | |
| const whip = new WHIPClient(); | |
| // add the button so we may stop | |
| document.getElementById("stopBtn").onclick = function(){whip.stop();}; | |
| // start publishing | |
| whip.publish(url, token, pc); | |
| }; | |
| whipIt(pc); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment