Created
March 22, 2018 13:32
-
-
Save itshaadi/3d3b47054c0fac5c3cd9c8fd2013e066 to your computer and use it in GitHub Desktop.
webRTC MediaRecorder Sample
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
| import os | |
| import ffmpy | |
| from flask import Flask, render_template, request, redirect, url_for, flash, send_from_directory, current_app | |
| from werkzeug.utils import secure_filename | |
| from flask_cors import CORS | |
| UPLOAD_FOLDER = './uploads' | |
| ALLOWED_EXTENSIONS = set(['ogg']) | |
| app = Flask(__name__) | |
| app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER | |
| CORS(app) | |
| def allowed_file(filename): | |
| return '.' in filename and \ | |
| filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS | |
| @app.route('/') | |
| def render_static(): | |
| return render_template('index.html') | |
| @app.route('/upload', methods=['GET', 'POST']) | |
| def upload_file(): | |
| if request.method == 'POST': | |
| # check if the post request has the file part | |
| if 'file' not in request.files: | |
| flash('No file part') | |
| file = request.files['file'] | |
| # if user does not select file, browser also | |
| # submit a empty part without filename | |
| if file.filename == '': | |
| flash('No selected file') | |
| if file and allowed_file(file.filename): | |
| filename = secure_filename(file.filename) | |
| file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) | |
| ff = ffmpy.FFmpeg( | |
| inputs = {os.path.join(app.config['UPLOAD_FOLDER'], filename): None}, | |
| outputs = {os.path.join(app.config['UPLOAD_FOLDER'], 'audio.wav'): None}, | |
| global_options = {'-y -loglevel quiet'} | |
| ) | |
| ff.run() | |
| return 'file got uploaded' | |
| @app.route('/uploads/<path:filename>', methods=['GET', 'POST']) | |
| def download(filename): | |
| uploads = os.path.join(current_app.root_path, app.config['UPLOAD_FOLDER']) | |
| return send_from_directory(directory=uploads, filename=filename) | |
| if __name__ == '__main__': | |
| app.run(host='0.0.0.0', ssl_context=('cert.pem', 'key.pem')) |
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
| 'use strict' | |
| let log = console.log.bind(console), | |
| id = val => document.getElementById(val), | |
| ul = id('ul'), | |
| gUMbtn = id('gUMbtn'), | |
| start = id('start'), | |
| stop = id('stop'), | |
| stream, | |
| recorder, | |
| counter=1, | |
| chunks, | |
| media; | |
| gUMbtn.onclick = e => { | |
| let mv = id('mediaVideo'), | |
| mediaOptions = { | |
| video: { | |
| tag: 'video', | |
| type: 'video/webm', | |
| ext: '.mp4', | |
| gUM: {video: true, audio: true} | |
| }, | |
| audio: { | |
| tag: 'audio', | |
| type: 'audio/ogg', | |
| ext: '.ogg', | |
| gUM: {audio: true} | |
| } | |
| }; | |
| media = mv.checked ? mediaOptions.video : mediaOptions.audio; | |
| navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => { | |
| stream = _stream; | |
| id('gUMArea').style.display = 'none'; | |
| id('btns').style.display = 'inherit'; | |
| start.removeAttribute('disabled'); | |
| recorder = new MediaRecorder(stream); | |
| recorder.ondataavailable = e => { | |
| chunks.push(e.data); | |
| if(recorder.state == 'inactive') { | |
| makeLink() | |
| upload() | |
| } | |
| }; | |
| log('got media successfully'); | |
| }).catch(log); | |
| } | |
| start.onclick = e => { | |
| start.disabled = true; | |
| stop.removeAttribute('disabled'); | |
| chunks=[]; | |
| recorder.start(); | |
| } | |
| stop.onclick = e => { | |
| stop.disabled = true; | |
| recorder.stop(); | |
| start.removeAttribute('disabled'); | |
| } | |
| function makeLink(){ | |
| let blob = new Blob(chunks, {type: media.type }) | |
| , url = URL.createObjectURL(blob) | |
| , li = document.createElement('li') | |
| , mt = document.createElement(media.tag) | |
| , hf = document.createElement('a') | |
| ; | |
| mt.controls = true; | |
| mt.src = url; | |
| hf.href = url; | |
| hf.download = `${counter++}${media.ext}`; | |
| hf.innerHTML = `donwload ${hf.download}`; | |
| li.appendChild(mt); | |
| li.appendChild(hf); | |
| ul.appendChild(li); | |
| } | |
| /* Create and Upload the file */ | |
| function createfile () { | |
| let blob = new Blob(chunks, {type: media.type}) | |
| let file = new File([blob], 'audio.ogg', {type: media.type, lastModified: Date.now()}) | |
| console.log(file) | |
| return file | |
| } | |
| function upload () { | |
| console.log('happend') | |
| let file = createfile() | |
| let formData = new FormData() | |
| formData.append('file', file) | |
| let request = new XMLHttpRequest() | |
| request.open('POST', window.location.protocol + "//" + window.location.host + "/upload") | |
| request.send(formData) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment