Results 1 to 3 of 3

Thread: Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS

  1. #1

    Thread Starter
    Fanatic Member vuyiswamb's Avatar
    Join Date
    Jan 2007
    Location
    South Africa
    Posts
    829

    Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS

    Good Day All

    i have a Live Stream application and i want to implement the emoji animations that are all over the screen as its done in the video below . can someone direct me to an example that does this.

    Name:  livey.png
Views: 378
Size:  36.7 KB


    Thanks

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS

    The basic idea is that you will need to do the following:
    1. Create a new <img /> element and setup a timer (e.g. setTimeout)
    2. Set the element's position to absolute
    3. In the timer, change the element's top/left
      1. The horizontal movement can be fixed, e.g. move to the left 1px every tick
      2. The vertical movement can be "random", e.g. if the top/bottom isn't at the top or bottom of your view area then randomly move it to the top or bottom


    I would suggest that you start the process of writing that out and if you run into any specific issues then follow up here asking how to resolve it.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS

    Emojis are just single characters, and the canvas-method fillText can render text at any x/y-pos...

    So, what you need (in a "basic setup") - is actually quite simple:

    html:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="c1" width="320" height="240" style="background:black" />
    </body>
    </html>
    js-code:
    Code:
    function rr(min, max){
        return Math.floor(Math.random()*(max-min) + min)
    }
     
    var arr = "😃,🤢,🥶,💔".split(",");
    var ctx = document.getElementById("c1").getContext("2d")
    
    setInterval(()=>{ 
      ctx.font = rr(15,30).toString() + "px Arial"
      ctx.clearRect(0, 0, 320, 240)
    
      arr.forEach((e_char)=>{
        var x = rr(0, 320), y = rr(0, 240)
        ctx.fillText(e_char, x, y)
      })    
    }, 100)
    Ah.. well - have made a fiddle here: https://jsfiddle.net/t8k2bnea/1/

    HTH

    Olaf

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width