hack33r.com

Simple News Section for Chat Site

Nov
16

I have added a simple news section the my random chat project which can be found here. It was a tough decision weather or not to go with something like WordPress for the CRM style section of the site. In the end I’ve started rolling my own simple WordPress clone (if you can even call it that). The plan is to add more features like commenting soon. Maybe eventual open source that part of the project but not sure just yet. It is going to be a while before the ui and code will be mature enough to edit as nice as you can with WordPress or other popular online tools. For now, it’s nice to have a separation between the technical side of the project and marketing stuff needed to keep users happy. Something I talked about in my last post. Besides, the project is about building great random stranger chat, not building CRMs. 🙂

On a side note, using what little graphics design knowledge I have to make some marketing materials.

Image from Pokiecam news anouncement

Pokiecam Random Chat Facebook Promo

User Feedback Form Factor!

Nov
13

If a web site has users it is very likely the operators of the website would like to know when a user experiences a problem. Equally as likely if a user has a complaint or notices an error on the website the webmaster wants to know. It is totally amazing how many new web sites I have been to which don’t have a way for me to report some issue I’ve noticed. A couple weeks ago I added a report problem page to my random chat website. The link for that page can be seen right below the chat app. Not a single user has filed out the form, and I am guessing that is not because everything is perfect. I’ll be thinking of ways to try in crease the likely hood someone will report a problem.

Just today I added another way to get user feedback via a contact page. Links to this page replace some dead email and phone links on other places on the site. This should put stranger chat users at ease if they are wondering about the credibility of the site (those broken links were a bit sketch). All in all, these are just a couple minor improvements but I’m hoping that they are improvements that users will notice.

Since this is really meant to be a place for me to talk about the more technical side of the project. Before I do however, that was a nice segue to say that I’ll be adding a news section the the chat site soon. It will be a place to announce features and what not so I can keep this blog technical in nature. The news site will also be another great way for me to stay in contact with users about what’s going on.

Back to the task at hand. Here are some simple tech notes as there is not much exciting happening on these pages; For starts, these are super simple pages.. The forms are just boostrap 4 with a bit of jquey to submit. On the server, I’m sanitizing the form inputs, creating the email with pure python and sending an email to an email account. That’s all mate.

Days Of Internet Directories Gone

Nov
10

Seems the days of internet directories like the yahoo directory and dmoz are coming to an end. While dmoz went offline earlier this year it promises to have a replacement at some point. I’m not holding my breath for that one but I did find a couple good directories still exist. I went a head and submitted Pokiecam to one of them. Hopefully it gets put in the right spot for people looking to random chat.

One thing is for sure, the internet landscape is changing. The days of the social media rise seems to be slowing down. Older internet mainstays like directories are coming an end. I personally wonder what will be next. If I have to make a prediction it’ll be that blogging sticks around and chat sites become the future.

Getting Started with WebRTC

Oct
31

WebRTC if a fantastic new technology hitting main stream devices these days. There is a lot of buzz on the subject. The main reason is that it makes thing possible on webpages that were not really possible before (at least not by default).

What is WebRTC? It is an implementation (multiple frameworks exist) of multiple protocols. When implemented WebRTC enables devices peer to peer device communication. What that means is it enables a webpage opened in Firefox web browser on your desktop to communicate directly with the Facebook app on your phone (assuming both sides grant permission). The communications channel is encrypted by default. This means engineers will be able to create brand new technologies in the up coming years.  As one of those engineers I can say, this is exciting! Personally I am looking forward to making the chat experience on the talk to strangers website Pokiecam even better.

The nuts and bolts of WebRTC

When getting started with WebRTC you might find yourself overwhelmed if you are not already familiar with the protocols. A few of them are ICE, TURN, STUN, SDPs, Signaling servers.. That’s a lot of moving parts. The main thing to concern yourself with is being able to pass messages between peers. There are lots of examples of this online, just be sure all the messages get delivered and in order.

Which of the protocols should you concern yourself with? Really, from a user of the APIs not none of them. What WebRTC is doing is using the ICE protocol which in-turn uses STUN and TURN if needed. The implementations handle all of this though. The main thing users of the APIs need to worry about is the signaling portion. Signaling again, is just passing messages for offers and candidates between peers.

Chat Bots Galor

Oct
20

