uploading webm

webRTC/components/Recorder.js

@@ -5,18 +5,18 @@ import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles'
 import axios from 'axios'
 import CircularProgress from '@material-ui/core/CircularProgress';
-
+import utils from '../src/utils'
 import 'videojs/dist/video-js.css';
 import 'videojs-record/dist/css/videojs.record.css';
 
 dynamic(() => import('webrtc-adapter'), {
     ssr: false
-  })
+})
 
 //import RecordRTC from 'recordrtc';
 const RTCRecorder = dynamic(() => import('RecordRTC'), {
     ssr: false
-  })
+})
 
 //import Record from 'videojs-record/dist/videojs.record';
 // const record = dynamic(() => import('videojs-record/dist/videojs.record'), {
@@ -25,16 +25,17 @@ const RTCRecorder = dynamic(() => import('RecordRTC'), {
 
 const styles = theme => ({
     root: {
-      margin: theme.spacing.unit,
-      maxWidth: '400px',    [theme.breakpoints.down('md')]: {
-        maxWidth: `${100 - (theme.spacing.unit)}vw`
-      },
-      button: {
-    
         margin: theme.spacing.unit,
-        alignSelf:'flex-end'
+        maxWidth: '400px', [theme.breakpoints.down('md')]: {
-      },
+            maxWidth: `${100 - (theme.spacing.unit)}vw`
-    }})
+        },
+        button: {
+
+            margin: theme.spacing.unit,
+            alignSelf: 'flex-end'
+        },
+    }
+})
 class Recorder extends Component {
 
     async componentDidMount() {
@@ -82,32 +83,42 @@ class Recorder extends Component {
         }
     }
 
-    sendBlob = () =>
+    sendBlob = () => {
-    {
+        console.log('accessing recording: ', this.player.recordedData)
-        console.log('accessing recording: ',  this.player.recordedData)
         var formData = new FormData();
-        formData.append('file', blob, blob.name);
+        formData.append('upload', this.player.recordedData, "myupload");
-        formData.append('user', 7);//TODO: taking from auth
+        //   formData.append('user', 7);//TODO: taking from auth
 
-        axios.post("http://localhost/api/media", formData)
+        utils.setAuthorizationHeader('eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1NTk3Mjg0NTIsImV4cCI6MTU1OTczMjA1Miwicm9sZXMiOlsiUk9MRV9UQUxFTlQiLCJST0xFX1VTRVIiXSwidXNlcm5hbWUiOiJ0aG9tYXMuYmVycm9kQGUtZGVjbGljLmNvbSJ9.AZmFSGSlIi8HXg3XK_fFVCum6sPgPMKZvHwYpSKmryiwU93J87tVrhX0m3zuPbOJYASv-8tL8C3ZTpkb11iZ9dpnVdVovAZa_uMmh65XnqivIDg3v9meqP-7k3r0REJWT2PKWvgTT4_z902Nz3_tFQVG0OmJR2kDPwDDicxIwiM3CgV0BaWLl5yrWQD9j4VQulV1DTGaiWEImdd9l7K2i6BZgXZ63Ba7ubjmjWNW14qregyiYiJ5AeCx0R-StWlTjp7bGF06JYA6116eX0tzTLONQSbgMkPTqtq47060h6tSBNfWvz2zYvmMpm5uamhApr-tc1x1xERdCJBNEcfhbph_jv-uSohDOfpExpOXIdq3vC6ucWnXQENcWeiD3zthgk_ypCMluucL-sJurzF1Bx6ibFJXPnr4pqtoHevq_kN9vCs58necXnsaR62ikO2Axxaa-AbDSvG5jSqthL07ZaZM7E8REStAT0I6ET2ST2g-OSy97w4FQxKawJeF8dtDbDI0gcCywWVhMawPJ5v7Ri9dXw3KVHWEdl7FKyJdYncQ9ybFpynUuXtBXn4X1thWYqCdEeSF_A5tLDFa48s28WDcv8RF-1DZBRj78adcZjT35oGE8Myqi892o4JvbHDifidgOtmQjUSvCyBnLUnaooOdl7MAEQ32s4RCs9T6dvQ')
 
+        axios.post("http://localhost/app_dev.php/api/media",
+            formData,
+            {
+                headers: {
+                    'Content-Type': `multipart/form-data;`
+                },
+                withCredentials: true
+            })
+            .then(res => console.log(res)).catch(err => console.log(err))
+
+        console.log('end send Blob')
     }
 
     render() {
         const { classes } = this.props;
         return (
-        <div>
-            <div data-vjs-player>
-                <video id="myVideo" ref={node => this.videoNode = node} className="video-js vjs-default-skin" playsInline></video>
-            </div>
             <div>
-                <Button type="submit" variant="outlined" color="secondary"
+                <div data-vjs-player>
-                 className={classes.button}
+                    <video id="myVideo" ref={node => this.videoNode = node} className="video-js vjs-default-skin" playsInline></video>
-                 onClick={this.sendBlob}>
+                </div>
-                Send
+                <div>
+                    <Button type="submit" variant="outlined" color="secondary"
+                        className={classes.button}
+                        onClick={this.sendBlob}>
+                        Send
                 </Button>
+                </div>
             </div>
-        </div>
         );
     }
 }