Xterm Player Save

a web based terminal recording player

Project README

CI codecov npm version downloads gitter chat

XtermPlayer 中文文档

This repo is intended to provide an alternative asciinema player. The original player is writtern in ClojureScript. I think it's hard for frontend people to contribute that directly. This project is intended to make it easier for people to contribute by using Typescript.

Demo

demo-gif

Usage

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm-player@latest/dist/css/xterm-player.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xterm-player@latest/dist/js/xterm-player.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const div = document.getElementById('app')
      const player = new XtermPlayer.XtermPlayer(
        'https://raw.githubusercontent.com/JavaCS3/xterm-player/master/assets/1.cast',
        div
      )
    </script>
  </body>
</html>

Features

  1. Support orginal asciinema v1, v2 format and features
  2. Support Terminalizer format
  3. Support Audio

FAQ

How to record terminal session with audio

$ npm i -g xterm-recorder   # install xterm-recorder first
$ xterm-recorder rec        # exit terminal session will automatically save your recording to out.cast

check peer project https://github.com/JavaCS3/xterm-recorder for details

How to customize theme

Here is a solarized dark example

const solarized_dark_theme = {
  background: '#002b36',
  foreground: '#839496',
  cursor: '#839496',
  cursorAccent: '#839496',
  selection: '#073642',
  black: '#073642',
  brightBlack: '#002b36',
  blue: '#268bd2',
  brightBlue: '#839496',
  red: '#dc322f',
  brightRed: '#cb4b16',
  green: '#859900',
  brightGreen: '#586e75',
  yellow: '#b58900',
  brightYellow: '#657b83',
  magenta: '#d33682',
  brightMagenta: '#6c71c4',
  cyan: '#2aa198',
  brightCyan: '#93a1a1',
  white: '#eee8d5',
  brightWhite: '#fdf6e3',
}
const player = new XtermPlayer.XtermPlayer(url, div, { theme: solarized_dark_theme })
// or just use builtin theme
const player = new XtermPlayer.XtermPlayer(url, div, { theme: XtermPlayer.XtermPlayer.THEME_SOLARIZED_DARK })

Develop Guide

$ cd <repo> && yarn
$ yarn demo
$ yarn test
Open Source Agenda is not affiliated with "Xterm Player" Project. README Source: JavaCS3/xterm-player
Stars
104
Open Issues
32
Last Commit
1 year ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating