Skip to content

Instantly share code, notes, and snippets.

@dtipson

dtipson/quick-stream-self.js

Last active July 26, 2017 19:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dtipson/4ff1f55fb194f1024a445a0c457a1ead to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dtipson/4ff1f55fb194f1024a445a0c457a1ead to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dtipson revised this gist Jul 26, 2017. 1 changed file with 4 additions and 9 deletions.
    13 changes: 4 additions & 9 deletions quick-stream-self.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,6 @@

    document.body.innerHTML = '';

    //closeStream :: Stream -> undefined
    const closeStream = stream => {
    console.log('closing stream',stream);
    stream.getAudioTracks().forEach(track => track.stop());
    stream.getVideoTracks().forEach(track => track.stop());
    }

    const delay = milliseconds => x => new Promise(resolve => setTimeout(resolve, milliseconds, x));

    //requestRecord :: Object (optional) -> Promise Stream
    @@ -32,8 +25,10 @@ const createVideo = videoURL => {
    video.autoplay = false;
    video.muted = true;
    video.loop = true;
    video.width = 640;
    video.height = 480;
    video.style.maxWidth = '100vw';
    video.style.maxHeight = '99.7vh';
    video.style.width = '100%';
    video.style.objectFit = 'cover';

    video.src = videoURL;

  2. dtipson revised this gist Jul 26, 2017. No changes.
  3. dtipson created this gist Jul 26, 2017.
    59 changes: 59 additions & 0 deletions quick-stream-self.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@

    document.body.innerHTML = '';

    //closeStream :: Stream -> undefined
    const closeStream = stream => {
    console.log('closing stream',stream);
    stream.getAudioTracks().forEach(track => track.stop());
    stream.getVideoTracks().forEach(track => track.stop());
    }

    const delay = milliseconds => x => new Promise(resolve => setTimeout(resolve, milliseconds, x));

    //requestRecord :: Object (optional) -> Promise Stream
    const requestRecord = (config={video:true, audio:true}) => {
    return navigator.mediaDevices && navigator.mediaDevices.getUserMedia ?
    navigator.mediaDevices.getUserMedia(config).then(delay(1400)) : // delay avoid startup flash
    Promise.reject('no support for getUserMedia');
    };

    const createVideo = videoURL => {

    console.log('creating video w/', videoURL);

    var video = document.createElement('video');

    video.addEventListener('error', e => {
    console.log('video play error', e, video.error);
    }, true);

    video.controls = false;
    video.className = 'grid-video';
    video.autoplay = false;
    video.muted = true;
    video.loop = true;
    video.width = 640;
    video.height = 480;

    video.src = videoURL;

    video.onloadedmetadata = function(e) {
    video.play();
    }

    return video;
    };

    const streamToBlobUrl = stream => {
    return window.URL.createObjectURL(stream);
    };

    const appendToBody = el => {
    document.body.appendChild(el);
    return el;
    }

    requestRecord()
    .then(streamToBlobUrl)
    .then(createVideo)
    .then(appendToBody)