Sample SharePoint Framework client-side web part illustrating video capturing via MediaRecorder Web API.

This is an experimental web part. Because this technology’s specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes

Browser with MediaRecorder API support

browsersupported

Browser without MediaRecorder API support

browserunsupported

Applies to

Solution

Solution angular-media-recorder
Author(s) Joseph Velliah

Version history

Version 1.0
Date June 1, 2018
Comments Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • clone this repo
  • go to the working directory of the webpart folder in the command line run:
    • npm and typings install
      • npm install @types/microsoft-ajax –save-dev
      • npm install @types/sharepoint –save-dev
      • npm install @types/angular –save-dev
    • gulp serve
  • Open the workbench page in a sharepoint site (https://{yoursiteurl}/_layouts/15/workbench.aspx)
  • add Media Recorder webpart and edit it
    • configure the library name where you would like to save the recording/input file.
    • start recording
    • allow camera and mic
    • stop recording
    • replay video
    • retry or upload the recorded video

Features

This project illustrates the following concepts:

  • Front/Back camera selection
  • Video recording using the supported browsers
  • File uploading option for the unsupported browsers
  • Playback recording
  • Upload files to document library