Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured:

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

Here is the content of my html file, following the instructions found 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>

After dragging and dropping this file into Mozilla, only "ABCDE" is displayed. Any idea why?

javascripthtmlcssasciinema

Answer №1

The issue at hand arises from attempting to execute a script utilizing XMLHttpRequest within a local HTML file in your browser. Upon checking the browser console, an error will be displayed as it struggles to locate files within all src/href tags. To address this, removing the initial / from each src/href tag would allow the player to load; however, this would lead to CORS issues when the script accesses your cast file.

An effective solution involves employing an HTTP server to host your cast files. This enables direct referencing using their complete server path, such as 

http://localhost:3000/asciinema/demo.cast
. Alternatively, you can utilize an external URL for the cast file, provided that the external site has CORS disabled. For instance:

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

The choice of HTTP server is up to you, as there are numerous user-friendly servers available across various programming languages. Consider tools like http-server for Node/JavaScript enthusiasts or simplehttpserver for those familiar with Python. Opt for the option you find most comfortable.

Another "solution" could involve disabling CORS in your browser. However, this approach poses security risks and is merely a temporary workaround.

In essence, loading local cast files within local HTML files is impeded by CORS restrictions. The recommended course of action is hosting your casts on either a local or external HTTP server.

Answer №2

If you prefer to keep everything local on your computer, there's a workaround available. You can embed the asciicast file into an HTML page by encoding it into a Base64 string and inlining it into the src attribute.

To do this, convert the demo.cast file using the command base64 -w 0 demo.cast. You'll then need to capture the output somehow and paste it into the HTML file. This can be done by saving it to a text file or appending it directly at the end of the HTML file before adjusting the rest of the HTML code accordingly.

Next, include the asciinema-player line in this format:

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

For example:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to find a solution to adjust an Angular directive

I am attempting to create a functionality where, upon clicking a button, the user can select one of two images displayed and make the selected image draggable. Currently, my code displays two images with only one being draggable. I am struggling to impleme ...

javascriptjqueryangularjsangularjs-directive

"Is there a way to extract text enclosed within HTML tags, such as <div>text</div>, with Selenium using C#

How can I extract the text 'True' from within the HTML tags <div>text</div> using Selenium and C#? <div type='data' id='OfferInCart' style='display:none;'>True</div> I have attempted to retr ...

c#htmlselenium-webdriver

What issue can be identified in this HTML/CSS code?

Here is the code snippet I am working with: http://jsfiddle.net/7jGHS/1299/ This is the HTML code: <div class="text1"><h2><span>THIS IS A TEST</span></h2> <p>1800 - 1570 - 000</p> <h2><span>T ...

htmlcss

What could be causing the malfunction of the map function, despite the code appearing to be correct?

I have encountered an issue in my React functional component where I am trying to display a list of notifications. The useEffect() function is being called to generate the "data" which should then be displayed on the page. The code seems to be running fine ...

javascriptreactjsreact-hooksjavascript-objects

Pictures are not showing up in the gallery after they have been saved

if (action.equals("saveToGallery")) { JSONObject obj = args.getJSONObject(0); String imageSource = obj.has("imageSrc") ? obj.getString("imageSrc") : null; String imageName = obj.has(" ...

javascriptandroidjson

Modifying the HTML <select> element with JavaScript

[resolved] I'm encountering an issue with the code below that is supposed to dynamically change the options in a second drop-down menu based on the selection made in the first menu. I've tried to troubleshoot the problem but haven't been suc ...

javascripthtml

Unable to utilize the "fs" module within a Three.js application

After utilizing this base code to create an app with Three.js, I attempted to incorporate node's fs module for filesystem interaction. Despite adding const fs = require("fs") in my app.js file, the module could not be located. The error mess ...

javascriptnode.jsthree.jsnode.js-fs

Guidelines for comparing two distinct dates using jQuery

const currentDate = $("#date").text(); // the current date is set as a variable 01/06/2017 // Another date is declared as a variable let startDate = '01 / 06 / 2017'; if (currentDate == startDate) {} if (currentDate < startDate) {} <script ...

jqueryhtml

Trouble with JavaScript loading in HTML webpage

<!DOCTYPE html> <html> <head> <title>Breakout Game</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas width="900" height="450" class="canvas"></canvas> ...

javascripthtmlcssdom

Ways to change the chart type in ApexCharts

I'm seeking a way to change the chart type of an existing ApexCharts that has already been rendered. After reviewing the methods, I attempted to use the updateOptions() method, but encountered the error: Uncaught TypeError: Cannot read property &apos ...

javascriptjqueryapexcharts

What could be causing the onclick function to not activate on the iOS safari browser?

My Shopify site works perfectly on all browsers except iOS Safari. When users try to click the "add to cart" button on this specific browser, it does not trigger the onclick function. This issue is unique to iOS Safari as the button works fine on desktop a ...

javascriptphpjqueryshopify

Assign a variable to the result of ajax that remains unchanged until it is specifically invoked

I am currently working on the final part of my radio script, specifically focusing on the "last song" section. My goal is to retrieve a URL from an external PHP script, play the song, and once the song ends, I want to set a global variable equal to the cur ...

javascriptajaxvariables

Testing an asynchronous generator function in Jest using unit tests

I need help writing a unit test for a generator function where I am struggling to properly mock a read stream object (ReadStream). Here is the function I'm trying to test: public async *readChunks(file: string, chunkSize: number): AsyncIterableIter ...

javascriptnode.jstestingstreammocking

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

After trying to incorporate a RectAreaLight into my three.js scene where I have objects with MeshPhongMaterial, I noticed that there is no light reflection on the objects. A useful example can be found here: Link If you open the developer tools, you can s ...

javascriptreactjsthree.jswebgl

Searching for root words in elasticsearch

After successfully implementing stemming for elasticsearch, I noticed that my searches for "code" also bring up results for "codes" and "coding," which is great. However, I encountered a problem when using the "must_not" field in my queries. Including "co ...

javascriptnode.jselasticsearch

The function named updateContact is not defined, even though it has been declared

Presented below is Angular code snippet: @Component({ selector: 'app-detail-view', templateUrl: './detail-view.component.html', styleUrls: ['./detail-view.component.css'] }) export class DetailViewComponent implements O ...

javascriptangular

Adding a gap between the Bootstrap navbar and jumbotron for better spacing

Upon examining the Bootstrap example provided at: http://getbootstrap.com/examples/navbar/ I noticed there is a gap between the jumbotron and the navbar. After delving into the example's CSS, I found that disabling this rule (twice): .navbar { ...

csstwitter-bootstrap

Retrieving specific data from an SQL database using PHP

My goal is to create a select form with fields populated from an SQL database containing a table of stores. I used a method to retrieve distinct store names and populate the select tool with them. echo '<select name="StoreName" />'."\ ...

phphtmlmysqlsqlinnodb

Efficient ways to clear all input fields within a React div component

import "./App.css"; import { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { addUser} from "./features/Users"; function App() { const dispatch = useDispatch(); const use ...

javascriptreactjsredux

How can I call the telerik radgrid.databind() function using a JavaScript function?

Currently, I am coding in ASP .NET and have an ASPX page featuring a Telerik RadGrid. I am curious to know if it is feasible to call the RadGrid.DataBind() method from within a JavaScript function? ...

javascriptajaxdata-bindingtelerik-gridrad-controls