Created
May 10, 2018 22:37
-
-
Save jchang419/e05731a871cf5c9a62c7722382c2c556 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <script src="https://static.opentok.com/v2/js/opentok.min.js"></script> | |
| <div style="height:500px;width:500px" id="stream" /> | |
| <script> | |
| publish(); | |
| // Returns a Promise to a Publisher | |
| function publish() { | |
| // Request access to the microphone and camera | |
| return OT.getUserMedia().then(function gotMedia(mediaStream) { | |
| var WIDTH = 640; | |
| var HEIGHT = 480; | |
| var videoEl = document.createElement('video'); | |
| videoEl.srcObject = mediaStream; | |
| videoEl.setAttribute('playsinline', ''); | |
| videoEl.muted = true; | |
| setTimeout(function timeout() { | |
| videoEl.play(); | |
| }); | |
| var canvas = document.createElement('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| canvas.width = WIDTH; | |
| canvas.height = HEIGHT; | |
| var reqId; | |
| // Draw each frame of the video | |
| var drawFrame = function drawFrame() { | |
| ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height); | |
| reqId = requestAnimationFrame(drawFrame); | |
| }; | |
| reqId = requestAnimationFrame(drawFrame); | |
| //var div = document.getElementById("stream"); | |
| //div.appendChild(canvas); | |
| var publisherOptions = { | |
| insertMode: 'append', | |
| width: '100%', | |
| height: '100%', | |
| // Pass in the canvas stream video track as our custom videoSource | |
| videoSource: canvas.captureStream(30).getVideoTracks()[0], | |
| // Pass in the audio track from our underlying mediaStream as the audioSource | |
| audioSource: mediaStream.getAudioTracks()[0] | |
| }; | |
| return new Promise(function promise(resolve, reject) { | |
| var publisher = OT.initPublisher('stream', publisherOptions, function initComplete(err) { | |
| resolve(publisher); | |
| }); | |
| }); | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment