关键词搜索

源码搜索 ×
×

解决视频OCX在调用云台指令使用鼠标事件来发起和结束指令动作无效

发布2020-03-03浏览558次

详情内容

如题:OCX在调用云台指令使用mousedown和mouseup来发送指令和结束指令动作不起作用问题(视频播放和检索在requireJS封装都是正常的)。

在项目中使用requireJS封装了视频控件,但是在指令调用这块始终有问题,经过分析和测试发现:

  • mousedown和mouseup间隔时间一般只有100多ms
  • ocx方法直接调用可以请求,说明ocx不能离开上下文
  • mousedown和mouseup事件之间肯定有某种因素干扰了执行(时间、空间皆有可能)

requireJS封装

下面的方法采用requrejs封装调用:

  1. /* $("#yt_direction_top").on('mousedown',function(){
  2. upstart();
  3. }); */
  4. function upstart(){
  5. require(['videoStart'],function(video){
  6. video.upstart();
  7. });
  8. }
  9. /* $("#yt_direction_top").on('mouseup',function(){
  10. upstop();
  11. }); */
  12. function upstop(){
  13. require(['videoStart'],function(video){
  14. video.upstop();
  15. });
  16. }
  17. /* $("#yt_direction_bottom").on('mousedown',function(){
  18. downstart();
  19. }); */
  20. function downstart(){
  21. require(['videoStart'],function(video){
  22. video.downstart();
  23. });
  24. }
  25. /* $("#yt_direction_bottom").on('mouseup',function(){
  26. downstop();
  27. }); */
  28. function downstop(){
  29. require(['videoStart'],function(video){
  30. video.downstop();
  31. });
  32. }
  33. /* $("#yt_direction_left").on('mousedown',function(){
  34. leftstart();
  35. }); */
  36. function leftstart(){
  37. require(['videoStart'],function(video){
  38. video.leftstart();
  39. });
  40. }
  41. /* $("#yt_direction_left").on('mouseup',function(){
  42. leftstop();
  43. }); */
  44. function leftstop(){
  45. require(['videoStart'],function(video){
  46. video.leftstop();
  47. });
  48. }
  49. /* $("#yt_direction_right").on('mousedown',function(){
  50. rightstart();
  51. }); */
  52. function rightstart(){
  53. require(['videoStart'],function(video){
  54. video.rightstart();
  55. });
  56. }
  57. /* $("#yt_direction_right").on('mouseup',function(){
  58. rightstop();
  59. }); */
  60. function rightstop(){
  61. require(['videoStart'],function(video){
  62. video.rightstop();
  63. });
  64. }
  65. /* $("#yt_zoom_add").on('mousedown',function(){
  66. ZOOMstart();
  67. }); */
  68. function ZOOMstart(){
  69. require(['videoStart'],function(video){
  70. video.ZOOMstart();
  71. });
  72. }
  73. /* $("#yt_zoom_add").on('mouseup',function(){
  74. ZOOMstop();
  75. }); */
  76. function ZOOMstop(){
  77. require(['videoStart'],function(video){
  78. video.ZOOMstop();
  79. });
  80. }
  81. /* $("#yt_zoom_reduce").on('mousedown',function(){
  82. REDUCEZOOMstart();
  83. }); */
  84. function REDUCEZOOMstart(){
  85. require(['videoStart'],function(video){
  86. video.REDUCEZOOMstart();
  87. });
  88. }
  89. /* $("#yt_zoom_reduce").on('mouseup',function(){
  90. REDUCEZOOMstop();
  91. }); */
  92. function REDUCEZOOMstop(){
  93. require(['videoStart'],function(video){
  94. video.REDUCEZOOMstop();
  95. });
  96. }
  97. /* $("#yt_focus_add").on('mousedown',function(){
  98. FOCUSstart();
  99. }); */
  100. function FOCUSstart(){
  101. require(['videoStart'],function(video){
  102. video.FOCUSstart();
  103. });
  104. }
  105. /* $("#yt_focus_add").on('mouseup',function(){
  106. FOCUSstop();
  107. }); */
  108. function FOCUSstop(){
  109. require(['videoStart'],function(video){
  110. video.FOCUSstop();
  111. });
  112. }
  113. /* $("#yt_focus_reduce").on('mousedown',function(){
  114. REDUCEFOCUSstart();
  115. }); */
  116. function REDUCEFOCUSstart(){
  117. require(['videoStart'],function(video){
  118. video.REDUCEFOCUSstart();
  119. });
  120. }
  121. /* $("#yt_focus_reduce").on('mouseup',function(){
  122. REDUCEFOCUSstop();
  123. }); */
  124. function REDUCEFOCUSstop(){
  125. require(['videoStart'],function(video){
  126. video.REDUCEFOCUSstop();
  127. });
  128. }
  129. /* $("#yt_aperture_add").on('mousedown',function(){
  130. APERTUREstart();
  131. }); */
  132. function APERTUREstart(){
  133. require(['videoStart'],function(video){
  134. video.APERTUREstart();
  135. });
  136. }
  137. /* $("#yt_aperture_add").on('mouseup',function(){
  138. APERTUREstop();
  139. }); */
  140. function APERTUREstop(){
  141. require(['videoStart'],function(video){
  142. video.APERTUREstop();
  143. });
  144. }
  145. /* $("#yt_aperture_reduce").on('mousedown',function(){
  146. REDUCEAPERTUREstart();
  147. }); */
  148. function REDUCEAPERTUREstart(){
  149. require(['videoStart'],function(video){
  150. video.REDUCEAPERTUREstart();
  151. });
  152. }
  153. /* $("#yt_aperture_reduce").on('mouseup',function(){
  154. REDUCEAPERTUREstop();
  155. }); */
  156. function REDUCEAPERTUREstop(){
  157. require(['videoStart'],function(video){
  158. video.REDUCEAPERTUREstop();
  159. });
  160. }

