-
Notifications
You must be signed in to change notification settings - Fork 431
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added all of the video logic and rewrote it
- Loading branch information
Showing
11 changed files
with
336 additions
and
283 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <html> | ||
| <head> | ||
| <script src="src/gifshot.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| </body> | ||
| </html> |
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // server.js (Express 4.0) | ||
| var express = require('express'), | ||
| app = express(); | ||
|
|
||
| // SERVER CONFIGURATION | ||
| app.use(express.static(__dirname + '/../')); // set the static files location /public/img will be /img for users | ||
|
|
||
| app.listen(8001); | ||
|
|
||
| console.log('To preview gifshot, go to localhost:8001'); |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,110 +1,146 @@ | ||
| ;(function() {var gumHelper, index; | ||
| gumHelper = function () { | ||
| // A couple of shims for having a common interface | ||
| window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; | ||
| navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; | ||
| // | ||
| var video; | ||
| var cameraStream; | ||
| /** | ||
| * Requests permission for using the user's camera, | ||
| * starts reading video from the selected camera, and calls | ||
| * `okCallback` when the video dimensions are known (with a fallback | ||
| * for when the dimensions are not reported on time), | ||
| * or calls `errorCallback` if something goes wrong | ||
| */ | ||
| function startStreaming(errorCallback, onStreaming, okCallback) { | ||
| var videoElement; | ||
| var cameraStream; | ||
| var attempts = 0; | ||
| var readyListener = function (event) { | ||
| findVideoSize(); | ||
| }; | ||
| var findVideoSize = function () { | ||
| ;(function(window, navigator, document, undefined) {var utils, videoStream, index; | ||
| utils = { | ||
| 'URL': window.URL || window.webkitURL || window.mozURL || window.msURL, | ||
| 'getUserMedia': function () { | ||
| var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; | ||
| return getUserMedia ? getUserMedia.bind(navigator) : getUserMedia; | ||
| }(), | ||
| 'isObject': function (obj) { | ||
| if (!obj) { | ||
| return false; | ||
| } | ||
| return Object.prototype.toString.call(obj) === '[object Object]'; | ||
| }, | ||
| 'isArray': function (arr) { | ||
| if (!arr) { | ||
| return false; | ||
| } | ||
| if ('isArray' in Array) { | ||
| return Array.isArray(arr); | ||
| } else { | ||
| return Object.prototype.toString.call(arr) === '[object Array]'; | ||
| } | ||
| }, | ||
| 'isFunction': function (func) { | ||
| if (!func) { | ||
| return false; | ||
| } | ||
| return Object.prototype.toString.call(func) === '[object Function]'; | ||
| }, | ||
| 'noop': function () { | ||
| } | ||
| }; | ||
| videoStream = function () { | ||
| return { | ||
| 'videoElement': undefined, | ||
| 'cameraStream': undefined, | ||
| 'defaultVideoDimensions': { | ||
| 'height': 640, | ||
| 'width': 480 | ||
| }, | ||
| 'findVideoSize': function findVideoSize(obj) { | ||
| var videoElement = obj.videoElement, cameraStream = obj.cameraStream, completedCallback = obj.completedCallback; | ||
| if (!videoElement) { | ||
| return; | ||
| } | ||
| if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) { | ||
| videoElement.removeEventListener('loadeddata', readyListener); | ||
| onDimensionsReady(videoElement.videoWidth, videoElement.videoHeight); | ||
| videoElement.removeEventListener('loadeddata', this.findVideoSize); | ||
| completedCallback({ | ||
| 'videoElement': videoElement, | ||
| 'cameraStream': cameraStream, | ||
| 'videoWidth': videoElement.videoWidth, | ||
| 'videoHeight': videoElement.videoHeight | ||
| }); | ||
| } else { | ||
| if (attempts < 10) { | ||
| attempts++; | ||
| if (findVideoSize.attempts < 10) { | ||
| findVideoSize.attempts += 1; | ||
| setTimeout(findVideoSize, 200); | ||
| } else { | ||
| onDimensionsReady(640, 480); | ||
| completedCallback({ | ||
| 'videoElement': videoElement, | ||
| 'cameraStream': cameraStream, | ||
| 'videoWidth': this.defaultVideoDimensions.width, | ||
| 'videoHeight': this.defaultVideoDimensions.height | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| var onDimensionsReady = function (width, height) { | ||
| okCallback(cameraStream, videoElement, width, height); | ||
| }; | ||
| videoElement = document.createElement('video'); | ||
| videoElement.autoplay = true; | ||
| videoElement.addEventListener('loadeddata', readyListener); | ||
| navigator.getMedia({ video: true }, function (stream) { | ||
| onStreaming(); | ||
| if (videoElement.mozSrcObject) { | ||
| videoElement.mozSrcObject = stream; | ||
| }, | ||
| 'onStreamingTimeout': function (callback) { | ||
| callback(new Error('Timed out while trying to start streaming')); | ||
| }, | ||
| 'errorCallback': function (obj) { | ||
| // ERROR!!! | ||
| new Error('getUserMedia cannot access the camera', obj); | ||
| }, | ||
| 'startStreaming': function (obj) { | ||
| var self = this, errorCallback = utils.isFunction(obj.error) ? obj.error : utils.noop, streamedCallback = utils.isFunction(obj.streamed) ? obj.streamed : utils.noop, completedCallback = utils.isFunction(obj.completed) ? obj.completed : utils.noop, videoElement = document.createElement('video'), cameraStream; | ||
| videoElement.autoplay = true; | ||
| utils.getUserMedia({ 'video': true }, function (stream) { | ||
| streamedCallback(); | ||
| if (videoElement.mozSrcObject) { | ||
| videoElement.mozSrcObject = stream; | ||
| } else if (utils.URL) { | ||
| videoElement.src = utils.URL.createObjectURL(stream); | ||
| } | ||
| cameraStream = stream; | ||
| videoElement.play(); | ||
| videoElement.addEventListener('loadeddata', function (event) { | ||
| self.findVideoSize({ | ||
| 'videoElement': videoElement, | ||
| 'cameraStream': cameraStream, | ||
| 'completedCallback': completedCallback | ||
| }); | ||
| }); | ||
| }, errorCallback); | ||
| }, | ||
| startVideoStreaming: function (callback, options) { | ||
| options = options || {}; | ||
| var self = this, noGetUserMediaSupportTimeout, timeoutLength = options.timeout !== undefined ? options.timeout : 0; | ||
| if (utils.isFunction(utils.getUserMedia)) { | ||
| // Some browsers apparently have support for video streaming because of the | ||
| // presence of the getUserMedia function, but then do not answer our | ||
| // calls for streaming. | ||
| // So we'll set up this timeout and if nothing happens after a while, we'll | ||
| // conclude that there's no actual getUserMedia support. | ||
| if (timeoutLength > 0) { | ||
| noGetUserMediaSupportTimeout = setTimeout(function () { | ||
| self.onStreamingTimeout(callback); | ||
| }, 10000); | ||
| } | ||
| this.startStreaming({ | ||
| 'error': self.errorCallback, | ||
| 'streamed': function () { | ||
| // The streaming started somehow, so we can assume there is getUserMedia support | ||
| clearTimeout(noGetUserMediaSupportTimeout); | ||
| }, | ||
| 'completed': function (obj) { | ||
| var videoElement = this.videoElement = obj.videoElement, cameraStream = this.cameraStream = obj.cameraStream, width = obj.videoWidth, height = obj.videoHeight; | ||
| callback(cameraStream, videoElement, width, height); | ||
| } | ||
| }); | ||
| } else { | ||
| videoElement.src = window.URL.createObjectURL(stream); | ||
| callback(new Error('Native device media streaming (getUserMedia) not supported in this browser.')); | ||
| } | ||
| cameraStream = stream; | ||
| videoElement.play(); | ||
| }, errorCallback); | ||
| } | ||
| /** | ||
| * Try to initiate video streaming, and transparently handle cases | ||
| * where that is not possible (includes 'deceptive' browsers, see inline | ||
| * comment for more info) | ||
| */ | ||
| function startVideoStreaming(callback, options) { | ||
| options = options || {}; | ||
| var noGUMSupportTimeout; | ||
| var timeoutLength = options.timeout !== undefined ? options.timeout : 0; | ||
| if (navigator.getMedia) { | ||
| // Some browsers apparently have support for video streaming because of the | ||
| // presence of the getUserMedia function, but then do not answer our | ||
| // calls for streaming. | ||
| // So we'll set up this timeout and if nothing happens after a while, we'll | ||
| // conclude that there's no actual getUserMedia support. | ||
| if (timeoutLength > 0) { | ||
| noGUMSupportTimeout = setTimeout(onStreamingTimeout, 10000); | ||
| }, | ||
| 'stopVideoStreaming': function () { | ||
| var cameraStream = this.cameraStream, videoElement = this.videoElement; | ||
| if (cameraStream) { | ||
| cameraStream.stop(); | ||
| } | ||
| if (videoElement) { | ||
| videoElement.pause(); | ||
| // TODO free src url object | ||
| videoElement.src = null; | ||
| videoElement = null; | ||
| } | ||
| startStreaming(function () { | ||
| // ERROR!!! | ||
| callback(new Error('getUserMedia cannot access the camera')); | ||
| }, function () { | ||
| // The streaming started somehow, so we can assume /there is/ | ||
| // gUM support | ||
| clearTimeout(noGUMSupportTimeout); | ||
| }, function (stream, videoElement, width, height) { | ||
| // Keep references, for stopping the stream later on. | ||
| cameraStream = stream; | ||
| video = videoElement; | ||
| callback(null, stream, videoElement, width, height); | ||
| }); | ||
| } else { | ||
| callback(new Error('Native device media streaming (getUserMedia) not supported in this browser.')); | ||
| } | ||
| function onStreamingTimeout() { | ||
| callback(new Error('Timed out while trying to start streaming')); | ||
| } | ||
| } | ||
| function stopVideoStreaming() { | ||
| if (cameraStream) { | ||
| cameraStream.stop(); | ||
| } | ||
| if (video) { | ||
| video.pause(); | ||
| // TODO free src url object | ||
| video.src = null; | ||
| video = null; | ||
| } | ||
| } | ||
| var GumHelper = { | ||
| startVideoStreaming: startVideoStreaming, | ||
| stopVideoStreaming: stopVideoStreaming | ||
| }; | ||
| return GumHelper; | ||
| }; | ||
| }(); | ||
| index = function () { | ||
| console.log(gumHelper); | ||
| }();}()); | ||
| videoStream.startVideoStreaming(function (cameraStream, videoElement, width, height) { | ||
| console.log('cameraStream', cameraStream); | ||
| console.log('videoElement', videoElement); | ||
| console.log('width', width); | ||
| console.log('height', height); | ||
| }); | ||
| }();}(window, window.navigator, document)); |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.