2

I'm trying to embed a local asciinema session in html. here is my directory layout:

$ tree
.
├── asciinema
│   └── demo.cast
├── css
│   └── asciinema-player.css
├── index.html
├── js
│   └── asciinema-player.js
└── makefile

And here is my html file, just like it says in here:

$ cat index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/asciinema-player.css" />
</head>
<body>
ABCDE
<asciinema-player src="/asciinema/demo.cast"></asciinema-player>
<script src="/js/asciinema-player.js"></script>
</body>
</html>

When I drag-and-drop this file to Mozilla, it only shows ABCDE

OrenIshShalom
  • 5,974
  • 9
  • 37
  • 87

2 Answers2

4

The main problem is that you're trying to run a script that uses XMLHttpRequest as a local HTML file in your browser. If you open your browser console, you'll see that it gives an error trying to find the files in all your src/href tags. You could fix that by removing the starting / from every src/href and the player would load, but then you'd run into problems with CORS when the script tries to load your cast file.

The solution would be to use an HTTP server to host your cast files, so you could reference them directly by their full server path, like http://localhost:3000/asciinema/demo.cast. Or you could just use an external URL for a cast file, providing the external website has no CORS enabled. Example:

<asciinema-player src="https://asciinema.org/a/28307.cast"></asciinema-player>

Now which HTTP server you choose is on you, there are many many really simple servers made in every programming language possible. If you're familiar with Node/JavaScript, then http-server would do. If you're familiar with Python then simplehttpserver would also do. Try whichever one you're comfortable with.

Another "solution" is to disable CORS in your browser. But then you're just risking yourself and that's also just a cheap hack.

TL;DR: you can't load local cast files within local HTML files because of CORS. You need to host your casts on a local or external HTTP server.

Toribio
  • 3,963
  • 3
  • 34
  • 48
2

There is a workaround, though, if you really want to have it all local on your PC. And that is by embedding the asciicast file into the HTML page by inlining it into the src attribute. You can do that by converting the demo.cast file, which is a JSON file, into a single Base64 encoded line.

Convert the demo.cast file with base64 -w 0 demo.cast. You will need to capture that output somehow so you can then paste it into the HTML file. For example pipe it into a text file, or directly append it at the end of the HTML file and then work the rest of the HTML around it.

Then write your asciinema-player line like so:

<asciinema-player src="data:application/json;base64,BASE_64_ENCODED_STRING_HERE" />

For example:

<asciinema-player src="data:application/json;base64,eyJ2ZXJzaW9uIjogMiwgIndpZHRoIjogMTQwL" />
Florian
  • 489
  • 4
  • 13