Capturing video from webcam

[nejra]

Hi, as I understood, we should be able to capture video using this component, but I'm not seeing any support for it. Can you please explain?

[BryanCrotaz]

It works with any webcam. We're using it with Epiphan capture devices from SDI and from HDMI.

[nejra]

I embedded it like this: {{user-media-src mediaConstraints=myConstraints}}, where myConstraints is a map defined in a component and set in init method:

this.get('myConstraints').set('audio', true);
this.get('myConstraints').set('video', true);

What am I doing wrong ? Is there any demo I can look into.

[BryanCrotaz]

that should be fine. The constraints do need to be set before you create the user-media-src, so doing it in init should be ok.

Check that your webcam is working with https://alexandre.alapetite.fr/doc-alex/html5-webcam/index.en.html

Check that you have all the security rights - we found we had to serve the page with SSL before Chrome would allow webcam to be accessed. I think there are flags you can give to chrome on the command line which force allowing webcam from localhost. You can also start chrome in kiosk mode which allows webcam.

[nejra]

I'm testing this on Mac and my camera works (I tried link you suggested, thanks). Also, kiosk mode on Chrome didn't seem to do it (I used command /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --kiosk --app=http://localhost:4200 to enter kiosk mode). Camera permission is not asked. I tried with ngrok tunneling using HTTPS, but no luck.

[BryanCrotaz]

the link I provided (that worked for you) uses the same source code as in this component, so it's got to be a security setting. Try hosting your prototype on an SSL enabled server and it might start working. We had terrible trouble getting get-user-media to work on localhost and from memory I don't think we made it work. At our client we've set up an on site Apache server with a self signed cert and an internal domain.

[BryanCrotaz]

There are some ideas here
http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https

[nejra]

Thanks... I don't see on that example that I will be able to capture video (just photo)... Is this true?

[BryanCrotaz]

yes you can capture the full quality video. We use it to capture HD video using an SDI camera and https://www.epiphan.com/video-grabber/

[nejra]

oh, great... is there an example for that? I will somehow manage to get SSL

[BryanCrotaz]

https://www.youtube.com/watch?v=fxug07OZLWk
skip to 1 hour in to see a game with live score overlay in HTML

[BryanCrotaz]

you're using it correctly, you're just having sandbox problems

[nejra]

Ok, so since I figured out that the problem was with mediaConstraint that I'm providing as a map mentioned above, it worked after adding navigator.mediaDevices.getUserMedia({video: true, audio: false}) in usr-media-src.js.

Not sure how to implement recording feature, any help would be appreciated (I guess using webRTC helper methods)! Thanks for your replies!

[BryanCrotaz]

https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API might be a good start - I'd be very happy to accept a PR with recording facilities :)

[BryanCrotaz]

I've dug out our application code as an example - this is from the Youtube link I posted:

// component template hbs

{{#user-media-src as |videoUrl| }}
	<div class="video-wrap">
		<video class="background" autoplay=true src={{videoUrl}} />
	</div>
{{/user-media-src}}

[nejra]

Thanks very much, I'll let you know if I manage to add recording feature :)