I’ve been playing with some fun new toys and decided to build a little website. The purpose is to allow people to interact with the chat bots being developed. Behind the scenes I am using python3, aiohttp, chatterbot, and ParlAI. It’s a fun little project and I hope people check it out:

Random Chat Bot

You can choose any subject to chat with the bot about and even give the but a custom name (if that sort of thing makes your feel better). The logs of the chats are saved and posted for review. This first edition is still a bit rough but the chat bot project will server as a nice time filler when needing a break from other things.

 

Getting Started With NGINX, RTMP, and HLS Streams

Oct
11

In this article I will provide an overview of getting started with the nginx-rtmp-module and populating HTTP Live Streaming (HLS) streams using FFMPEG. Using HLS over RTMP should allow you to scale things out when needed using more traditional web technologies rather than dedicated media servers.  I won’t go into great deal on setup here, to follow along you should be familiar with nginx, the nginx-rtmp-module and the ffmpeg command line tool. I may write a more in depth post about setting every thing up at some point in the future. If you find this information useful and would like to know more, comments are welcome. 🙂

Assuming you have nginx and the nginx-rtmp-module setup correctly. You may want to setup HLS for live streaming. There is not a lot of information about this so I’m just covering a few things I found. The following snippet sets up 3 HLS stream variants for different bandwidth scenarios:


application video {

  # Configure live streaming, both publish and subscribe are wide open.
  live on;
  allow publish all;
  allow play all;

  # Execute a command to populate the hls streams. 
  # FFMPEG pushes three streams back to nginx-rtmp-module at /hls.
  # NOTE: The exec command requires and ending ';'
  exec ffmpeg -i rtmp://localhost/video/$name
    -c:a libfdk_aac -b:a 32k  -c:v libx264 -b:v 128K -f flv rtmp://localhost/hls/$name_low
    -c:a libfdk_aac -b:a 64k  -c:v libx264 -b:v 256k -f flv rtmp://localhost/hls/$name_mid
    -c:a libfdk_aac -b:a 128k -c:v libx264 -b:v 512K -f flv rtmp://localhost/hls/$name_hi;

}

application hls {
  # Configure live streaming and HLS, only allow publish from localhost.
  live on;
  hls on;
  allow publish 127.0.0.1;
  allow play all;
  hls_path /tmp/hls;
  hls_nested on;
  hls_variant _low BANDWIDTH=160000;
  hls_variant _mid BANDWIDTH=320000;            
  hls_variant _hi  BANDWIDTH=640000;
  hls_base_url https://hack33r.com/hls/;
}
http {
  server {
    listen 127.0.0.1:80;
    server_name hack33r.com;
    location /hls {
      if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

	add_header 'Access-Control-Max-Age' 1728000;
	add_header 'Content-Type' 'text/plain charset=UTF-8';
	add_header 'Content-Length' 0;

	return 204;
      }
      if ($request_method = 'POST') {
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

      }
      if ($request_method = 'GET') {

	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

      }
      # Serve HLS fragments
      types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
      }
      root /tmp;
      add_header Cache-Control no-cache;
    }
  }
}

In the above configuration we are allowing anyone to publish and rtmp stream to the ‘/live’ path on the web server. If a stream is published to ‘/live/foo’ the nginx-rtmp-module will execute an ffmpeg command that subscribes to the stream being published and pushes 3 different rtmp streams to the ‘/hls’ location. With this config, the stream could be subscribed too 4 different ways. Through one of the three HLS variants at ‘/hls/foo*’ in addition to the one at ‘/video/foo’. The server block configures nginx to server up the hls segments and adds some CORS headers which allow clients to connect from any domain.

That is all I have for this post as time is short today, In my next post I will give an example of using hls.js to play one of the HLS streams. Until then, happy streaming.

Using youtube-dl and ffmpeg to forward streams

Sep
16

youtube-dl is a handy tool for anyone wanting to download or stream videos from youtube and many other sites on the internet. They have pretty decent documentation on how to download videos. You can also use youtube-dl and ffmpeg together to forward video streams and transcode them on the fly. Here is an example of using youtube-dl’s `–exec` option and ffmpeg to stream a video from youtube and forward it to some rtmp location.

youtube-dl -f best \
  https://www.youtube.com/watch?v=gHG9FRSlPxw \
  --exec "ffmpeg -re -i {} -f flv rtmp://localhost:81/test/test";

