How to Capture Live Stream from camera and watch live or save for later viewing?

Question

I am trying to make an online examination portal. When students start the exam, their webcam will start automatically and record the stream live and store in the server. Invigilators will either watch the students live or they can watch the saved live streams later.

I researched about this and found WebRTC as a possible solution along with a gateway server like Kurento. But later found out that WebRTC is not supported in Safari, which is a setback! My application should run successfully in web portal in any modern browsers which includes safari and also in android or iphone.

So can anyone suggest a possible solution to my problem? Which technology should I use that can support all browsers and OS?

Also, it would be helpful if you can provide links to good documentation or tutorials.

Answer 1

Note from the future (2020): This answer really isn't accurate anymore.

---

WebRTC is one problem... capture from the camera with getUserMedia is another. Safari doesn't support either.

There is no video capture API in Safari currently. The only thing you can do is make a native app for iOS.

Worse yet, because of Apple's restrictive policies, alternative browsers, such as Chrome, are crippled on iOS as they aren't allowed to use their own browser engines.

Use standards based technologies like getUserMedia and WebRTC for your primary web-based application. If you decide that the economics of your situation enable it, you can make an iOS app to work alongside until Apple decides to participate in modern browser standards like everyone else.

Answer 2

You can use Mediadevices.getUserMedia (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to capture webcam stream on browser (chrome and firefox).
To play with webcam stream on safari, you would have to use a pollyfill - https://github.com/Temasys/AdapterJS

To record the video/audio stream, you can make use of Media recorder api https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
(Note : recording stream is still a challenge in Safari as there is no support/pollyfill. However, it works perfectly on Chrome and Firefox latest versions).

Helpful demonstrations :

• https://webrtc.github.io/samples/
• https://mozdevs.github.io/MediaRecorder-examples/index.html
• https://codepen.io/collection/XjkNbN/
• https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/