Does getUserMedia works in ionic-webview in Android app?

前端未结

关注

 2  761

悲哀的现实 2020-12-22 02:11

I have given all the permissions for camera and microphone. Enable CSP in meta tag for the iframe. Still not able to get permission for camera and microphone in getusermedia

2条回答

野趣味 (楼主)

2020-12-22 02:47
Update - 04/11/2018 - Working Ionic example

As promised I had a crack at this today. To answer your question now in full: Yes you can access getUserMedia inside of ionic on Android.

See my GitHub project here for a working example and for screenshots.

See this feature branch here which successfully tests getUserMedia inside of an iframe

Steps involved:
- Install Ionic
- ionic start getUserMedia blank
- cd getUserMedia
- ionic cordova plugin add cordova-plugin-android-permissions
- npm install --save @ionic-native/android-permissions
- npm install webrtc-adapter --save
- link to adapter in angular.json scripts (link)
- Add AndroidPermissions to app.module.ts provider (link)
- Create camera access code in home.component.ts (link)
- Add android manifiest permissions to config.xml and AndroidManifest.xml (link, if the config doesn't copy go to platforms/android/app/src/AndroidManifest.xml)
- ionic cordova platform add android
- ionic cordova build android
- ionic cordova run android
You can also see alternative versions of this for React Native, native Android and Cordova.

As of this update support for iOS is still a no due to Apple security restrictions on WKWebView and UIWebView.

Iframes: To make sure getUserMedia works inside of them make sure you:
- CORS of the embedded site need to have the allowed access origin header
- enable security permissions to access the camera and microphone </code></li> </ul> <p>Please read the following for more info on iframe features:</p> <ul> <li>https://www.chromestatus.com/feature/5023919287304192</li> <li>https://bugs.webkit.org/show_bug.cgi?id=167430</li> <li>https://dev.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes</li> <li>https://bugzilla.mozilla.org/show_bug.cgi?id=1389198</li> <li>https://github.com/instructure/canvas-lms/issues/1219</li> </ul> <hr> <p>Yes, it theoretically can work. See my example below on how to do it in Android. For iOS this isn't currently possible due to the limitations of WKWebView. I have linked to a StackOverFlow question below on how people are achieving this on Cordova which Ionic is based off.</p> <p>The core main steps which need to be achieved to get getUserMedia working on Android regardless of framework are:</p> <ol> <li>Make sure your app is Android API 21 and above</li> <li>Add permissions to Manifest (link to file) </li> <li>Make sure you use getUserMedia adapter for API compatibility</li> <li>Make sure you add webrtc to the Android project gradle file (link to file)</li> <li>Override Chrome WebView permissions to grand access (link to file example, line 106)</li> <li>On app start ask user for permission to access the camera.</li> </ol> <p>The issue you are specifically facing is 4. or 5. It looks like the project gets you that far. The permission error is most likely down to the Chrome WebView your app is using doesn't override the permission, and/or it is and the user hasn't manually enabled the permission. </p> <p>Thus within the Ionic framework you need to extend its Browser to get access to the override onRequestPermissionsResult. To do this you need to make a Cordova plugin and then create the Ionic bindings. </p> <p>More reading about this for similar frameworks can be found here:</p> <ul> <li>Why CordovaWebViewClient not working in Cordova 6 anymore</li> <li>https://github.com/marcusbelcher/rn-getUserMedia-test</li> <li>https://github.com/marcusbelcher/android-getUserMedia-test</li> <li>Cordova version of this question: NotReadableError: Could not start source</li> <li>Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?</li> </ul> </p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='1348840'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="1348840"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> <div class="noreplaytext bb"> <center><div> <a href="https://www.e-learn.cn/qa/q-504975.html"> 查看其它2个回答 </a> </div></center> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_1348840"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1348840">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />  加载中... </li> </ul> </div> </li> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="504975" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="Does getUserMedia works in ionic-webview in Android app?" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="504975" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4">  <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt>