Merge pull request #14 from apivideo/add-mimetype

Add mimetype

Author: olivier-lando

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [0.2.2] - 2023-02-07
+- add `getSupportedMimeType` method
+- add `mimeType` & `generateFileOnStop` options
+
 ## [0.2.1] - 2023-01-24
 - Add `videoPlayable` event
 - Temporary remove computed audio delay

examples/record.a.video/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@api.video/media-stream-composer": "0.2.1",
+    "@api.video/media-stream-composer": "0.2.2",
     "@mui/icons-material": "^5.11.0",
     "material-ui-popup-state": "^5.0.4",
     "next": "13.1.1",

examples/record.a.video/src/components/UploadSettingsDialog.tsx

@@ -1,14 +1,17 @@
-import { FormControl, FormLabel, Input } from '@mui/material'
+import { MediaStreamComposer } from '@api.video/media-stream-composer'
+import { FormControl, FormControlLabel, FormLabel, Input, MenuItem, Select, Switch } from '@mui/material'
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 
 export interface UploadSettings {
     videoName: string;
+    mimeType?: string;
+    downloadVideoFile: boolean;
 }
 
 interface UploadSettingsDialogProps {
@@ -21,24 +24,58 @@ interface UploadSettingsDialogProps {
 
 const UploadSettingsDialog = (props: UploadSettingsDialogProps) => {
     const [videoName, setVideoName] = useState<string>(props.uploadSettings.videoName);
+    const [mimeType, setMimeType] = useState<string>("default");
+    const [downloadVideoFile, setDownloadVideoFile] = useState<boolean>(false);
+    const [mimeTypes, setMimeTypes] = useState<string[]>([]);
+    
+
+    useEffect(() => {
+        setMimeTypes(MediaStreamComposer.getSupportedMimeTypes());
+    }, []);
+
 
 
     return <Dialog fullWidth={true} open={props.open} onClose={() => props.onClose && props.onClose()}>
         <DialogTitle>Upload settings</DialogTitle>
-        
+
         <DialogContent>
             <FormControl component="fieldset" style={{ width: "100%" }}>
                 <FormLabel component="legend">Video name</FormLabel>
                 <Input value={videoName} onChange={(e) => setVideoName(e.target.value)} />
             </FormControl>
+
+            <FormControl component="fieldset" fullWidth>
+
+                <FormLabel component="legend">Mimetype</FormLabel>
+                <Select
+                    labelId="audio-source-select-label"
+                    id="audio-source-select"
+                    value={mimeType}
+                    label="Audio source"
+                    onChange={async (a) => {
+                        setMimeType(a.target.value as string);
+                    }}
+                >
+                    <MenuItem key={"undefined"} value={"default"}>default</MenuItem>
+                    {mimeTypes.map(d => <MenuItem key={d} value={d}>{d}</MenuItem>)}
+                </Select>
+            </FormControl>
+
+            <FormControl component="fieldset">
+                <FormLabel component="legend">Options</FormLabel>
+                <FormControlLabel control={<Switch checked={downloadVideoFile} onChange={(e) => setDownloadVideoFile(e.target.checked)} />} label="Download video file" />
+            </FormControl>
         </DialogContent>
 
         <DialogActions>
             <Button onClick={() => props.onClose && props.onClose()}>Cancel</Button>
             <Button onClick={() => props.onSubmit && props.onSubmit({
-                videoName
+                videoName,
+                mimeType: mimeType === "default" ? undefined : mimeType,
+                downloadVideoFile
             })}>Submit</Button>
         </DialogActions>
+
     </Dialog>
 }
 

examples/record.a.video/src/pages/_app.tsx

@@ -1,8 +1,20 @@
-import '../../styles/globals.css'
 import type { AppProps } from 'next/app'
+import Script from 'next/script'
+import '../../styles/globals.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <>
+  
+	<Script async src="https://www.googletagmanager.com/gtag/js?id=G-N9E9YP1HGF"></Script>
+	<Script id="ga" dangerouslySetInnerHTML={{
+    __html: `
+  		window.dataLayer = window.dataLayer || [];
+  		function gtag(){dataLayer.push(arguments);}
+  		gtag('js', new Date());
+  		gtag('config', 'G-N9E9YP1HGF');`}}/>
+	
+  <Component {...pageProps} />
+  </>
 }
 
 export default MyApp

examples/record.a.video/src/pages/index.tsx

@@ -61,6 +61,21 @@ const composer = (() => {
     lineWidth: 6,
     autoEraseDelay: 2
   });
+  mediaStreamComposer.addEventListener("recordingStopped", (e: any) => {
+    if (e.data.file) {
+      const a = document.createElement("a");
+      console.log(e.data.file);
+      let extension = "mp4";
+      try {
+        extension = (e.data.file.type.split("/")[1]).split(";")[0];
+      } catch (e) {
+        console.error(e);
+      }
+      a.href = URL.createObjectURL(e.data.file);
+      a.download = `video.${extension}`;
+      a.click();
+    }
+  });
   return mediaStreamComposer;
 })();
 
