I tried out using HTML5 video and WebRTC. I’ve also got HTTPS running on my site now too! I made a chat where you can send images from your webcam. It works with multiple people, but it’s only me and my friend Jeff in this gif.
This reference on the MDN site was a good resource and I figured out how to fix the weird resolution issue getting the video images to the canvas.
In the server file, I added the certificates and changed it to require https. And that’s basically it.
So the main thing was getting the video to be the right resolution. I figured out that you need to set the height and width of the canvas after the video is able to play. I figured it out by reading about it here.
Then getting the video is pretty much the same code as what we did in class.
In my css, I hid the canvas and only showed the video, which is on the right side.
There is more code on the server to receive and emit the data, but these are the important parts on the client side. To send the images, I have an event listener on the “send” button. I draw the image to the canvas and then I convert the canvas image to a data URL that I send to all the clients.
When I receive the images, I create a new image element and then use “insertBefore” to add the images to the top of the chat body, which is the yellow box on my site.
All of the Code
Thanks for reading! All the code is available here.
This doesn’t work on Safari on my iPhone. I think this is the issue. Essentially, “onloadedmetadata” won’t fire because mobile Safari won’t load any part of a video without an interaction from the user.