Hi everyone.
i'm working on an App as remote controller for a BrightSign Player
I'm writing here this post because BrightScript language is used in both devices: roku and brightsign, hoping some ideas or solution.
in my BrightSign Player i have a directory CONTENT with some videos in it
I also have a directory THUMBNAIL with the preview of these videos
i'd like to do it in an html page index.html loaded on localServer on port 3000
AUTORUN.BRS
r = CreateObject("roRectangle", 0, 0, 1920, 1080)
is = {
port: 3001
}
config = {
nodejs_enabled: true
javascript_enabled: true
inspector_server: is
brightsign_js_objects_enabled: true
url: "file:///sd:/index.html"
security_params: { websecurity: false }
}
h = CreateObject("roHtmlWidget", r, config)
this is the code
INDEX.HTML
<div id="videoDiv" class="row">
<div class="col-md-6">
<div class="form-group">
<video width="640" height="360" muted controls id="videoPlayer" hwz="on">
<source id='currentVID' type="video/mp4">
</video>
</div>
</div>
</div>
<canvas width="640" height="360" id="canvas" style="overflow:auto"></canvas>
<script>
function check() {
noThumb = content.filter(function (el) {
return thumbnail.indexOf(el + '.png') == -1
});
//take files that haven't a thumbnail
var player = _("videoPlayer")
noThumb.foreach(vid=>{
player.src = 'CONTENT/' + vid
// currentVID.setAttribute('src', 'CONTENT/' + vid);
player.load();
player.onloadedmetadata = function () {
player.currentTime = player.duration / 2;
};
player.onseeked = function () {
var canvas = _('canvas');
var video = _('videoPlayer');
canvas.style.backgroundColor = '00f';
canvas.width = 640;
canvas.height = 360;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 640, 360);
let img =canvas.toDataURL();
...
HERE I SAVE THE THUMBNAIL ON SD/thumbnail
...
</script>
}
my problem is that Canvas doesn't generate any image, or better, it generate a blank image with no informations
i tried this code in localhost on pc and it works.
can't figure out what and where the issue is
maybe html version? i noticed that the <video> tag looks different on browser and on brightsign
thanks for your help (hope soon)