@@ -89,6 +104,7 @@ const Home: NextPage = () => {
   const [audioStreamId, setAudioStreamId] = useState<string | undefined>();
   const [uploadSettings, setUploadSettings] = useState<UploadSettings>({
     videoName: "My record.a.video composition",
+    downloadVideoFile: false,
   });
   const [videoStatus, setVideoStatus] = useState<"recording" | "encoding" | "playable" | undefined>();
 
@@ -429,6 +445,8 @@ const Home: NextPage = () => {
                     composer.startRecording({
                       uploadToken,
                       videoName: uploadSettings.videoName,
+                      generateFileOnStop: uploadSettings.downloadVideoFile,
+                      mimeType: uploadSettings.mimeType,
                       origin: {
                         application: {
                           name: "record-a-video",
@@ -445,6 +463,7 @@ const Home: NextPage = () => {
                       setVideoStatus("playable");
                       setPlayerUrl((e as any).data.assets.player);
                     });
+
                     setPlayerUrl(null);
                     setIsRecording(true);
                   } else {
@@ -479,8 +498,8 @@ const Home: NextPage = () => {
                 <Step completed={stepNum > 1}>
                   <StepLabel>Done</StepLabel>
                   <StepContent>
-                    <Typography>You can watch the recording by clicking here: <a href={playerUrl} rel="noreferrer" target="_blank">open player</a>. Highest qualities are still being processed. The viewing experience will be even better if you refresh the player in a few seconds. </Typography>
-                    <Typography style={{marginTop: "1em"}}>Want to offer a similar experience in your application? <a href="https://dashboard.api.video/register" target="_blank" rel="noreferrer">Create your free api.video account</a> and start building with video now. No cc required.</Typography>
+                    <Typography>You can watch the recording <a href={playerUrl!} rel="noreferrer" target="_blank">by clicking here</a>. Higher qualities are still being processed. The viewing experience will be even better if you refresh the player in a few seconds. </Typography>
+                    <Typography style={{ marginTop: "1em" }}>Want to offer a similar experience in your application? <a href="https://dashboard.api.video/register" target="_blank" rel="noreferrer">Create your free api.video account</a> and start building with video now. No cc required.</Typography>
                   </StepContent>
                 </Step>
               </Stepper>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/media-stream-composer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "api.video media stream composer",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "xhr-mock": "^2.5.1"
   },
   "dependencies": {
-    "@api.video/media-recorder": "^1.0.8",
+    "@api.video/media-recorder": "^1.0.10",
     "core-js": "^3.23.4"
   },
   "engines" : { 

package.json

@@ -1,4 +1,4 @@
-import { ApiVideoMediaRecorder, ProgressiveUploaderOptionsWithAccessToken, ProgressiveUploaderOptionsWithUploadToken, VideoUploadResponse } from "@api.video/media-recorder";
+import { ApiVideoMediaRecorder, Options as RecorderOptions, ProgressiveUploaderOptionsWithAccessToken, ProgressiveUploaderOptionsWithUploadToken, VideoUploadResponse } from "@api.video/media-recorder";
 import { DrawingLayer, DrawingSettings } from "./drawing-layer";
 import MouseEventListener, { DragEvent, MoveEvent } from "./mouse-event-listener";
 import { Resolution } from "./stream-position";
@@ -46,7 +46,7 @@ declare global {
 
 export type MouseTool = "draw" | "move-resize";
 
-type RecordingOptions = ProgressiveUploaderOptionsWithUploadToken | ProgressiveUploaderOptionsWithAccessToken;
+type RecordingOptions =  RecorderOptions & (ProgressiveUploaderOptionsWithUploadToken | ProgressiveUploaderOptionsWithAccessToken);
 
 export class MediaStreamComposer {
     private result: MediaStream | null = null;
@@ -164,6 +164,10 @@ export class MediaStreamComposer {
         return this.result;
     }
 
+    public static getSupportedMimeTypes() {
+        return ApiVideoMediaRecorder.getSupportedMimeTypes();
+    }
+
     public startRecording(options: RecordingOptions) {
         if(!this.started) this.init();