Rudresh Ajgaonkar Rudresh Ajgaonkar - 4 months ago 43
Javascript Question

RecordRTC.js:37 Uncaught MediaStream is mandatory

Problem : Problem is that i am getting error as Stated in the title.

Code :

<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>
</head>
<body>
<div class="elementToShare">
<div class="recording-controls"> <button type="button" id="startRecording" name="button">Start Recording</button>
<button type="button" id="stopRecording" name="button">Stop Recording</button></div>
<div id="myDiv" style="width:100%;height:100%"></div>
</div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var trace1 = {
z : [
[2, 2, 0, 0, 5, 5, 6, 6, 6, 6],
[1, 1, 0, 0, 0, 5, 1, 0, 0, 0],
[1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
[1, 2, 0, 0, 0, 3, 3, 5, 5, 5],
[5, 2, 2, 3, 1, 1, 3, 5, 5, 6],
[5, 2, 2, 3, 1, 1, 6, 5, 6, 6],
[3, 6, 6, 6, 6, 6, 6, 5, 5, 5],
[0, 6, 6, 6, 1, 1, 6, 2, 2, 5],
[0, 0, 2, 1, 1, 1, 2, 2, 2, 5],
[0, 2, 2, 1, 1, 2, 2, 2, 4, 4],
],
cmax : 5,
cmin : 2,
colorscale: [["0", "#FF0000"], ["0.25", "#FFFFFF"], ["0.555555555556", "#0000ff"], ["0.777777777778", "#6CCE59"], ["1", "#FDE725"]],
// surfacecolor: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0)"],[1,"rgb(255,255,255)"]],
type : 'surface',
opacity : 1,
// autocolorscale : false,
name : "trace_name",
contours : {
y : {
show : true,
}
},
};

var data = [trace1];
var layout = {
margin : {
l: 10,
r: 10,
b: 20,
t: 20
}
};

Plotly.newPlot('myDiv', data);

</script>

<script type="text/javascript">
/* JAVASCRIPT CODE GOES HERE */
var elementToShare = document.getElementById('elementToShare');
var recorder = RecordRTC(elementToShare, {
type: 'canvas',
showMousePointer: true
});

document.getElementById('startRecording').onclick = function() {
recorder.startRecording();
};

document.getElementById('stopRecording').onclick = function() {
recorder.stopRecording(function(url) {
window.open(url);
});
};

</script>
<!-- <script type="text/javascript" src="script.js"></script> -->
</body>
</html>


I am trying to record a video using RecordRTC.

Stack over flow didnt allow me to post so i added this text
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Answer

You are using this:

<div class="elementToShare">

Please use this instead:

<div id="elementToShare" class="elementToShare">

Because your javascript was reading id not class:

var elementToShare = document.getElementById('elementToShare');

PS. You can NOT pass NULL over RecordRTC constructor.


Updated:

RecordRTC assumes that you are passing either HTMLCanvasElement or CanvasRenderingContext2D.

See how to read your DIV and get Canvas2D object: