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.
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.
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/
Related
I'm trying to stream a microphone/audio to multiple clients.
the broadcaster is a screenless raspberry, so I can't open a Webbrowser and click on "share mircophone"
The clients will be using their smartphone to listen.
the latency must be super low.
I did not find any WebRTC Demo that worked. All of them are either p2p or the scalable Broadcasting from muaz khan is only working for the initiator; not clients.
I came across Janus (which I didn't really understand what exactly this is doing) but I don't get how to install this and how to configure it.
Is there any way to easily share the microphone's output via WebRTC? Something like Apache hosting a simple website where the microphone audio is hosted on?
Thanks for all the ideas on how to solve it!
Is there any way to easily share the microphone's output via WebRTC?
No. There's nothing easy or simple about WebRTC.
the broadcaster is a screenless raspberry, so I can't open a Webbrowser and click on "share mircophone"
This is the simplest option... running a browser. Are you sure you need to actually allow it to access the audio device?
In the past, I've used a flag on Chromium to get around this problem. I don't remember exactly what that flag was, but looking at the list, it might have been...
--use-fake-ui-for-media-stream
You might also be able to use --enable-kiosk-mode.
At a minimum, if you were to open the browser interactively and enable access, that page would get automatic access in the future.
I did not find any WebRTC Demo that worked. All of them are either p2p
WebRTC is peer-to-peer, but remember that the "server" can be one of those "peers".
Finally, you can look into using GStreamer, but don't expect anything quick and easy. https://github.com/centricular/gstwebrtc-demos
I want to let WebRTC encoded and play h264(NAL) stream(local file).
In the WebRTC tutorial, getUserMedia is use for get local camera connecting to the system, I don`t know if the getUserMedia function support
capture the local stream file like h264 stream.
If it doesn't work that way, may be I should modify WebRTC source code(I'm studying it).
Here is the question, If i change WebRTC code, how can i integration the new code into browser? Made it a plugin?
Firefox supports an extension to the <video> element that you can use to do this.
First, set the source of a video element:
v1.src = "file:///...";
Then you can call the (currently prefixed) mozCaptureStream or mozCaptureStreamUntilEnded function to get a MediaStream.
stream = v1.mozCaptureStream();
The proposed specification.
Note however that you need to ensure that the file is same origin with respect to the page. The same origin rules for file:/// are probably going to cause issues. Otherwise your MediaStream isn't going to be accessible to you. One way to ensure that is not to set the location directly, but to load the file using an <input type="file"> element.
As noted in other answers, Firefox currently only supports the baseline profile of H.264.
First, you are right getusermedia will not work for you. However, there are a couple of options.
Hack a stream together using RTCDataChannel. Breaking up the media stream and delivering each packet and then handling it on the client side.
Take a look at this demo for precorded media streams. I do not believe that H264 is addressed but it could help you on your way(probably for Firefox only)
Use some sort of webrtc breaker/endpoint that is native to stream the file. I know specifically that others(including myself) have streamed H264 to Firefox through the Janus-Gateway
Couple of asides:
Firefox only supports Baseline profiles in streaming h264 for a webrtc peerconnection
Chrome does not support h264 for webrtc at all
Are you trying to have getUserMedia return a h.264 encoded stream?
In which case, today it will only be possible with Firefox today, under some specific environment (cisco 264 plugin installed) and only for the base profile.
Chrome promised in november to add this capacity, but there is no timeline that I know of Expect at least Q2 2015.
Using our (temasys) commercial plugin you will soon be able to do that in IE and Safari.
Those are the only options on client side I can think of. On server side you can use whatever you want to transcode, including janus, kurento, powermedia, licode/lynkia, ....
Note: using other means like Datachannel or WebSocket are ok to transfer files, but would greatly reduce the user experience as you would not have all the added recovery (and security) mechanisms included in SRTP, DTLS, and would also not have specific mistreated media enhancements that are in webRTC like jitter, buffers, netQ, ect ...
Is it possible to capture desktop screen sharing through webRTC.. As we know that it just captures the screen on the browser tab but is it possible to capture the whole desktop screen like navigating through files on computer or opening and viewing files like pdf etc..
Currently, only "stateless" screen capturing is available in RTCWeb implementations (both chrome & firefox). E.g.
Install chrome extension and then try this demo
Above demo will simply capture screen of "any" opened application's screen. Though, such screen capturing API fails to capture screens of full-screen game applications.
More information available here:
https://developer.chrome.com/extensions/desktopCapture (HTTPs+getUserMedia+postMessage)
Regarding remote desktop sharing from a web-browser, it has a pile
more security risks associated with it compared to screen sharing. The
UI/security aspects will be tough to deal with, and the feature will
be very susceptible to social engineering -- phone call: "this is
Google/Dell/Computer-Management; we've detected your machine has a
virus on it; could you browse to and we'll assist you in
removing it" -- etc. Ref
Yes, it's possible. At least using Chrome. There are several ways of doing it, but the simplest one is:
Add this constaint when you invoke getUserMedia:
constraints.video.mandatory.chromeMediaSource = 'screen'
When starting chrome, use this argument (chrome version > 35):
--enable-usermedia-screen-capturing
You can find an example of sharing screen and recording the shared screen at a remote server repository here:
https://github.com/Kurento/kurento-tutorial-js/blob/develop/kurento-recorder-screen/static/index.js
If you try to execute that example, play close attention to the security restrictions. All signalling needs to travel using TLS. Using raw HTTP will produce chrome to refuse sharing screen.
Yes it is. I recently worked on WebRTC and was able to stream desktop easily. Following links helped me implement my requirements :
Firefox Extension : http://mozilla.github.io/webrtc-landing/
Dont forget to add your *.github.io to about:config -> getUserMedia screensharing allowed domains
Google Chrome extension : https://developer.chrome.com/extensions/samples#search
Open this in Run : Chrome.exe --enable-usermedia-screen-capturing
Other Reference : https://github.com/muaz-khan/WebRTC-Experiment
I'm currently trying to set up a connection between my web client and my iOS app, but for some reason my iOS client only sees a black box when using Chrome (version 33). I can see the video just fine if I use Firefox (both in my app and when I put the browsers side-by-side, they can see each other).
This doesn't appear to be a documented known issue with the JavaScript SDK, and I can't see any recent discussion about this on the forums (last post was mine).
The iOS sample can be located here (samples/OpenTokHelloWorld) with the browser page in samples/OpenTokHelloWorld/browser_demo.html
I suggest cd'ing into samples/OpenTokHelloWorld and running python -m SimpleHTTPServer, as it can't be run from a file:/// path.
Here is what my iPad sees:
Chrome:
Firefox:
And Chrome/Firefox (respectively), both publishing video from the same camera
Edit: after testing on other machines, it may be something specific to my environment even though none of my extensions run in Incognito and I don't have any custom plugins installed.
It looks like the OpenTok mobile SDKs with the specific webcam I was using has issues. On Android the video stream will display for a brief moment then segfault, and on iOS there will be no video at all.
I have tested this many times and could not reproduce what you are seeing in your chrome.
Without seeing any console errors or iOS logs the best suggestion is to try clearing your cache, or maybe restarting your computer (longshot)
I'm a C programmer and a total newbie to Flash/video/web world. Don't know where/how to start, and so would greatly appreciate your initial help.
Question
If I need to host flash videos off of my website (instead of embedding YouTube links on my webpages),
AND
If I need to provide player API like YouTube's that can be used, say, for supporting chromeless player versions customizable via this custom API of mine...
THEN
What do I need to do essentially...?
Write a custom Flash video player?
If yes, how? I mean, using which Adobe products / tools / SDKs / language(s)?
Is there anything free/opensource available for doing this? Especially, for Linux platform?
Write a new browser (firefox) plugin for users visiting my site?
Not sure how my custom Flash video player will get to the user visiting my site for the first time?
Any books, resources that cover this problem well?
Does the Flash content need to hosted off of a Windows server only?
Currently lost. Thanks in advance,
/SD
Flash has video playback support built-in, so all you need to do is use the Flash authoring environment or Flex to compile a .SWF file that uses the video API, with some buttons to stop and start the stream, volume, seeking, anything else you want your player to do.
Many people have already done this for you, in a way you can easily use from simple HTML. See eg. OSFLV, Flowplayer, JW...
Write a new browser (firefox) plugin for users visiting my site? Does the Flash content need to hosted off of a Windows server only?
Lord no! Flash video would never have taken off if it was just another custom-server+custom-plugin piece of unpleasantness. Though special streaming servers are possible, for the most part it's just an FLV file sitting on a web server.
(FLV is the video format supported by the Flash video playing functions. There are many, many tools you can use to convert other formats to it; I use Avidemux.)
If you are planning to use a "Progressive Download" approach, then your FLV files can be hosted on a Windows or a Linux box. Be aware that:
it is no as efficient as true
streaming.
you may not use it for live events
nor only for stored video files.
it cannot automatically detect the
end user's connection speed.
it is not possible to jump ahead to
another part while it's downloaded.
the video file will be saved on the
end user's computer.
If you are planning to use a "Streaming" approach then you can either buy and use Adobe's solution (Flash Media Server, available on both Windows and Linux box) or sign up for a hosted solution. On this page you will find recommended providers by Adobe. I personally have been using Influxis's hosting with success for a couple of years already.
You can also write your own streaming server but that would be a lot of hard work. If you are interested in that, I would recommend you have a look a Red5 which is an open source Flash Server written in Java.