Camera recording in Twine

Twine Version: 2.3.16 and sugarcube 2.36.1
[also choose a Story Format tag above]

I’m trying to have ask camera permission and start recording from the user in my first passage and stop recording and download video in the last passage - this one doesn’t work. I’m using recordRTC and jquery libraries and I’m adding them via CDN. Can anyone please help me work my code?

This is the code in the javascript for the libraries:

// Include the RecordRTC library using a CDN
var recordScript = document.createElement('script');
recordScript.src = '';

(function () {
  'use strict';

  // Check if jQuery is already loaded
  if (typeof jQuery === 'undefined') {
    // Create a script element
    var script = document.createElement('script');
    script.src = '';

   // Append the script element to the document body

this is the code in my first passage:

<button id="startRecordingButton">Start Recording</button>

$(document).ready(function() {
  $('#startRecordingButton').on('click', function() {

function startRecording() {

  var recordRTC; // Local variable to store the RecordRTC instance

navigator.mediaDevices.getUserMedia({ video: true })
    .then(function(stream) {

     // Permission granted, do something with the camera stream
      alert("Camera permission granted!");

     // Create a new video element to display the camera stream
     var videoElement = document.createElement("video");
      videoElement.srcObject = stream;
      videoElement.autoplay = true; = "fixed"; = "0"; = "0"; = "200px"; = "auto";

      // Create a RecordRTC instance to record the video stream
      recordRTC = RecordRTC(stream, { type: 'video' });

      // Start recording

      // Show the download button
    .catch(function(error) {
      // Permission denied or error occurred
      alert("Camera permission denied or error occurred: " + error);

this is the code in my last passage:

<button id="downloadButton">Download Video</button>

$('#downloadButton').on('click', function() {
  var recordRTC; // Local variable to store the RecordRTC instance

  if (typeof window.recordRTC !== 'undefined') {
    recordRTC = window.recordRTC;
    // Stop recording
    recordRTC.stopRecording(function() {
      // Create a Blob from the recorded data
      var blob = recordRTC.getBlob();

      // Create a download link for the Blob
      var url = URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.href = url; = "recorded_video.webm";

      // Trigger the click event on the download link;

      // Clean up

You’re asking a question that is really out of the realm of Twine and more about the RecordRTC library of tools.

RecordRTC - GitHub

RecordRTC - LiveDemo

If you can specify what the actual error you are getting is, then it’s possible to provide some guidance. Otherwise, it might be best to ask on Stack Exchange or GitHub and approach it by getting it to work as a plain HTML/JS page first… then just put it into your SugarCube story directly, without the need to control it through SugarCube. If that is an option, do that. Otherwise, it’ll require a very good working knowledge of JS/SugarCube/HTML/RecordRTC to solve.

Isn’t jQuery included in SugarCube? You wouldn’t have to use a CDN to get it if that was the case. Perhaps there is a conflict happening? I’m not versed in SugarCube, unfortunately.

I do wish you luck though!

It is.

1 Like

The current release of SugarCube includes jQuery v3.6.0, which you can check by executing the following in the web-browser’s Console while viewing a Story HTML file.


While there are times when parts of jQuery might need to be loaded, like if you need a later version or its UI functionality, this isn’t one of them.

There are a number of important details you left out of your question:

  1. What was the actual error you received?
  2. What brand of web-browser are you using to test?
  3. Were you running it in a Private Mode, like Chrome’s Incognito?
  4. What Operating System are you running the web-browser on?
  5. Does the Computer or Device you were testing on have a WebCam, and was it active?
  6. Are you able to create videos with that WebCam using other software than a web-browser?