{"id":45286,"date":"2019-06-16T03:01:10","date_gmt":"2019-06-15T17:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45286"},"modified":"2019-06-15T18:36:23","modified_gmt":"2019-06-15T08:36:23","slug":"webcam-mobile-deprecation-revisit-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/webcam-mobile-deprecation-revisit-tutorial\/","title":{"rendered":"Webcam Mobile Deprecation Revisit Tutorial"},"content":{"rendered":"
\"Webcam<\/a>

Webcam Mobile Deprecation Revisit Tutorial<\/p><\/div>\n

When it comes to topics like media, and worldwide decisions regarding online standards and practices, it stands to reason that “things might change” regarding code you write for web applications, trying to work over a variety of web browsers and platforms. In this regard, an oft times forlorn word for programmers is (software) “deprecation”<\/a> …<\/p>\n

\nWhile a deprecated software feature remains in the software, its use may raise warning messages recommending alternative practices; deprecated status may also indicate the feature will be removed in the future. Features are deprecated rather than immediately removed, to provide backward compatibility, and to give programmers time to bring affected code into compliance with the new standard.\n<\/p><\/blockquote>\n

… in the sense that you write something that satisfies, working at the time, but that false sense of “deprecation smugness” may come back to bite months or years later. Today, it was our turn to “revisit webcams” from the days of Webcam Mobile Tutorial<\/a> with this changed<\/a> webcamtest.htm<\/a> live run<\/a> link.<\/p>\n

In a lot of platforms window.URL.createObjectURL(stream) is now deprecated (fully … ie. is no more<\/a>) … and so<\/b> (following the lead of the great webpage<\/a>, thanks) …<\/p>\n


\nfunction handleVideo(stream) {
\n try {
\n video.srcObject<\/a> = stream;
\n video.play();<\/font> \/\/ new today
\n } catch (error) {
\n video.src = window.URL.createObjectURL(stream);
\n video.play();<\/font> \/\/ new today
\n }
\n}
\n<\/code><\/p>\n

… start thinking “HTMLMediaElement.srcObject” from here on.<\/p>\n

The video initial setting of autoplay (in the HTML design) is not as good as to follow the lead of this excellent link<\/a>, thanks, and so<\/b> …<\/p>\n


\n video.setAttribute('autoplay', ''); \/\/ new today soon after onload
\n video.setAttribute('muted', ''); \/\/ new today soon after onload
\n video.setAttribute('playsinline', ''); \/\/ new today soon after onload
\n \/\/ ... then ... later ... as above<\/font> ...
\n video.play();<\/font> \/\/ new today
\n<\/code><\/p>\n

We also found HTML5Rocks<\/a> really helpful, as usual, thanks again.<\/p>\n

\n

Previous relevant Webcam Mobile Tutorial<\/a> is shown below.<\/p>\n

\"Webcam<\/a>

Webcam Mobile Tutorial<\/p><\/div>\n

Am hoping most of you laptop and desktop computer users were able to see a webcam<\/a> working with our web application we left off last with Webcam Photobooth Tutorial<\/a> as shown below, and that’s great if that is the case, but the fact is that lots of platforms, predominantly mobile ones, it would appear do not support a Javascript call like …<\/p>\n


\nnavigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
\n<\/code><\/p>\n

… alas and alack! However, for all you long suffering (mainly mobile device) blog readers … thanks for reading … for what we taketh away, let us now putteth innereth a bitteth today. The webcam is a “streaming” video, but the next best thing we can do short of “streaming” is to loop an existing video, wouldn’t you say? Even there, though, platforms like Safari on iOS (ie. on an iPad or iPhone) still want that user clicking intervention to start any video … remember our last discussion regarding this Apple bandwidth concern when we presented Piano Playing Web Application Mobile Tutorial<\/a> … and we cater for that with a four second chance for these Safari iOS users to “click away”.<\/p>\n

On a mobile platform what form could the “webcam” (as a camera device) take? We think it can be worked, like with mobile iOS apps like Photobooth, the “webcam” can take the form of the mobile device camera, and we touched on that when we used the HTML(5) input capture<\/i> syntax when we presented Audio\/Video HTML5 Form Input Capture via PHP Download Tutorial<\/a>, as food for thought in this area, should you be curious?!<\/p>\n

By the way, before we forget, today’s thanks go to a regular here at this blog, the incredible html5rocks.com<\/a> website, a great HTML5 and more other web ideas resource … so … thanks.<\/p>\n

We “loop” the (webcam) video via Javascript DOM<\/b> code like …<\/p>\n


\nif (navigator.getUserMedia) {
\n navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
\n} else {
\n
\n video.type = \"video\/mp4\";
\n video.loop = true;
\n video.autoplay = true;
\n video.controls = true;
\n video.src = 'webcamtest.m4v';
\n video.style.visibility = 'visible';
\n document.getElementById('errmsg').innerHTML = \"So sad, cannot work the 'navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError)' Javascript call we require. But you can see the blog posting's video on a loop (well, it worked in <a onclick=putOnSpeed(); style=text-decoration:underline;cursor:pointer;>Speed<\/a>) that for best viewing should be <a style=text-decoration:underline;cursor:pointer; onclick=document.getElementById('autoflip').click();>flipped<\/a>.\";
\n document.getElementById('sosad').innerHTML = \" (would have been nice ... but ...)\";
\n<\/b>
\n setTimeout(andno,4000);
\n}
\n<\/b>
\nfunction andno() {
\n video.style.visibility = 'hidden';
\n}
\n<\/code><\/p>\n

A big curiosity for our tiny scrambled brain is that, if you are one of these “previously deprived” (but now sooooooo well looked after … crumpets, Jeeves?!) and have seen what happens with that looping local video (that same one from this blog posting thread’s “Primer”<\/a> tutorial), is that it is one of those “flipped” scenarios, so we suggest one of …<\/p>\n