The previous example works great with youtube but I found issues trying to use youtube-dl’s `–exec` option. Another way of streaming video and audio from youtube-dl to ffmpeg is using a pipe. You can send the contents from youtube-dl to stdout and pipe that to ffmpeg. The following is an example of streaming an mp4 using a pipe.

youtube-dl -f best \
  https://mp4sonly.org/video/foovid.mp4 \
  -o - | ffmpeg -re -f mp4 -i pipe:0 -ar 44100 -f flv rtmp://localhost:1935/test/test'

Compiling Actionscript 3.0 on Debian Linux

Aug
15

I have written before bout Using Apache Flex SDK without Flash Builder.  In this post I will cover how to install Java and the Flex SDK on Debian Linux so you can build your Actionscript 3.0 applications.

Compiling Adobe Actionscript requires Oracle’s Java but Debian 9 ships with OpenJDK by default. In my experience Flex and Actionscript applications require Oracle’s JDK to build. You can install Oracle’s Java 8 JDK and compile your Actionscript projects on Debian stretch. To install Oracle’s java on Debian, download the JDK and accept Oracle’s license agreement. You can download java from Oracle with curl by setting the accept license header. The following bash snippet shows how to instal Java 8 and the Flex SDK on Debian Linux.

$ JDK_URL="http://download.oracle.com/otn-pub/java/jdk/8u144-b01/090f390dda5b47b9b721c7dfaa008135/jdk-8u144-linux-x64.tar.gz"
$ FLEX_SDK_URL="http://download.macromedia.com/pub/flex/sdk/flex_sdk_4.6.zip"
$ apt-get install java-package
$ curl -H "Cookie: oraclelicense=accept-securebackup-cookie" \
  "${JDK_URL}" \
  -o jdk-8u144-linux-x64.tar.gz;
$ make-jpkg jdk-8u144-linux-x64.tar.gz
$ sudo dpkg -i oracle-java8-jdk_8u144_amd64.deb
$ curl "${FLEX_SDK_URL}" -o flex_sdk_4.6.zip
$ mkdir -p ~/.local/lib
$ unzip flex_sdk_4.6.zip
$ mv flex_sdk_4.6 ~/.local/lib/

You should now have the Java JDK and the Flex SDK installed and be able to compile your Actionscript 3.0 applications on Debian Linux.

Flash Replaced by HTML5 Technologies

Aug
05

Adobe announced they are deprecating Flash. This announcement has been a long time in the making. Many people have worked hard to develop standard technologies which are now promising enough that Adobe no longer sees a future in their media platform.

HTML5 Standards such as WebRTC, WebASM and WebGL are all making it possible to develop rich applications on the web without the need for Adobe Flash. These days it seems the adoption rate of new browsers is even picking up as normal users are becoming more conscious of the need to update their software regularly. Some are saying 66% of websites support HTML5 already. Even older browsers can support the new HTML5 elements and most support many of the new features.

Read Adobe’s Blog Post About Deprecating Flash:

Flash & The Future of Interactive Content

 

Adobe Media Server Alternatives

Aug
05

Adobe Media Server is a fine piece of software. It runs cross platform and has a very rich set of features. From what I’ve found there are not many players competing with Media Server on the proprietary front. There is basically one other 500 pound gorilla, Wowza.  It’ll be hard to beat either of this for rapid development, solid stability, and professional support.

If anyone has read this blog before they may find the author has a propensity to avoid proprietary solutions. Media servers will be no different. At the time of this writing in 2017 there are some decent open source media server alternatives. Most open source media server solutions will be offer less features than their closed source competitors but depending on the application this might not be a deal breaker and when it comes to simple video and audio it shouldn’t be.

One of the more older and more mature open source media servers is Red5. Red5 does actually offer a pretty full feature set. Over the years it’s been battle tested. The reputation of Red5 seems to vary depending on the group of people talking about it.

MonaServer is an open source media server written in C++. It has lots of features and is under active development.

Janus Gatway is primarily written in c. Janus has a lot of features and can be extended with plugins. Janus is focused around newer HTML5 technologies like WebRTC. The one drawback I found was the lack of RTMP support. This is not super important theses days but for people wanting to support really old browsers RTMP could be a must have.

nginx-rtmp-module can potentially fill the void that Janus Gateway leaves. It an also be run stand alone to make applications that support RTMP.