New mute/unmute prop for video preview

README.md

@@ -51,6 +51,7 @@ The props here are specific to this component but one can pass any prop to the u
 | mirrored                  | boolean  | false        | show camera preview and get the screenshot mirrored                                     |
 | minScreenshotHeight       | number   |              | min height of screenshot                                                                |
 | minScreenshotWidth        | number   |              | min width of screenshot                                                                 |
+| mutePreview               | boolean  | true         | mute/unmute video preview                                                               |
 | onUserMedia               | function | noop         | callback for when component receives a media stream                                     |
 | onUserMediaError          | function | noop         | callback for when component can't receive a media stream with MediaStreamError param    |
 | screenshotFormat          | string   | 'image/webp' | format of screenshot                                                                    |

src/__tests__/react-webcam.test.tsx

@@ -33,7 +33,7 @@ it('renders correctly', () => {
   expect(tree.toJSON()).toMatchSnapshot();
 });
 
-it('sets <video/> muted to false when props.audio is true', () => {
+it('sets <video/> muted to false when props.mutePreview is false', () => {
   const tree = renderer
     .create(
       <Webcam
@@ -46,6 +46,7 @@ it('sets <video/> muted to false when props.audio is true', () => {
         imageSmoothing={false}
         minScreenshotHeight={1000}
         minScreenshotWidth={1000}
+        mutePreview={false}
         onUserMedia={() => {}}
         onUserMediaError={() => {}}
         screenshotFormat="image/png"

src/react-webcam.tsx

@@ -61,6 +61,7 @@ export type WebcamProps = Omit<React.HTMLProps<HTMLVideoElement>, "ref"> & {
   mirrored: boolean;
   minScreenshotHeight?: number;
   minScreenshotWidth?: number;
+  mutePreview?: boolean;
   onUserMedia: (stream: MediaStream) => void;
   onUserMediaError: (error: string | DOMException) => void;
   screenshotFormat: "image/webp" | "image/png" | "image/jpeg";
@@ -391,6 +392,7 @@ export default class Webcam extends React.Component<WebcamProps, WebcamState> {
       screenshotQuality,
       minScreenshotWidth,
       minScreenshotHeight,
+      mutePreview = true,
       audioConstraints,
       videoConstraints,
       imageSmoothing,
@@ -412,7 +414,7 @@ export default class Webcam extends React.Component<WebcamProps, WebcamState> {
           autoPlay
           disablePictureInPicture={disablePictureInPicture}
           src={state.src}
-          muted={!audio}
+          muted={mutePreview}
           playsInline
           ref={ref => {
             this.video = ref;