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.

回答1:

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:

https://github.com/muaz-khan/RecordRTC/blob/master/Canvas-Recording/webpage-recording.html#L138-L171

来源：https://stackoverflow.com/questions/38663627/recordrtc-js37-uncaught-mediastream-is-mandatory

标签

javascript

recordrtc