Created
December 18, 2016 12:21
-
-
Save sj82516/5696003e0435a249ccda043f8467d03c to your computer and use it in GitHub Desktop.
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>WebRTC Offer</title> | |
| <script src="https://webrtc.github.io/adapter/adapter-latest.js" type="application/javascript"></script> | |
| <script src="/socket.io/socket.io.js" type="application/javascript"></script> | |
| </head> | |
| <body> | |
| <h1> Self View </h1> | |
| <video id="selfView" width="320" height="240" autoplay muted></video> | |
| <br/> | |
| <button id="call">Call</button> | |
| <h1> Remote View </h1> | |
| <video id="remoteView" width="320" height="240" autoplay muted></video> | |
| <script type="application/javascript"> | |
| var socket = io.connect('http://localhost:4200'); | |
| var configuration = { | |
| iceServers: [ | |
| {urls: "stun:23.21.150.121"}, | |
| {urls: "stun:stun.l.google.com:19302"}, | |
| {urls: "turn:numb.viagenie.ca", credential: "turnserver", username: "[email protected]"} | |
| ] | |
| }; | |
| var pc; | |
| // run start(true) to initiate a call | |
| function start(isCaller) { | |
| pc = new RTCPeerConnection(configuration); | |
| // send any ice candidates to the other peer | |
| pc.onicecandidate = function (evt) { | |
| socket.emit('candidate', {"candidate": evt.candidate}); | |
| }; | |
| // once remote stream arrives, show it in the remote video element | |
| pc.ontrack = function (evt) { | |
| console.log("add remote stream"); | |
| console.log(evt); | |
| remoteView.src = URL.createObjectURL(evt.streams[0]); | |
| }; | |
| // get the local stream, show it in the local video element and send it | |
| navigator.mediaDevices.getUserMedia({"audio": true, "video": true}).then((stream) => { | |
| console.log("start streaming"); | |
| console.log(stream); | |
| selfView.src = URL.createObjectURL(stream); | |
| pc.addStream(stream); | |
| if (isCaller) | |
| pc.createOffer().then((desc)=>gotDescription(desc)); | |
| else | |
| pc.createAnswer().then((desc)=> gotDescription(desc)); | |
| function gotDescription(desc) { | |
| pc.setLocalDescription(desc); | |
| socket.emit('sdp', {"sdp": desc}); | |
| } | |
| } | |
| ); | |
| } | |
| call.addEventListener('click', ()=> { | |
| console.log('webrtc start'); | |
| start(true); | |
| }); | |
| socket.on('msg', function (data) { | |
| console.log(data); | |
| if (!pc) | |
| start(false); | |
| if (data.sdp) | |
| pc.setRemoteDescription(new RTCSessionDescription(data.sdp)); | |
| else if (data.candidate) | |
| pc.addIceCandidate(new RTCIceCandidate(data.candidate)); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment