Javascript Canvas пустой Tizen webapp

ProgramBox

Javascript Canvas пустой Tizen webapp

Post author:admin
Запись опубликована:2 марта, 2023
Post category:Вопросы по программированию

#javascript #html #tizen #tizen-web-app #tizen-emulator

#javascript #HTML #tizen #tizen-веб-приложение #tizen-эмулятор

Вопрос:

Я пытаюсь отобразить видео на холсте в Samsung SmartTV (2017) с (расширением TV 3.0) с помощью Html5 и Javascript.

Вот мой пример кода:

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
    body {
        font: white
    }
</style>

<body>

    <!-- <video width="820" height="240" controls>
          <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv">
          
        </video> -->
    <video id="source" src="https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4" autoplay muted
        controls></video>
    <hr>
    <canvas id="c1"></canvas>
    <canvas id="c2"></canvas>
    <canvas id="c3"></canvas>
    <canvas id="c4"></canvas>
    

</body>
<script>
    var video = $('#source')[0]; //variable to tie to our source

    //create an array to store our canvases
    // var splitCanvas = [$('#c1')[0], $('#c2')[0], $('#c3')[0], $('#c4')[0]];
    var splitCanvas = [$('#c1')[0], $('#c2')[0]];


    //start the function once the video starts playing
    video.addEventListener('playing', function () {

        //create some variables for readability
        //halving the width and height results in 4 quadrants
        var w = video.videoWidth / 2;
        var h = video.videoHeight;

        //create a canvas context so we can manipulate the images
        var context = [];
        for (var x = 0; x < splitCanvas
            .length; x  ) { //set the canvas dimensions to the native size of the video
            splitCanvas[x].width = w;
            splitCanvas[x].height = h;
            context.push(splitCanvas[x].getContext('2d')); //create the context

        };
        console.log('drawing'); //Draw the 4 quadrants from the source video every 33 ms (approx 30 FPS)
        setInterval(function () { //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //Upper left
            context[0].drawImage(video, 0, 0, w, h, 0, 0, w,
                h
            );
            context[1].drawImage(video,
                w, 0, //x, y start clipping
                w, h, //x, y clipping width
                0, 0, //x, y placement
                w, h); //width, height of placement
        }, 33);
    });
</script>

</html>

В эмуляторе и Chrome он работает без ошибок в chrome devtool:

На моем телевизоре воспроизводится видео, но холст пуст без ошибок в Chrome Devtool:

Для меня это странно, потому что все тесты одинаковы, показывается видео, но холст каждый раз был пуст.

Я подозреваю, что drawImage, как я могу узнать, откуда возникает проблема, если у меня нет никаких ошибок в консоли, и когда я добавляю точку останова в drawImage, она продолжается нормально.

есть идея или эквивалент для отображения видео на холсте?

1. Попробуйте различные видеоформаты кодеки. Раньше в Android была такая ошибка в те дни, когда был mp4, это может быть такая же проблема.

2. Попробуйте загрузить ресурс и поместить его в папку приложения. Могут быть проблемы с перекрестным происхождением, вызванные file:// protocol.

3. @Kaiido, протестировано несколько форматов кодеков, и результат одинаков для всех. я попробую использовать локальное видео, чтобы проверить, работает оно или нет, спасибо

Ответ №1:

К сожалению, эта функция не поддерживается на телевизионных устройствах, включая новые телевизионные устройства.

Это ограничение связано с методом VIDEO_HOLE, который пробивает отверстие прозрачности в области видео, и видео воспроизводится на плоскости наложения (подложки)

1. Спасибо за ваш комментарий, действительно, это плохая новость для меня. Я запрещаю Tizen из своей жизни, потому что это пустая трата времени для разработчиков, если я не могу управлять изображением или видео на телевизоре, какова цель?

Ответ №2:

У меня нет ответа на вопрос, почему он не работает, но я могу добавить несколько советов по устранению неполадок (я не смог поместить их в качестве комментария)

Попробуйте проверить поддержку canvas (я уверен, что она поддерживается, но проверить это не повредит!)

 <canvas width="200" height="200" fill="red">
  Canvas is not supported.
</canvas>

Начните с рисования простого изображения, чтобы проверить drawImage , работает ли оно так, как ожидалось!

 const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

image.addEventListener('load', e => {
  ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});

 <canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
</div>

Если drawImage работает, наиболее вероятной причиной проблемы будет video is not supported в качестве допустимого аргумента для drawImage .

Проверьте версию Tizen на своем телевизоре, возможно, пришло время обновить прошивку! В документах упоминается, что требуется Tizen 3.0 или выше. Простой способ — проверить пользовательский агент в вашем браузере:

 document.write(navigator.userAgent);

Надеюсь, одно из предложений поможет вам сузить проблему.

1. спасибо за ваш комментарий, я попробовал, и вот результат: 1) текст не отображается, поэтому он поддерживается. 2) Изображение отображается правильно, но не на холсте. 3) результат: Mozilla / 5.0 (SMART-TV; LINUX; Tizen 3.0) AppleWebKit / 538,1 (KHTML, как Gecko) Версия / 3.0 TV Safari / 538,1

2. 2) Image is showing correctly but not in canvas что ты подразумеваешь под этим @Kate?

3. изображение отображается в теге img, если я изменяю display none на display block, а холст остается пустым без ошибок. я попробовал пример в Mozilla для отображения изображения на холсте, и он работает хорошо! ссылка , но я не понимаю, почему этот пример работает, а мой код нет?

4. @Kate Мне жаль, что я тебя не понял. Пример по ссылке работает, пример кода, которым я поделился, работает с dsiplay none ? Основная цель display: none — скрыть изображение из img тега, но отобразить его canvas .

5. Также попробуйте свой код с setInterval установленным значением 1000, возможно, проблема с обновлением.