OCX html页面的纯调用方式

下面的跟<object > 控件在同一页面声明调用:

  1. function getChannelId(){
  2. return mini.get("CHANNEL_LIST").getValue();
  3. }
  4. function upstart() {
  5. //第二个参数 1 上 1下 2 左 3 右 4
  6. var Res = ocx.PTZControl(getChannelId(), 1, 6, 0);
  7. }
  8. function upstop() {
  9. var Res = ocx.PTZControl(getChannelId(), 1, 6, 1);
  10. }
  11. function downstart() {
  12. var Res = ocx.PTZControl(getChannelId(), 1, 6, 0);
  13. }
  14. function downstop() {
  15. var Res = ocx.PTZControl(getChannelId(), 1, 6, 1);
  16. }
  17. function leftstart() {
  18. var Res = ocx.PTZControl(getChannelId(), 2, 6, 0);
  19. }
  20. function leftstop() {
  21. var Res = ocx.PTZControl(getChannelId(), 2, 6, 1);
  22. }
  23. function rightstart() {
  24. var Res = ocx.PTZControl(getChannelId(), 3, 6, 0);
  25. }
  26. function rightstop() {
  27. var Res = ocx.PTZControl(getChannelId(), 3, 6, 1);
  28. }
  29. function ZOOMstart() {
  30. var Res = ocx.PTZControl(getChannelId(), 8, 6, 0);
  31. }
  32. function ZOOMstop() {
  33. var Res = ocx.PTZControl(getChannelId(), 8, 6, 1);
  34. }
  35. function REDUCEZOOMEstart() {
  36. var Res = ocx.PTZControl(getChannelId(), 11, 6, 0);
  37. }
  38. function REDUCEZOOMstop() {
  39. var Res = ocx.PTZControl(getChannelId(), 11, 6, 1);
  40. }
  41. function FOCUSstart() {
  42. var Res = ocx.PTZControl(getChannelId(), 9, 6, 0);
  43. }
  44. function FOCUSstop() {
  45. var Res = ocx.PTZControl(getChannelId(), 9, 6, 1);
  46. }
  47. function REDUCEFOCUSEstart() {
  48. var Res = ocx.PTZControl(getChannelId(), 12, 6, 0);
  49. }
  50. function REDUCEFOCUSstop() {
  51. var Res = ocx.PTZControl(getChannelId(), 12, 6, 1);
  52. }
  53. function APERTUREstart() {
  54. var Res = ocx.PTZControl(getChannelId(), 10, 6, 0);
  55. }
  56. function APERTUREstop() {
  57. var Res = ocx.PTZControl(getChannelId(), 10, 6, 1);
  58. }
  59. function REDUCEAPERTUREstart() {
  60. var Res = ocx.PTZControl(getChannelId(), 13, 6, 0);
  61. }
  62. function REDUCEAPERTUREstop() {
  63. var Res = ocx.PTZControl(getChannelId(), 13, 6, 1);
  64. }
  65. function startTalk() {
  66. var Res = ocx.TalkControl(getChannelId(), 0);
  67. }
  68. function stopTalk() {
  69. var Res = ocx.TalkControl(getChannelId(), 1);
  70. }

解决方法:抽离这部分mousedown和mouseup方法在页面中直接调用,不需要再封装处理。

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载