JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Audio/Video Example - Record Plugin for Video.js</title>
        
        <!-- Include Video.js stylesheet (https://videojs.com/) -->
        <link href="../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">

        <!-- Style of VideoJS -->
        <link href="../dist/css/videojs.record.css" rel="stylesheet">

        <style>
        /* change player background color */
        #myVideo {
            background-color: #9ab87a;
        }
        </style>
    </head>
    <body>
        <!-- Create the preview video element -->
        <video id="myVideo" class="video-js vjs-default-skin"></video>
        
        <!-- Load video.js -->
        <script src="../node_modules/video.js/dist/video.min.js"></script>

        <!-- Load RecordRTC core and adapter -->
        <script src="../node_modules/recordrtc/RecordRTC.js"></script>
        <script src="../node_modules/webrtc-adapter/out/adapter.js"></script>
        
        <!-- Load VideoJS Record Extension -->
        <script src="../dist/videojs.record.js"></script>
        <script>
        var videoMaxLengthInSeconds = 120;

        // Inialize the video player
        var player = videojs("myVideo", {
            controls: true,
            width: 720,
            height: 480,
            fluid: false,
            plugins: {
                record: {
                    audio: true,
                    video: true,
                    maxLength: videoMaxLengthInSeconds,
                    debug: true,
                    videoMimeType: "video/webm;codecs=H264"
                }
            }
        }, function(){
            // print version information at startup
            videojs.log(
                'Using video.js', videojs.VERSION,
                'with videojs-record', videojs.getPluginVersion('record'),
                'and recordrtc', RecordRTC.version
            );
        });

        // error handling for...